[Yarn Berry] Yarn Berry가 node_modules의 문제를 어떻게 해결할까?

개요

2년차 주니어 프론트엔드 개발자로 일하면서 , 요즘 드는 생각이 리액트, 뷰, 앵귤러 같은 프레임워크의 변화를 지켜보고

어떤 부분이 더 좋고, 어떤 부분이 더 편리하게 변했는지 공부하는거도 중요하지만 이런 프레임워크 및 라이브러리를 설치해주는 의존성 및 관리하는것은 node_modules 입니다.

 

이제는 리액트 , 자바스크립트 등의 기술도 물론 중요하지만 이런 의존성 패키지의 Background에 대해서도 deep하게 공부 해야할것 같다는 생각이 들었습니다.

 

그래서 node_modules의 단점을 극복해줄 Yarn berry를 알아보면서 node_modules의 단점을 공부하기위해 포스팅을 하려고합니다.

Package 란?

우선 패키지란 무엇인지 간단한게 알아보겠습니다.

 

모듈(Module)

모듈은 Node.js 애플리케이션을 작은 조각으로 분할하는 방법입니다. 모듈은 코드를 논리적으로 그룹화하고 해당 모듈에서 정의된 변수, 함수, 클래스 등을 내보내거나 가져와서 재사용할 수 있게 해줍니다. Node.js는 CommonJS 스펙을 따르므로, require 함수를 사용하여 모듈을 불러올 수 있습니다. 

 

패키지(Package)

패키지는 Node.js 애플리케이션에서 사용되는 외부 라이브러리나 모듈의 집합입니다. 패키지는 package.json 파일에 정의되며, 이 파일은 프로젝트의 의존성 및 설정 정보를 포함합니다. 패키지 관리자인 npm(Node Package Manager) 또는 yarn을 사용하여 패키지를 설치하고 관리할 수 있습니다.

node_modules 의 문제점 

간단하게 node_modules의 대표적인 단점들을 알아보겠습니다.

 

의존성 버전 충돌

프로젝트의 여러 의존성 패키지가 서로 다른 버전의 라이브러리를 요구할 때, node_modules는 버전 충돌 문제가 발생할 수 있습니다. 이로 인해 프로젝트의 안정성과 유지 보수가 어려워질 수 있습니다. 

 

패키지 설치 시간

의존성 패키지를 설치할 때 node_modules 폴더는 상당한 용량을 차지하고 설치 시간이 오래 걸릴 수 있습니다.

 

 

프로젝트 폴더 가독성

node_modules 폴더는 프로젝트의 루트 디렉토리에 생성되며, 프로젝트 코드와 함께 저장되어 프로젝트 구조를 복잡하게 만들 수 있습니다.

 

이 외에도 비효율적 의존성 검색, 유령 의존성 등이 있습니다. 토스팀 에서 잘 설명해놓은게 있으니 링크 참고해서 꼭 확인해보시는걸 추천 드립니다.

 

참고로 Yarn과 Npm은 다운로드를 받았는지만 검사하고 , 의존성 모듈들이 "잘" 다운로드가 됐는지는 확인을 안한다고 합니다.

 

---

Yarn berry의 등장 

우선 Yarn berry는 node_modules와 node에 내장된 의존성 관리 없이 의존성을 관리하는게 주요한 기능 입니다.

Yarn berry는 Yarn version2 입니다. 이전 버전의 Yarn과 비교하여 다음과 같은 주요 변경 사항이 있습니다.

 

PnP (Plug'n'Play) 모드

Yarn Berry의 가장 큰 변경 사항 중 하나는 Plug'n'Play(PnP) 모드의 도입입니다. PnP 모드는 Node.js 프로젝트에서 의존성을 관리하는 새로운 방식입니다. 이전에는 node_modules 폴더에 의존성 패키지를 설치하고 사용했지만 PnP 모드에서는 이러한 패키지를 별도의 폴더에 설치하고 가상 파일 시스템을 통해 Node.js에 제공합니다. 이로써 의존성 충돌과 패키지 버전 관리가 향상되며, 더 빠른 설치와 실행이 가능해집니다.

 

PnP (Plug'n'Play)  사용법

NPM에서 최신버전의 Yarn을 내려받고, 버전을 Berry로 설정하면 Yarn Berry를 사용 할 수 있습니다.

$ npm install -g yarn
$ cd ../path/to/some-package
$ yarn set version berry

 

그러고 PnP 모드에서 yarn install을 이용하여 의존성을 다운로드 했을때 기존의 node_modules랑은 다른 모습울 볼 수 있습니다,

 

Yarn berry를 이용하면 node_modulues가 디렉토리에 없는걸 확인 할 수 있습니다.

대신 .yarn/cahce 폴더에 의존성의 정보가 저장이 되고  pnp.cjs 라는 생소한 파일이 하나 있을건데요.

pnp.cjs 파일에 의존성을 찾을 수 있는 정보가 기록 됩니다.

 

출처:우아한 테크 유튜브

 

 

 

Zero Install (feat: zipfile)

출처: 우아한 테크 유튜브

 

위 디렉토리 구조를 보면 zip으로 묶인 라이브러리가 저장된 .yarn/cache 폴더를 볼 수 있습니다.

Yarn PnP 시스템에서 각 의존성은 Zip으로 관리됩니다. 이후 .pnp.cjs 파일이 지정하는 바에 따라 동적으로 Zip 아카이브 내용이 참조 됩니다.

 

Zip 아카이브의 의존성의 장점은

1. 더 이상 node_modules의 구조를 생성할 필요가 없기때문에 설치가 빨리 완료됩니다.

2. 각 패키지는 버전마다 하나의 Zip 아카이브를 가지기 떄문에 중복해서 설치 되지 않습니다. 또한 Zip이 압축되어있음을 고려할때 스토리지 용량을 크게 아낄 수 있습니다.

 

 

속도비교

 

출처:우아한테크 유튜브

 

 

결론

NPM

npm은 아무래도 가장 오래 사용되고 있기도 하고 그만큼 reference가 많아서 trouble shooting 하기도 좋은 패키지 매니지먼트  입니다. reference가 많고 안정된걸 지향 한다면 추천 드립니다.

 

PNPM

pnpm은 npm보다는 성능이 좋지만 reference npm보다는 없기 때문에 npm 만큼의  trouble shooting을 기대하긴 어려울것같습니다.

 

Yarn (Classic)

Yarn version 1 같은 경우에는 2.0 버전이 나오면서 2020년도 부터 더 이상 ver1은 개발하지않고 유지보수 모드로 들어갔다고 합니다.

장기적인 프로젝트를 진행한다면 Yarn ver 1 사용은 지양 하는게 좋을것같습니다.

 

Yarn Berry

npm 만큼의 reference는 없지만 CI / CD 및 배포속도 패키지의 용량 고려 등의 이유로 충분히 도입 해볼만 하다고 생각합니다.

 

 

Reference

https://www.youtube.com/watch?v=LUykz1etOo0 

https://toss.tech/article/node-modules-and-yarn-berry

node_modules로부터 우리를 구원해 줄 Yarn Berry

https://www.youtube.com/watch?v=Ds7EjE8Rhjs&t=77s