1. Next.js + Typescript + TailwindCSS + yarn PNP

1. yarn berry + pnp + zero-install 기반의 프로젝트 세팅

1. yarn set version berry

2. .yarnrc.yml

   enableGlobalCache: false
   
   nodeLinker: pnp
   
   yarnPath: .yarn/releases/yarn-4.1.0.cjs
   

3. .gitignore

   • zero-install : cache파일을 업로드하고, .pnp파일(cache에 대한 의존성 정보)을 업로드하지 않는다.

     # /.gitignore
     
     .yarn/*
     !.yarn/cache
     !.yarn/patches
     !.yarn/plugins
     !.yarn/releases
     !.yarn/sdks
     !.yarn/versions
     

   • non zero-install : cache파일을 업로드하지 않고, .pnp를 업로드한다.

     # /.gitignore
     
     .pnp.*
     .yarn/*
     !.yarn/cache
     !.yarn/patches
     !.yarn/plugins
     !.yarn/releases
     !.yarn/sdks
     !.yarn/versions
     

4. yarn install

5. yarn dlx @yarnpkg/sdks vscode

   • VSCode편집기를 위한 yarn berry의 SDK설치

6. select typescript version > workspace version

2. tailwindcss

1. prettier-plugin-tailwindcss

3. eslint

https://velog.io/@xmun74/Next.js-TS에서-ESLint-Prettier-설정하기

설치 모듈

1. eslint : ESLint의 핵심 라이브러리로, JavaScript 및 JSX 코드의 문법적 오류와 스타일 가이드를 검사
   • 코드 품질과 일관성을 유지하는 데 필수적
2. eslint-config-airbnb : Airbnb의 Javascript 스타일 가이드를 따르는 ESLint 설정
3. eslint-config-next : Next 프로젝트를 위한 ESLint 설정
4. eslint-config-prettier : Prettier와 ESLint사이의 스타일 충돌을 방지
   1. 코드 포맷팅 시 prettier의 규칙을 우선시
5. eslint-plugin-prettier : prettier를 ESLint의 규칙으로 실행하여 코드 포맷팅 문제를 ESLint오류로 보고
6. eslint-plugin-import : import/export 문법을 검사하고 오류를 찾아준다
   1. 불필요한 import를 줄이고, 경로 오류를 방지