Yarn Berry로 갈아타기

Yarn 로고

 

프론트엔드 개발자라면 패키지 매니저 선택에 대해 고민해 본 적이 있을 것입니다.

이 글에서는 Yarn Berry가 무엇인지, 그리고 주요 특징과 장단점을 살펴보겠습니다.

Yarn Berry란?

Yarn Berry는 2020년 1월에 출시된 Yarn의 최신 버전으로, Yarn 2.x 이후의 릴리스를 의미합니다.

'Berry'라는 별칭을 사용하는데, 이는 Yarn의 대대적인 개선과 혁신을 상징합니다.

Yarn 클래식(1.x)과는 상당히 다른 접근 방식을 취하며 새로운 사용자 경험을 제공합니다.

특히 Yarn Berry는 Zero-Install, Plug'n'Play(이하 PnP), 향상된 성능 등을 강조하며 많은 주목을 받고 있습니다.

Yarn Berry의 주요 특징

1. Plug'n'Play(PnP) 지원

Yarn Berry는 node_modules 폴더를 없애고 PnP 방식을 도입했습니다.

기존의 node_modules는 프로젝트 디렉토리에서 엄청난 크기와 복잡성을 자랑했지만, PnP는 이러한 문제를 해결해 줍니다.

패키지 의존성을 파일 시스템 대신 가상화된 데이터베이스에서 관리하기 때문에, 설치 속도와 디스크 사용량이 대폭 개선되었습니다.

2. Zero-Install

Yarn Berry는 프로젝트에 필요한 패키지를 .yarn/cache 폴더에 저장하여, 이를 소스 코드와 함께 버전 관리 시스템에 저장할 수 있도록 지원합니다.

이를 통해 팀원들이 프로젝트를 처음 클론한 뒤 별도로 의존성을 설치하지 않고 바로 개발을 시작할 수 있습니다.

3. 향상된 성능

Yarn Berry는 캐시와 병렬 설치 등을 통해 패키지 설치 속도를 비약적으로 개선했습니다.

또한, yarn install 시 불필요한 파일을 걸러내는 immutable 옵션을 사용해 설치 과정에서 오류를 최소화하고 성능을 극대화합니다.

4. 모노레포 환경에 최적화

여러 프로젝트를 하나의 저장소에서 관리하는 모노레포 환경을 위한 다양한 기능이 강화되었습니다.

이를 통해 모노레포 구조의 프로젝트에서 의존성 관리 및 빌드 과정이 더욱 효율적으로 변했습니다.

Yarn Berry의 주요 단점

1. Git에 지속적인 부하

Yarn PnP는 .yarn/cache 폴더에 많은 의존성 파일을 저장하며, 이를 Git에 포함시키면 저장소의 크기가 커져 클론 및 푸시/풀 작업에 부하를 줄 수 있습니다.

특히 대형 프로젝트에서는 이 문제가 더욱 심각해질 수 있습니다.

2. Ghost Dependency와의 문제

PnP 방식은 종종 Ghost Dependency 문제를 일으킬 수 있습니다.

이는 의존성 트리 상에서 명시되지 않은 패키지를 사용하는 상황으로, 개발 중 예기치 않은 오류를 유발할 수 있으며 이를 해결하는 데 많은 시간을 소모할 수 있습니다.

3. 복잡한 설정 및 사용성 저하

Yarn Berry는 PnP와 같은 새로운 기능을 도입하면서 설정이 복잡해졌습니다.

이러한 복잡성은 개발 초기 설정뿐만 아니라 새로운 팀원에게 Yarn Berry의 개념을 설명하고 적용하는 데에도 어려움을 줄 수 있습니다.

 

그럼에도 Yarn Berry는 현대적인 웹 개발 환경에서 성능과 효율성을 강조하는 매력적인 선택지입니다.

기존의 node_modules 방식에서 벗어나고 협업의 편리함을 제공하는 Zero-Install 등 여러 혁신적인 기능을 제공하는 Yarn Berry는 특히 모노레포 프로젝트와 같이 규모가 큰 환경에서 큰 장점을 발휘합니다.

여러분도 현재 사용 중인 패키지 매니저에 한계를 느끼고 있다면, Yarn Berry를 한 번 시도해 보는 것은 어떨까요?

마지막으로 간단하게 Next.js에서 Yarn Berry를 설정하는 방법을 마지막으로 글을 마치겠습니다.

Next.js에서 Yarn Berry 설정하기

1. Next.js 프로젝트 생성

npx create-next-app@latest my-next-app
cd my-next-app

2. Yarn Berry 설정

yarn set version stable

3. .yarnrc.yml 파일 생성 및 설정

nodeLinker: pnp

4. 의존성 설치

yarn install

5. TypeScript SDK 설정 (TypeScript 사용 시)

yarn dlx @yarnpkg/sdks vscode

6. .gitignore 파일 수정

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

7. 개발 서버 실행

yarn dev

 

프로젝트 설정이 완료되면 개발 서버를 실행하여 Next.js와 Yarn Berry의 PnP가 잘 동작하는지 확인합니다.

그리고 VSCode를 사용하는 경우, TypeScript 버전을 "Use Workspace Version"으로 설정해야 합니다.

일부 패키지가 Plug'n'Play와 호환되지 않을 수 있으므로, 필요한 경우 .yarnrc.yml 파일에 다음 설정을 추가할 수 있습니다.

packageExtensions:
  AnyPackageName@*:
    peerDependencies:
      NeedPeerDependency: "*"