Yarn Berry란?

yarn berry는 node_modules 사용 시 생기는 여러가지 문제점 (비효율적인 의존성 검색, 비효율적인 설치, Phantom dependency 등)을 PnP 방식으로 개선한 새로운 패키지 관리 시스템이다. 패키지 파일을 압축하기 때문에 프로젝트 용량도 줄어들고, 해당 압축된 패키지들을 git에 그대로 업로드하는 방법(zero install)을 이용하여 배포 시간을 엄청나게 단축(패키지 인스톨 하는시간)할 수 있는 장점이 있다.


설정

1. 프로젝트 생성

Copy 
yarn create react-app my-app --template typescript  # React + TypeScript 프로젝트
yarn create next-app --typescript  # TypeScript + NextJS 프로젝트

2. 설치된 패키지 삭제

CRA처럼 프로젝트를 생성하고 나면 node_modules와 yarn.lock 파일에 모든 의존성 패키지들이 설치되어 있다. yarn berry를 사용하기 위해서는 이 파일들을 삭제 해준다. 만약 npm을 사용했다면 package.lock.json 파일을 삭제해준다.

Copy 
rm -rf node_modules
rm -rf yarn.lock
rm -rf package.lock.json

3. Yarn 버전 세팅

Copy 
yarn set version berry

명령어를 입력하고 나면 .yarn 디렉토리와 .yarnrc.yml 파일이 생성된다.

💡 만약 .yarnrc.yml 파일에 아래와 같이 nodeLinker가 node-modules를 가리키고 있다면 yarn berry의 PnP 방식의 zip 아카이브로 관리되는 것이 아닌 기존의 node_modules 의존성 폴더 방식으로 관리하게 된다. 그러므로 이 속성을 지워줘야 한다.

Copy 
# .yarnrc.yml
nodeLinker: 'pnp' # pnp(default), pnpm, node_modules 중 설정 가능.
yarnPath: .yarn/releases/yarn-3.3.1.cjs

4. 패키지 설치

yarn 혹은 yarn install 명령어로 패키지를 설치해준다.

Copy 
yarn

설치하고나면 기존과는 다르게 node_modules 디렉토리가 생기지 않고 패키지들은 모두 .yarn/.cache 안에 zip 파일로 설치된 것을 확인할 수 있다.


5. Zero-installs

Zero install은 설치를 하지 않고 이용하는 방식을 말한다. 기존에 node_modules에서 모든 디펜던시를 새로 인스톨하려고 하면, 모든 디펜던시 모듈 인스톨에만 굉장히 많은 시간이 소모하게 된다. 그러나 Zero install을 이용하면 디펜던시 설치에 걸리는 시간을 없앨 수 있기 때문에 시간을 단축시킬 수 있다.

Zero install은 PnP(Plug In Play) 설정을 통해 사용할 수 있다. PnP 모드로 설정하고 디펜던시 모듈을 설치하게 되면 기존처럼 node_modules에 설치되지 않고, 대신 필요한 라이브러리 모듈들이 .yarn/.cache 디렉토리에 zip 아카이브 파일로 관리하게 되고, zip으로 된 각 모듈의 의존성 트리 정보들은 프로젝트 루트의 .pnp.cjs 파일로 관리하게 된다.

  • 😊 장점: node_modules로 설치할 때보다 zip으로 압축된 파일로 관리하게 됨으로써 디펜던시 사이즈를 많이 줄일 수 있다.
  • 😞 단점: PnP 적용 시의 문제점으로 디펜던시 관련 에러가 발생하는 경우가 있다. 각 모듈이 PnP로 사용할 수 있으려면 PnP 방식에 맞게 의존성 관리가 세팅이 되어있어야 한다. 그러나 아직 모든 모듈이 PnP 형태에 맞게 호환되어 있는 상태가 아니기 때문에 아직 많은 문제가 발생할 수 있다. 이로 인해 yarn에서도 완전히 strict한 방식 대신, pnp loose 모드를 통해 명시적으로 요구하는 디펜던시를 요구하지 않도록 할 수 있다.
Copy 
// .yarnrc.yml
pnpMode: loose

Zero-installs 적용

Copy 
# .gitignore
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

Zero-installs 미적용

Copy 
# .gitignore
.pnp.*
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

TypeScript 사용 시

🌀 VSCode 추가 설정

yarn berry의 PnP 기능을 사용하면서 TypeScript를 정상적으로 사용하기 위해 yarn에서 제공하는 VSCode typescript 설정 Editor SDK를 추가로 설정해준다.

VSCode에서 아래 확장프로그램을 설치해준뒤, SDK 설치를 완료해준다.

zipfs

Copy 
yarn dlx @yarnpkg/sdks vscode

설치 후 아래와 같은 메시지가 뜨면 Allow를 눌러준다.

allow


🧩 타입스크립트 플러그인

타입스크립트 플러그인을 Import 해준다. 이 플러그인은 자체 types를 포함하지 않는 패키지를 추가할 때 @types/패키지를 package.json 파일에 종속성으로 자동으로 추가해준다. 설치하지 않아도 상관 없지만 설치하면 편하고 유용하기 때문에 설치해준다.

Copy 
yarn plugin import typescript

🚨 Error

yarn start 에러

yarn start 시 테스트 파일에서 에러가 나는 경우 Jest-dom을 재설치 해준다.

Copy 
yarn remove @testing-library/jest-dom
yarn add -D @testing-library/jest-dom

SWC load 에러

next.config.js

Copy 
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: false, // 추가
};

module.exports = nextConfig;

.babelrc 파일 생성

Copy 
{
    "presets": ["next/babel"]
}

출처

-Yarn-Berry를-사용해보자

Copy