외곈 World 👽🌏

🍀 1. 프로젝트 생성하기

• yarn 설치

npm install -g yarn

• Create React App 기반 프로젝트 생성

yarn create react-app wedding --template typescript

🍀 2. Yarn Berry(PnP) 설정

1. node_modules 폴더 삭제
   
2. berry 버전 설정 ::  yarn set version berry
   

   yarn set version berry

3. root 경로에 .yarnrc.yml파일 생성
   

   //.yarnrc.yml 파일에 pnp 설정하기 (node_modules 대신 pnp방식 사용!)
   nodeLinker: pnp
   

4. yarn install
   

   yarn install
   

확장 프로그램 ZipFS 설치

Yarn Berry에서 TypeScript를 사용할 때 zipfs 확장 기능이 필요한 이유는 Yarn의 Plug'n'Play(PnP) 방식 때문이다. Yarn Berry는 node_modules 폴더 없이 .zip 파일을 통해 의존성을 관리하는데, 이때 파일 시스템을 .zip 형식으로 저장하고 불러오는 과정에서 zipfs가 필요하다.따라서 zipfs를 설치하면, Yarn Berry의 PnP 방식과 TypeScript 환경 간의 호환성을 높여준다. zipfs 확장 기능은 .zip 파일로 저장된 패키지들을 파일 시스템처럼 읽을 수 있도록 지원하여, PnP 환경에서 TypeScript나 기타 툴이 정상적으로 패키지 파일을 탐색할 수 있게 한다.

6. Yarn Berry의 Plug'n'Play(PnP) 방식과 VSCode의 통합 설정

yarn dlx @yarnpkg/sdks vscode

🔥👿 주의!!
명령 팔레트(Ctrl+Shift+P)를 열고 TypeScript: Restart TS Server"를 선택 → "Use Workspace Version”부모 폴더가 아닌 프로젝트 폴더 자체에서 VSCode를 열어야 한다!!!! vscode가 부모폴더로 열려있다면 Use Workspace Version가 보이지 않음...
참고:: https://github.com/yarnpkg/berry/issues/4788

🍀 3. typescript 설정

워크스페이스 버전에 맞는 타입스크립트 버전을 사용하도록 허용해주기

🍀 4. .gitignore에 추가

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

# 참고::  https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

🍀 5. App.test.tsx의 타입에러 제거하기

yarn remove @testing-library/jest-dom

yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

🍀 6. yarn start!!!!!!!!!!!!!!!!!!!!!!!

yarn start