yarn berry로 리액트 프로젝트 생성하기, zero-install이란?

📒 yarn berry로 리액트 프로젝트 생성하기

---

기존 패키지 매니저 대비 yarn berry의 가장 큰 변화 중 하나는 Plug'n'Play (PnP) 기능입니다.

 

PnP는 node_modules 폴더를 사용하지 않고 의존성을 관리합니다.

 

대신, Yarn은 프로젝트 설정과 의존성 정보를 .pnp.js 파일에 저장하여, Node.js가 필요한 패키지를 직접 찾을 수 있도록 합니다.

 

설치 속도를 높이고 디스크 공간을 절약하는 yarn berry의 zero-install을 이용하기 위해서 설치 방법과 프로젝트 생성 방법을 알아보겠습니다.

---

📌 yarn beery 설정

🔎 1. Node.js 설치

Node.js

yarn을 설치하기 위해서는 node 패키지에 기본적으로 내장된 npm이 필요합니다.

 

설치하지 않았다면 우선 위 링크 혹은 nvm을 이용해 node를 설치해줍니다.

 

🔎 2. yarn 설치

자바스크립트의 패키지 매니저인 yarn을 설치해줍니다.

$ npm install -g yarn
$ yarn --version

---

📌 리액트 프로젝트에 yarn berry 적용

🔎 1. 프로젝트 생성

리액트 프로젝트를 구동하기 위해 필요한 다양한 모듈들을 일괄적으로 설치하기 위해 우선 CRA를 이용해 프로젝트를 생성해줍니다.

$ npx create-react-app yarn-berry-app --template typescript

 

🔎 2. npm 관련 파일 삭제

yarn-berry의 가장 큰 장점인 zero-install을 사용하면 node_modules 폴더가 없어 폴더 용량을 크게 줄일 수 있다는 장점이 있습니다.

하지만 npm으로 프로젝트를 생성했기 때문에 그 부산물인 node_modules와 package.lock.json이 자연스럽게 따라오게 됩니다.

 

yarn-berry로 전환을 위해 이 두 의존성 부산물들을 지워주도록 합니다.

 

 

🔎 3. 프로젝트에 yarn berry 적용

$ yarn set version berry

성공적으로 berry 버전이 적용되었다면 위와 같은 로그들이 표시되고 다음 명령어로 패키지를 설치해줍니다.

 

$ yarn install

패키지 설치를 끝마쳤다면 폴더에 다음과 같은 파일 구성을 확인할 수 있습니다.

 

 

 

📒 zero-install 작동방식

---

문득 설치 과정을 진행하다 패키지가 압축되어 있는데 어떻게 패키지를 불러와서 사용할 수 있는지 궁금해졌습니다.

찾아보니 이러한 yarn-berry의 작동 방식은 PnP(Plug’n’Play)에 의해 압축되어진 프로젝트를 사용할 수 있었습니다.

📌 Plug'n'Play (PnP) 작동 방식

🔎 패키지 설치 위치

yarn의 설정 파일(.yarnrc.yml)을 확인하여 캐시 디렉토리가 어디로 설정되었는지 확인할 수 있습니다.

 

🔎 압축된 파일 사용

설치된 패키지는 .zip 형태로 압축되어 저장됩니다. Yarn Berry는 이 압축된 파일들을 직접 읽고 사용할 수 있습니다.

이는 디스크 공간을 절약하고, 프로젝트의 의존성을 더 명확하게 관리할 수 있게 합니다.

 

🔎 .pnp.js 또는 .pnp.cjs

Yarn Berry는 .pnp.js 또는 .pnp.cjs 파일을 생성하여, 어떤 패키지가 어디에 위치하는지 기록합니다.

이 파일은 Node.js가 어떤 요청을 어떤 패키지로 리디렉션할지 결정하는 데 사용됩니다.

 

🔎 패키지 해석

Node.js는 필요한 모듈을 찾을 때 .pnp.js 파일을 참조하여 압축된 파일 내에서 해당 모듈을 직접 찾습니다.

이는 전통적인 node_modules 방식보다 훨씬 효율적이며, "모듈 지옥" 문제를 피할 수 있습니다.

 

🔎 Zero-Install

Yarn Berry의 Zero-Install 기능은 .yarn/cache에 저장된 패키지를 프로젝트와 함께 버전 관리 시스템에 포함시킵니다.

이로 인해 다른 개발자나 CI/CD 시스템에서 별도의 패키지 설치 과정 없이도 프로젝트를 바로 사용할 수 있게 됩니다.