사이드 프로젝트에 yarn berry 적용해보기

nest.js와 마찬가지로 고양이다! 왜 강아지는 없나?...

 

최근 진행하고 있는 프로젝트에서 초기 세팅할 때 yarn berry를 사용하기로 결정하였다. node_modules 디렉터리를 제거하고, 의존성을 의존성을 ZIP 파일 형태로 저장하며 성능을 대폭 향상 시켰다는 이야기를 듣고, 이번 프로젝트에서 적극적으로 도입해보기로 하였다. 기존에 npm과 yarn을 위주로 사용하였기 때문에 차이점을 몸소 느낄 수 있는 좋은 기회라는 생각이 든다.

 

우선, 패키지 매니저에 대해서 간략하게 알아본 뒤에, yarn berry 설치를 위한 가이드를 끝으로 글을 마무리해보겠다.

🤔 패키지 매니저란?

패키지 매니저는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이다.

패키지 매니저의 주요 기능은 다음과 같다.

 

1. 패키지 설치 - 필요한 라이브러리를 지정된 저장소에서 다운로드하고 설치

2. 의존성 관리 - 패키지에 필요한 다른 패키지(의존성)을 자동으로 탐지하고 함께 설치

3. 버전 관리 - 설치된 패키지의 특정 버전 고정, 업데이트, 다운그레이드 가능.

4. 프로젝트 환경 격리 - 각 프로젝트에 독립적인 패키지 환경을 설정하여 충돌 방지 (예: 가상 환경).

5. 패키지 삭제 - 불필요한 패키지를 제거하고 클린업.

6. 스크립트 실행 - 빌드, 테스트, 배포 등 프로젝트 명령어를 간단히 실행

👍 패키지 매니저의 필요성

많은 패키지들은 다른 패키지가 설치되어 있어야만 제대로 동작한다. 이 경우에 기존 패키지를 제대로 동작시키기 위해 필요한 다른 패키지를 dependency라고 말한다. 따라서 패키지를 사용하고자 할 때 dependency에 해당되는 다른 패키지들을 전부 설치해줄 필요가 있다. 하지만 dependency의 dependency를 설치하는 경우가 생기며, 이런 상황에서 사용자가 수동으로 지속적으로 패키지를 관리하기는 불가능에 가까워지게 되고, 이런 상황을 dependency hell이라고 한다. 이런 경우 패키지 매니저를 통해 쉽게 설치하도록 도울 수 있다.

🌟 Yarn Berry의 주요 특징

1. PnP(Plug'n'Play) 방식

• node_modules 디렉터리를 제거하고, 의존성을 효율적으로 관리.
• 의존성을 ZIP 파일 형태로 저장하며 성능을 대폭 향상.
• PnP 방식을 사용하면 파일 시스템 사용량이 줄어들고 의존성 확인 속도가 빨라짐.
  • 예: 프로젝트 크기가 작아지고 설치 속도가 향상.

2. Zero-Install 가능

• 모든 의존성을 저장소에 바로 포함하는 방식.
• 의존성 캐시를 .yarn/cache에 저장하여 yarn install 없이 바로 사용 가능.
• 팀원 간 동일한 개발 환경을 보장.

3. 향상된 커스터마이징

• .yarnrc.yml 파일을 통해 설정을 세밀하게 조정 가능.
• 특정 워크스페이스나 패키지의 버전, 플러그인 등을 쉽게 관리.

🚀 yarn berry 설치 및 사용법

1. 파일 및 폴더 삭제

우선, 기존에 존재하는 node_modules와 package.lock.json은 모두 지워준다.

2. yarn 설치

yarn berry는 기본적으로 yarn을 업데이트하거나 새로 설치하면 사용할 수 있다.

npm install -g yarn

 

나의 경우에 세팅하는 도중에 약간 헤매서... yarn --version으로 버전을 체크하였는데 yarn이 4.1.2로 설치되어 있었다. 이런 경우에는 yarn을 다시 1.x로 시작하도록 설치를 해주면 되겠다.

3. yarn 버전 업그레이드

우리는 이제 설치된 Yarn Classic에서 Yarn Berry로 업그레이드 해야 한다.

yarn set version berry

위 작업으로 생성된 .yarnrc.yml 파일을 수정한다.

yarnPath: .yarn/releases/yarn-4.5.1.cjs
nodeLinker: pnp

4. yarn install 

yarn install

yarn으로 패키지들을 다운로드 합니다.

5. yarn typescript 플러그인 설정

yarn plugin import typescript
yarn add -D typescript
yarn install

 

여기까지 하면 아래와 같이 빨간 줄 천국을 만나게 되는데, 걱정하지 않고 다음 스텝을 밟아가면 된다.

 

5-1. vscode extension으로 가서 ZipFS 검색 후 설치

 

기존 npm을 이용할 때는 node_modules에 압축되어 있지 않은 상태로 존재하기 때문에 이런 extension이 필요없지만, yarn에서는 패키지들이 압축되어져 있는 상태이기 때문에 vscode에서 참조하기 위해서는 ZipFS가 필요하다. 

5-2. SDK 설치

yarn dlx @yarnpkg/sdks vscode

5-3. SDK 적용

컨트롤 + p를 누른뒤,

>TypeScript: Select TypeScript Version을 입력한다.

 

5.x.x-sdk를 클릭한다.

Zero-Install 적용

Zero-Install은 패키지 매니저의 기능 중 하나로, 프로젝트를 클론하거나 작업 환경을 설정할 때 yarn install 같은 설치 과정을 생략하고 바로 작업을 시작할 수 있게 해주는 방식이다.

Zero-Install을 적용하기 위해 .gitignore에 아래와 같이 적어주면 된다.

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