yarn berry로 react 세팅하기

💡 이 포스팅에서는 eslint, prettier 등 다른 설정을 하지 않고 yarn berry에 대한 자세한 설명을 다루지 않고 yarn berry를 이용한 React 프로젝트 세팅에만 관한 포스팅입니다. 다음엔 yarn berry에 대해 자세히 글을 작성해보도록 하겠습니다.

🎯 목표

yarn berry를 사용해서 React 프로젝트를 세팅한다.

1️⃣ React 프로젝트 생성

필자는 vite를 사용해서 프로젝트를 생성했다.

yarn create vite react-project --template react-ts
cd react-project

2️⃣ yarn berry으로 변경

Yarn berry는 기존 의존성 관리 시스템과 많이 다르기 때문에 패키지 단위로만 도입할 수 있습니다.

yarn set version berry
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.3.1/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in ../.yarn/releases/yarn-3.3.1.cjs
➤ YN0000: Done in 1s 321ms

위 명령어가 정상적으로 실행되었으면 생성한 디렉토리 하위에 .yarnrc.yml .yarn/releases/{yarn버전}.cjs 파일이 있는 걸 확인할 수 있습니다.

yarn version 확인

yarn berry를 사용하기 때문에 버전을 찍어보면 3으로 시작하는 yarn berry가 적용되었음을 알 수 있습니다.

yarn --version
3.3.1

yarn berry로 설정 후 패키지 install

명령어를 입력하여 패키지를 install 해줍니다.

→ yarn install 혹은 yarn을 입력합니다.

yarn
➤ YN0000: ┌ Resolution step
..
..
➤ YN0000: Done with warnings in 58s 456ms

vscode 세팅

필자는 개발하면서 node_modules에 있는 파일을 열어보는 일이 자주 있다. 보통 타입을 확인하기 위해서 열어보는데 PnP 기능을 통해 의존성을 관리하는 yarn berry로 세팅을 한 경우에는 불가능하다. 왜냐하면 PnP에서는 zip 파일로 의존성이 묶여있어 바로 확인할 수 없다.

그래서 [ZipFS](https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs) 확장 프로그램을 이용해 PnP를 사용하는 프로젝트에서 의존성 파일을 기존 방식처럼 열어볼 수 있다.

TypeScript 관련 구성

yarn dlx @yarnpkg/sdks vscode

hanyunseong-log