개발메모장

Next.js에서 React-query를 사용하려면 React 프로젝트와는 조금 다르게 환경을 세팅해야한다. 13버전 이후부터는 RSC가 도입되어 가장 상위 모듈인 layout에서 QueryProvider로 QueryClient를 props로 내려줄 수 없기 때문. Setting app router 환경에서 사용. Next.js 애플리케이션의 엔트리 포인트 지점을 ReactQueryStreamedHydration 과 QueryClientProvider 컴포넌트로 감싸주어야 한다. app에 속하는 하위 컴포넌트들은 기본적으로 서버 컴포넌트로 동작하기 때문에, 에러가 발생할 수 있다. QueryClientProvider는 클라이언트에서 초기화되어야 하기 때문. 따라서 client 사이드에서 동작하는 prov..

Eslint 설치 먼저 프로젝트 루트 디렉토리에서 eslint를 설치한다. pnpm add eslint --save-dev eslint 초기화 eslint를 프로젝트에 적용하려면 초기화해야 한다. eslint를 초기화하려면 다음 명령어를 실행한다. npx eslint --init Prettier 설치 먼저 프로젝트 루트 디렉토리에서 prettier를 설치한다. pnpm add prettier --save-dev prettier 설정 파일 생성 프로젝트 루트 디렉토리에 .prettierrc 또는 .prettierrc.json 파일을 생성한다. { "semi": true, "printWidth": 100, "singleQuote": true, "tabWidth": 2, "trailingComma": "non..

현재 CRA(Create React App)는 더 이상 React 프로젝트를 시작하는 데 권장하는 방법이 아니다. Vite와 PNPM의 조합을 사용하여 리액트 프로젝트 템플릿을 구성해보자. VITE란? Vite는 다른 JavaScript 기반 번들러보다 10~100배 빠르다. Go로 작성되었으며 해당 종속성이 esbuild에 사전 번들로 포함되어 있기 때문이다. 또한 vite는 소스 코드를 기본 ESM으로 제공하여 개발자 생산성 향상을 위한 주문형 변환 및 로딩을 가능하게 했다. PNPM이란? PNPM은 디스크 공간을 최적화하고 설치 속도를 높이는 npm 및 원사보다 빠른 대안입니다. https://pnpm.io/benchmarks 벤치마크 페이지이다. 앱 구축 vite 및 pnpm을 사용하려면 노드 버..