[React] Vite + Yarn Berry 프로젝트 설정

 

📂 목차

• yarn berry 활성화
• 주의해야 할 이슈 & 해결책

 

---

yarn berry 활성화

1. 프로젝트 생성

yarn create vite my-app --template react-ts

 

2. yarn berry 초기화

yarn set version berry

 

3. pnp 방식 사용하여 의존성 관리

• .yarnrc.yml 파일에서 nodeLinker: pnp 내용을 추가
• 이 설정을 통해 node_modules 폴더 없이도 패키지를 관리할수 있다.

 

4. yarn install 패키지 설치

yarn install # .yarn/cache 설정

 

5. ZipFS 플러그인 설치

 

주의해야 할 이슈 & 해결책

1. 타입스크립트 경로 인식 문제

yarn dlx @yarnpkg/sdks vscode #Vs Code SDK 설치

이 명령어를 실행하면 .vscode/settings.json 파일이 생성되고, VS Code가 올바르게 TypeScript를 인식하게 된다.

 

✅ VS Code 설정 적용 방법:

1. command + p(Mac) 또는 ctrl + p(Windows)
2. ">" 입력 후 Select TypeScript Version 선택
3. Use Workspace Version 클릭하면 타입스크립트가 정상적으로 작동한다.

2. zero-install 사용 시 .gitignore 설정

Yarn의 Zero-Install 기능을 사용하면 .yarn/cache 등의 폴더가 .gitignore에 올바르게 설정되어야 한다. 아래 설정 추가

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

https://yarnpkg.com/getting-started/qa

Questions & Answers | Yarn