Vite + React + TypeScript + Yarn Berry 프로젝트 설정

우연히 유튜브를 보다가 create-react-app을 더 이상 사용하지 말라는 조언을 들었다.

출처 : https://youtu.be/2OTq15A5s0Y

또한, 경험상 Yarn Berry 사용시 불편한 점이 많다.
그래서 간단하게 Vite로 프로젝트를 생성하는 방법을 정리해본다.

1. Vite로 프로젝트 생성

yarn create vite # https://vitejs-kr.github.io/guide/
cd my-app # 생성한 my-app 디렉토리로 이동
code. # 해당 디렉토리에서 VS code 새로 열기

2. Yarn Berry로 버전 변경

yarn -v # 아마 아직은 v1.몇으로 나올것
yarn set version berry # Yarn berry로 버전을 변경한다
yarn -v # v3.2.4 혹은 그 이상
yarn # yarn install

3. TypeScript SDK 설치

yarn dlx @yarnpkg/sdks vscode

4. 설치한 SDK로 작업영역 설정

1. Ctrl + Shift + P 입력
2. >Select TypeScript Version... 입력
3. 작업 영역 버전 사용 선택

5. Yarn Berry PnP 사용

1. .yarnrc.yml 파일 열기

2. nodeLinker: "pnp" 추가

3. .gitignore 파일 열기

4. 아래 내용 추가 참고(https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)

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

6. Yarn 재설치 및 실행

yarn
yarn dev