언젠가는 펼쳐 볼 아카이브

현재 프로젝트에서 동일하게 코드 컨벤션을 맞추기 위해 eslint와 prettier를 적용했습니다. 다수의 인원과 함께 프로젝트 작업을 하신다면, 코드 퀄리티를 위해 eslint 와 prettier 를 적용하는게 좋습니다. 컴포넌트 작성할때 함수 표현식으로 사용하기로 했는데, 선언식과 차이가 있을까요? 어떤 것이든 사용해도 상관은 없습니다. 다만 hoisting 이슈만 유의해서 사용해주시면 됩니다. 타입스크립트를 사용할때 유의점이 있을까요? 타입스크립트를 사용할 때, "모든 타입을 적어줄거야!" 보다는 타입 추론이 되는 것들은 작성하지 않아도 됩니다. 그래야 생산성도 올라가고, 흔히 말해 가독성도 좋아지거든요. 필요한 것에만 타입 선언을 하시면 됩니다. React Query 버전 관련 React Quer..

commit 등 관리할 때, 백엔드/프론트 엔드 별로 나눠서 레포를 관리하면 너무 번거로워져서 한 레포로 작업하려고 합니다. husky로 보려고 해도 애매한데요. 이렇게 적용하는게 맞을까요? 아니면 더 좋은 방법이 있을까요? 현재 구성한 구조는 client/ server에서 동일한 패키지를 사용한다고 했을 때, 각 폴더마다 중복되는 패키지가 설치가 될 겁니다. 저장소를 하나로 두고 구성한다는 것은 mono repo로 구성한다는 것이겠죠? mono repo를 구성한다는 것은 한 repogitory 안에서 client/server 를 구성하는 것이 아닙니다. yarn 또는 npm workspace 를 써서 구성하는 기술이 있습니다. 어떤 workspace를 쓰던 상관은 없지만 "왜 사용했는가"가 매우 중요합..

React styling React + styling 도구 CSS module css, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음 스타일 충돌을 방지하고 코드를 격려하여 체계적으로 CSS 설계가 가능함 스타일링을 직접 하나하나 해야함 CSS in JS 따로 CSS 파일을 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능함 JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음 class 이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음 ex)styled components UI framework 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음 styling의 학습 및 훈련이 필요한 초심..

성능 측정 키 매트릭 웹 퍼포먼스 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정함 성능을 측정하여 웹 앱의 사용성을 개선할 수 있음 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등, 좋은 유저 경험으로 유저의 만족을 얻음 Time To First Byte 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간 브라우저의 요청이 서버까지 가는 시간 서버에서 요청을 처리하는 시간 서버에서 브라우저까지 응답이 가는 시간 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되는 등의 상황이 발생할 경우 지표가 악화됨 First Contentful Paint (FCP) 페이지에 진입하고부터, 브라우저가 어떤 DOM content를 만들때까지 걸리는 시간 브라우저의 ..