React/Next.js

*eslint는 airbnb typescript 세팅입니다. *npm이 설치되어 있다는 가정하에 작성하였습니다. *패키지 매니저는 npm과 pnpm 위주로 작성하였습니다. *Next.js 는 13.4.19 버전 *storybook 7.3 버전 *lint-staged 14.0.1 버전 *husky 8.0.0 버전 *eslint 8.47.0 버전 *prettier 3.0.2 버전 *tailwindcss 3.3.3 버전 0. pnpm 설치(pnpm 설치되어 있으면 skip) 패키지 매니저 pnpm 사용 안 할거면 스킵. npm install -g pnpm pnpm 사용(명령어를 몇 개 정도만 정리해두었습니다.) # 의존성 하나 설치할 때 pnpm add // dependencies 에 저장 pnpm add -..

1. 폴더구조 이런 식으로 일일이 여러 개의 폴더를 만드는 것이 아니라 이런 식으로 [어쩌구] 식의 폴더를 만들어 주면 detail/1 detail/2 detail/3 ... 등을 커버 가능합니다. 이를 Dynamic Route라고 부릅니다. 그 폴더 밑에 이제 page.tsx를 만들어주면 되는 것이죠. 1-1. Link 태그 이전 페이지에서 Link 태그(next.js 에서 제공하는 Link 태그입니다. react-router-dom 에서 가져온 태그 아닙니다.)를 만들어 뒀다면 detail 페이지로 넘어갈 때 그 페이지의 params 값과 querystring 값을 넘겨받을 수 있겠습니다. 아래 예시코드로 이해해봅시다. *prefetch 란? 더보기 여기서 잠깐 next.js의 Link태그에 대해서 ..

1. .env.local (로컬 개발 시) .env.local은 .env를 덮어쓰는 파일로, test 환경 외의 모든 환경에서 로딩됩니다. 참고로 .local은 development와 production 뒤에 붙여서 사용할 수도 있습니다. 이에 대해서 아래에서 다룹니다. 2. .env.development .env.development 파일은 개발환경 시 아래의 명령어를 치면 사용됩니다. 만약, .env.development.local이 있다면, .env.development를 덮어씁니다. $ npm run start $ yarn start npm start 시 .env 파일도 실행되는 우선순위가 있는 것입니다. 우선순위는 아래와 같습니다. (오른쪽을 덮음. 왼쪽 최종적용).env.development...