지선생 코딩딩 지선생 코딩딩

디자이너분들과 오랫동안 겪었던 이슈인데 이번에 해결했고 공유하면 좋을 거 같아 적어본다 문제 우리 회사에서는 지속적으로 있었던 문제가 있었다. A : "B 님 피그마랑 웹이랑 마진이 안맞아요" B : "수치상으로는 정확히 맞는데 보기에는 안맞나요?" A : "피그마 미러로 캡처해서 보면 1~2px씩 어긋나 있어요" 위 대화가 반복되었다. 처음에는 내 구현 방법이 잘못되었나 하고 자책도 많이 했었다 확실히 문제는 있는데 개발은 많이 남아있고, 데드라인은 다가오고 있고 수치상으로 믿지 말고 눈으로 보기에 똑같이 맞추어야 되나? 생각도 들었다 회사의 큰일이 어느 정도 마무리 되고, 이슈 레이즈를 하였다. 다행히 디자이너분도 문제가 있다고 생각을 하고 있었고 스터디를 진행했다 결론부터 말하자면 line heig..

들어가며 백엔드와 협업을 할 때 API 명세를 보며 해당 API의 주소, Method ,Request, Response 등의 타입을 정의하는 것과 API 스펙이 변경되었을 때 다시 문서를 확인하고 위의 행동을 반복하는 것은 귀찮고 시간이 많이 소요된다 우리 회사에서 어떻게 위의 일을 처리하고 있는지, OpenAPI TypeGenerator가 어떤 도움을 주고 있는지 살펴보려고 한다. OpenAPI TypeGenerator가 어떤 문제를 해결할 수 있을까? OpenAPI Typegenerator은 OpenApi specification을 기반으로 여러 가지 데이터 형식을 자동으로 생성할 수 있는 라이브러리이다. OpenAPI Typegenerator로한번 잘 구축해 두면 타입스크립트를 사용할 때 어쩔 수 ..

들어가며 오랜만에 블로그 작성을 하는 거 같은데 최근에 회사를 다니게 되었고 오늘이 딱 3개월 차가 되었다. 나는 대학교 3학년을 다니며 취준을 시작하게 되었고, 약 1년의 준비 끝에 파이퍼블릭이라는 스타트업에 다니게 되었다 취준을 하면서 느낀점과 회사를 다니면서 느낀 점에 대해 후기를 남겨보려 한다. 쉽지 않은 취업 처음에는 자신이 있었다. 신입 중에선 나름 스펙을 쌓은 편이라고 생각했고 구현능력도 스스로 좋다고 생각했다 그리고 22년도 초쯤에 같이 공부하던 사람들이 좋은 회사에 가는 모습을 보면서 자만했었던 거 같다. 과제테스트는 대부분 통과하긴 했지만 일단 서류에서 걸러지는 경우가 많았다. 그리고 면접을 잘 보아야 하는데 초반에 긴장하고 떠는 모습을 보였던 거 같다. 이제와 생각해 보면 덜덜 떨면서..

next 13이 나오고 많은 기능이 새로 나왔다. 1. app Directory 업데이트 소식, 2. 터보팩 3. 새로운 next/image 4. 새로운 @next.font 5. next/link 없이 가능하게 변경 그중 app Directory를 사용할 때 몇가지 차이점은 1. layout : layout 구조를 사용하여 경로간 ui를 공유하고 재렌더링을 피할수있다. 2. server components : react 18에서 지원하는 서버 컴포넌트를 기본값으로 만든다. 3. streaming : 데이터를 필요로 하지 않는 페이지는 바로 렌더링하고 데이터를 불러오는 페이지는 로딩 상태로 표시 할 수 있는 기능 4. Data Fetching : react에서 fetch를 확장시켜 적용하였는데 cache ..

문제 원래 이렇게 평범하게 import 해서 Routing 하던 컴포넌트가 있다. import React from 'react' import { Switch, Route } from 'react-router-dom' import './App.css' import ListPage from './pages/ListPage/index' import ViewPage from './pages/ViewPage/index' function App() { return ( ) } export default App 어떤 번들을 사용하고 있는지 확인할 수 있는 도구인 cra bundle analyzer을 가동해보면 청크를 한 뭉탱이 가져와 적절하지 않게 사용하고 있다는 것을 알 수 있다. (refractor은 특정 페이지에..

자바스크립트 실행시간을 어떻게 줄이지? 개발자 도구 -> 성능 탭으로 가면 프로파일링 시작 버튼을 누름으로써 성능을 볼 수 있다, 탭에 나와있는 결과를 보며 비정상적으로 긴 실행 시간을 가지고 있는 컴포넌트가 있다면, 해당 컴포넌트로 가서 로직을 변경하므로써 해결할 수 있다. 실습 성능 탭에서 프로파일링을 하면 나오는 창이다. 보면 Article 이라는 컴포넌트의 자식 요소들이 유독 눈에 띄는데 끊어지고, 실행되고를 반복하고 있는걸 확인 했다. function removeSpecialCharacter(str) { const removeCharacters = ['#', '_', '*', '~', '&', ';', '!', '[', ']', '`', '>', '\n', '=', '-'] let _str = ..

이미지 최적화란? 뷰어에게 보여지는 이미지의 품질은 훼손시키지 않으면서 동시에 가능한 작은 크기의 이미지를 제공하는것 가능한 작은 이미지를 제공하여 사용자가 이미지 로드를 기다리는 시간을 줄일 수 있다. 또한 적절한 alt 요소를 사용하는것도 이미지 최적화로 볼 수 있다. 1. img 태그 사용하기 .thumb{ background-image: url("thumb.png") } img 태그를 적절하게 사용하면 스크린 리더기와 같은 보조기구에 더 인식이 잘되며 SEO 최적화에 도움이 된다. 2. 이미지의 크기를 적절하게 조절하기 html에서 img 태그는 본인의 width, height 픽셀의 2.4배정도 표현 할 수 있다. 예를 들어 100x100 img 태그에 1200x1200 이미지를 사용하나, 24..

프로젝트를 진행하면 가끔 이런 경우가 있다. 1. 데이터 여러 개를 받아야 해서 배열로 받긴 했는데, api에는 하나씩 post 해야 하는 경우 2. 여러개의 데이터를 한 군데 모으긴 했는데 , api에는 하나씩 post 해야 하는 경우 이럴 때 maps를 돌려 처리하면 편리하지만 api를 여러 번 호출하기 때문에 서버에 부담도 된다. 데이터를 모아서 배열 형태로 한방에 보내는 방법은 없을까 고민을 하다가 promise all() 메서드를 찾았다. Promise.all() 메서드를 간단히 설명하면 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환한다고 하는데 어떻게 사용해야 할까? Promise.all()을 사용하지 않을때: cons..