nvmrc .nvmrc 파일이란, 프로젝트 구동을 위한 Node의 버전을 기록할 수 있는 파일을 말합니다. NodeJS 프로젝트에서 타인이 만든 프로젝트를 구동할 때 버전 문제가 발생해서 실행을 못한다거나, 일부 라이브러리를 사용하지 못했던 경험이 한 번 쯤은 있을텐데요. README.md 파일에 버전명을 적어두는 것 보다 협업 대상자가 명령어 한 줄...
내가 주로 쓰는 Next.js ESLint 설정
Package 설치 더욱 정교한 Formatting을 위해 플러그인을 설치합니다. yarn add -D eslint-plugin-simple-import-sort eslint-plugin-unused-imports # or npm install -D eslint-plugin-simple-import-sort eslint-plugin-unused-i...
기술 블로그에 Giscus를 추가했습니다!
개요 기술 블로그를 Github Pages로 이전하면서 정적인 웹사이트로 바뀐 이후, 기술 블로그에 방문하는 분들의 리액션을 알 수 있는 창구가 필요해졌습니다. 그래서 지난번에 게시물 하단에 applause-button를 추가했었죠. 가장 큰 호응을 얻고 있는 Pinia 게시글 하지만 박수 횟수로는 방문자들의 니즈를 알 수가 없다는 문제가 있습니...
소스코드의 퍼포먼스를 벤치마킹하는 방법
개요 프로젝트를 진행하다보면 하나의 Feature를 해결하기 위한 다양한 방법들을 마주할 때가 많아요. 예를 들어, 특정 Element를 복제하고 싶을 때 사용할 수 있는 API는 크게 createElement와 cloneNode가 있습니다. 둘 중 어떤걸 써도 문제의 해결은 가능하지만 가급적 좋은 길을 선택하고자 할 때, 어떤 API가 보다 좋은 ...
Nextjs에서 React Portal 사용해보기
React Portal 웹을 제작하다보면 대부분의 경우 계층 구조로 컴포넌트를 배치하여 렌더링하는 방식으로 문제를 해결할 수 있습니다. 그런데 간혹 n레벨에 배치 되어야 하는 컴포넌트가 실제로 렌더링 될 때는 Document의 최상단에 배치하고 싶을 수 있습니다. Tooltip Modal Tooltip이나 Modal 컴포넌트가 바로 그 대표적인...
Nextjs의 hydration이란?
Hydration Hydration을 검색하면 나오는 이미지 Hydration은 위 이미지처럼 ‘수분 공급’을 의미합니다. Hydration을 이해하기 전에 CSR, SSR이 무엇인지 간단하게 짚고 넘어가야 합니다. CSR Client Side Rendering의 약자입니다. Web은 단순히 홈페이지라는 개념을 넘어서 응용프로그램의 영역을 대체한지 ...
Element가 서로 같은지 비교하기
개요 실제로 웹을 개발하다보면 DOM Element를 직접 핸들링 해야하는 일이 은근히 생깁니다. 그럴 때, 내가 선택한 Element와 어떤 Element가 서로 동일한 Element인지 비교를 하고 싶을 때가 있는데, Javascript에서는 다행히도 isEqualNode와 isSameNode Method를 지원합니다. 사용해보기 코드 const ...
React Query로 관리하는 효율적인 서버 데이터 핸들링
React Query React Query는 네트워크에서 받아온 데이터를 관리하기 위해 처리해야 하는 다양하고 번거로운 절차들을 대신 처리해주는 라이브러리입니다. React Query npm 다운로드 횟수 주간 다운로드 횟수가 백만 회를 넘어갈 정도로 인기가 많은 라이브러리인데, 서버 데이터에 대해 어떤 문제점이 있길래 이렇게나 많은 호응을 얻을...