yarn berry zero-install 적용기 (node_modules 잘가~)

인사

안녕하세요~ 고영이에요~ 👋
오늘은 요즘 핫한 yarn berry를 소개하고 적용해보려고 해요. yarn berry는 개발자 경험(DX)을 높여주는 아주 훌륭한 도구에요. DX가 상승되면 개발 효율이 높아지고 이는 생산성 향상에 큰 도움이 될 수 있어요. 간단하지만 강력한 기능이니 꼭 사용해보세요~!

yarn berry

yarn berry란?

yarn berry를 설명하기 전에 yarn을 소개할게요. yarn은 npm과 같은 노드 패키지 매니저로 여러가지 라이브러리를 다운로드 받고, 버전 관리를 할 수 있어요. npm의 보안, 속도, 성능들을 향상시키기 위해 facebook이 만든 도구에요.

yarn berry는 yarn의 version 2 이상을 말해요. 아래에서 나타나는 문제점들을 해결하고 DX를 향상시켜줌으로써 생산성에 크게 기여해요.

npm, yarn v1의 문제

• 용량 문제
  npm과 yarn v1은 워크스페이스에 node_modules 디렉토리를 만들고 그 안에 패키지를 다운로드 받아서 사용해요. node_modules는 작은 프로젝트 하나에도 수백MB ~ 수십GB의 엄청난 용량을 차지해요. 여러개의 레포지토리를 사용한다면 순식간에 수백GB의 용량이 낭비될 수 있어요.
• 시간 문제
  레포지토리를 클론하고 라이브러리들을 설치하는데 짧게는 몇분, 길게는 10분이 넘는 시간이 걸려요. 또 node_modules를 읽는데 필요한 느린 메모리 I/O로 시간이 오래 걸려요.
• 서로 다른 환경 문제
  개발자마다 서로 다른 환경에서 개발이 이뤄질 수 있어요. node_modules는 git으로 관리하지 않기 때문에 이를 엄격하게 관리하기 어려워요. 서로 다른 개발 환경으로 인해 여러가지 사이드 이펙트가 발생할 수 있어요.
• 의존성 문제
  이렇게 만들어진 node_modules는 package_lock.json 또는 yarn.lock 파일로 의존성이 관리되는데 엄청나게 복잡한 의존성과 유령 의존성 등의 문제로 패키지와 관련된 다양한 오류를 일으키곤 해요.

yarn berry의 장점

• zip 파일
  yarn berry는 용량 문제를 해결하기 위해 각각의 패키지를 zip 파일로 압축해요. .yarn/cache/ 디렉토리에 압축된 zip파일들이 저장되어있어요. 압축을 통해 node_modules 대비 패키지 용량을 10배 이상 줄여줘요.
• zero-install
  설치가 필요없는 zero-install을 지향해요. 패키지의 용량이 줄었기 때문에 패키지를 git에서 관리할 수 있어요. 레포지토리에 zip파일을 포함시켜서 커밋을 하기때문에 별도로 패키지들을 다운로드할 필요가 없어요. 이로 인해 패키지 설치 시간이 대폭 줄어들어요. 또 .pnp.cjs 파일로 의존성을 관리하기 때문에 의존성 탐색 시간이 대폭 줄어들어요.
• 동일한 개발 환경
  모든 사용자가 git clone을 통해 같은 zip 파일을 사용하기 때문에 같은 환경에서 개발이 가능해져요.
• 단순한 의존성
  패키지 버전마다 각각의 zip 파일을 만들기 때문에 의존성이 단순해져요. 의존성으로 인한 여러가지 문제들이 해소됨으로써 DX를 크게 향상시켜요.

yarn berry 사용법

• yarn 설치

npm i -g yarn

node 설치 후 위 명령 실행 https://nodejs.org/ko/download/

• yarn berry 설정

yarn set version berry

yarn berry로 버전을 설정하면 .yarn/releases 디렉토리에 yarn-3.4.1.cjs 파일이 생성되고, 루트경로에 .yarnrc.yml 파일이 생성돼요. .yarnrc.yml 파일을 열어서 nodeLinker: pnp로 설정하거나 nodeLinker를 제거해주세요. 설정 값으로는 pnp, pnpm, node-modules가 가능해요.

• 패키지 설치, unplug

yarn
OR 
yarn install

위 명령어로 패키지들을 설치해요. 패키지들은 .yarn/cache/ 디렉토리에 각각 zip 파일로 저장되고, .yarn/unplugged 디렉토리에 zip파일을 풀어서 사용해야 하는 패키지들이 자동으로 unplug돼요. 그리고 install-stage.gz 파일이 생성돼요. 루트경로에는 의존성 관리를 위한 .pnp.cjs 파일과 .pnp.locader.mjs 파일이 생성돼요. 그리고 node_modules 디렉토리에 불필요한 패키지들이 제거돼요. 패키지 설치가 완료되면 node_modules 디렉토리와 package-lock.json 파일을 제거하시고 다시한번 yarn 명령을 실행하세요.

• vscode를 사용한다면 yarn dlx

yarn dlx @yarnpkg/sdks vscode

vscode, intellij 등의 IDE에서 Eslint, TypeScript, Prettier를 사용하기 위해서는 yarn sdk를 설치해서 세팅을 맞춰줘야해요.
참고: https://yarnpkg.com/getting-started/editor-sdks#editor-setup

설정 끝~!

이제 yarn berry로 전환이 끝났어요! 레포지토리를 클론할 경우 yarn 명령만 입력하면 패키지 다운로드 없이 환경 설정이 끝나고 곧바로 프로젝트를 사용할 수 있는 환경이 돼요. 이로써 더 간편하고 빠르게 프로젝트 설정을 마칠 수 있어요. yarn berry 덕에 개발효율이 상승해서 너무 기쁘네요~! ✨
그럼 이만~ 👋