환경 설정: Create React-App, Yarn

Yarn이란?

yarn은 자바스크립트로 작성된 프로젝트의 종속성을 관리하는데 사용되는 오픈 소스입니다.

기존의 npm이라는 방대한 오픈소스가 가진 문제점을 보완하고자 등장하였으며, 그중에서도 비효율적인 의존성 검색 부분을 크게 개선시켰습니다.

 

NPM의 문제점

 

Yarn도 NPM을 통해 설치해야 하는오픈소스일 정도로 NPM은 Node 환경에서 기본으로 제공되고 있는 종속성 관리 오픈소스입니다. 다만, 방대한 라이브러리를 가진 장점은 반대로 검색의 비효율을 가져왔습니다.

 

자료출처: https://toss.tech/article/node-modules-and-yarn-berry

 

라이브러리를 찾기 위해 트리 구조로 뻗어 나가는 NPM은 상위 디렉토리를 계속 탐색해 나가야 합니다. 따라서 첫 번째 단점은 속도 면에서 찾을 수 있었습니다.

그리고 node_modules 디렉토리의 비효율적인 용량 문제도 있습니다. NPM의 이러한 트리구조를 이루기 위해 과한 부피의 node_modules 디렉토리를 구성하게 됩니다. 정작 중요한 패키지를 구별하기 어려워지고, 이는 의존성의 유효성 검증이 어려워짐을 보입니다.

 

Plug'n'Play를 통한 .yarn/cache 활용

yarn의 최신 버전을 이용하는 pnp 방식은 기존의 npm이나 yarn 1 버전에서 발생하는 문제를 해결해주고 있습니다.

의존성을 Zip 아카이브로 관리하면서 용량에 대한 문제, 속도에 대한 문제를 크게 개선시켜줍니다. 

예를 들면, 일반적인 node_modules 는 1.2GB 크기이고 13만 5천개의 파일로 구성되어 있는 반면, Yarn PnP의 의존성은 139MB 크기의 2천개의 압축 파일로 구성된다고 합니다.

 

Zero-Install

Zero-Install을 사용하면 앞서 줄어든 의존성 관리를 git을 통해 할 수 있게 됩니다. Yarn 캐시와 PnP 로더 파일을 저장소에 추가함으로써, 브랜치를 변경할 때마다 yarn install을 실행할 필요 없이 의존성을 관리할 수 있습니다. 또한, CI에서 의존성 설치 시간을 크게 절약할 수 있습니다.