Javascript 패키지 매니저에 대한 분석

세니·2025년 1월 9일

패키지 매니저의 정의?

package.json에서 명시된 의존성들을 가져와서 사용할 수 있도록 도와주는 것

NPM

일반적으로 흔히 사용하는 패키지 매니저이다. (Node.js 설치하면 자동으로 설치된다.)

한 프로젝트에 종속된 패키지를 지정하려면 package.json에서 dependencies에 나열하며, 이러한 종속성의 정확한 버전 또는 의존성 트리는 package-lock.json에서 관리된다.

package의 모듈은 require() 혹은 import로 로드할 수 있는 node_modules 디렉터리의 파일 또는 디렉터리를 말한다. 이를 로드하려면 모듈은 “main” 필드가 포함된 package.json 폴더와 JS 파일이 있어야한다.

npm Docs에 따르면 아래와 같은 주의할 사항? 이 있다.

모듈에 package.json 파일이 반드시 있어야 하는 것은 아니고 모든 모듈이 패키지 인것도 아니다. package.json 파일이 있는 모듈만 패키지이다.

그렇다면 npm은 package.json에 명시된 의존성들을 설치하고 설치된 버전들을 package-lock.json에서 관리하며 이를 사용하려면 node_modules에서 불러오는것으로 이해가 된다.

하지만 실제 프로젝트에서는 간단한 의존성만 사용하는 것이 아니라 상당히 많은 수의 의존성들이 설치되는 경우가 많다.

항상 프로젝트 변경사항이 있거나 Git 기준 브랜치 변경하거나 하면 npm install 과정이 필수적이고 이로인해 시간이 오래 걸리고 의존성이 맞지 않거나 하면 node_modules를 삭제하고 재설치하는 번거로운 과정이 존재했다.

또한 패키지의 의존성의 패키지의 의존성과 같이 중복되는 의존성도 존재하고 패키지를 찾으려고 하면 node_modules를 찾으면서 파일을 여러번 읽게 되어 속도도 느려지고 프로젝트 크기도 너무 커지는 문제가 있다.

npm install과 같이 편리한 반면에 단점이 있어 이를 해결하기 위해 pnpm이 등장하게 되었다.

PNPM

pnpm 공식 사이트에 가보면 Fast, disk space efficient package manager 문구가 있다. 그리고 공식 문서에 가면 3가지의 Motivation이 있다. 이를 읽어보면 npm과의 뚜렷한 차이가 보여 왜 pnpm을 사용하는지 알 수 있게 된다. (npm이 나쁘다는건 아님)

Saving disk space

npm을 사용할 떄 종속성을 사용하는 프로젝트가 100개라면 해당 종속성의 복사본 100개가 저장된다.

pnpm은 종송성의 다른 버전에 의존하는 경우 다른 파일만 저장소에 추가된다.

만일 100개의 파일이 있고 새 버전에서 그 중 하나의 파일만 변경된 경우 pnpm 업데이트는 단일 변경 사항에 대해 전체 종속성을 복제하는 대신 새 파일 1개만 추가해 추가 디스크 공간을 차지하지 않는다.

결과적으로 프로젝트와 종속 요소의 수에 비례하여 공간 절약이 가능하며 설치 속도가 빨라진다.

Boosting installation speed

pnpm은 세가지 단계로 설치를 진행한다.

Resolving : 필요한 모든 종속성을 식별하여 스토어로 fetch한다.
Fetching : node_modules 구조는 종속성 기반으로 계산된다.
Linking : 나머지 모든 종속성을 가져와서 스토어에서 node_modules로 하드 링크한다.

이 접근 방식은 기존 3단계 설치 방식보다 빠르다. (기존 설치 방식은 모든 종속성을 확인하고 가져옴)

Creating a non-flat node_modules directory

npm 또는 yarn classic으로 종속성을 설치할 때, 모든 패키지가 모듈 디렉터리의 루트에 hoist된다. 따라서 소스 코드는 프로젝트에 종속성으로 추가되지 않은 종속성에도 액세스가 가능하다.

기본적으로 pnpm은 symlink를 사용하여 프로젝트의 직접 종속성만 모듈 디렉터리의 루트에 추가한다.

그러면 pnpm도 충분히 괜찮은 패키지 매니저인데 Yarn 은 요즘 왜 많이 사용할까?

Yarn

마찬가지로 yarn 공식 홈페이지에 따르면

자바스크립트 프로젝트에서 종속성을 관리하는 데 사용되는 오픈소스 패키지 매니저이다. 패키지 종속성을 설치, 업데이트, 구성 및 제거하는 프로세스를 지원해 방해 요소를 줄이고 더 빨리 목적을 달성할 수 있도록 도와줍니다.

속도, 정확성, 보안, 개발자 경험에 중점을 두고 작업 공간, 오프라인 캐싱, 병렬 설치, 강화 모드, 대화형 명령 등 혁신적인 기능을 활용해 모든 축을 개선한다.

그렇다면 어떻게 개선할 수 있었을까? 여러 특징들이 있지만 몇 가지만 적어보겠다.

Cache strategies

Yarn은 다양한 캐시 설정을 지원하므로 선호하는 플랫폼에 따라 조정이 가능하다.

처음 패키지를 설치할때 npm 레지스트리에서 패키지가 가져온다. 일반적으로 잘 작동하지만 가끔 실패하는 경우가 있다.

Yarn은 enableGlobalCache 를 false 로 설정하면 패키지 캐시가 프로젝트에 로컬로 저장되는 폴더 (.yarn/cache) 에 저장되고 이 캐시를 Git에 추가할 수 있어 npm 레지스트리가 다운되더라도 특정 커밋은 항상 설치 가능하게 보장된다.

Zero-install

패키지 관리와 패치된 결과물 (node-modules)까지 버전 관리 시스템 (Git)에서 관리하는 방식

설치 과정 없이 바로 사용이 가능하지만 의존성 업데이트 시 관리가 필요하고 저장소 용량이 커지고 시간도 오래걸리는 단점이 있다.

Zero-install은 브랜치 전환 시 yarn install를 실행해야 하는 번거로움을 없앨 수 있다. yarn 캐시를 저장소에 유지함으로써 npm 레지스트리에 대한 의존성을 제거한다. yarn은 이 캐시도 직접 사용이 가능하다. 로더 파일을 Git에 추가하기만 하면 yarn install은 안해도 된다.

Constraints

패키지 간의 동일한 버전의 종속성 보장
패키지에서 특정 종속성 사용 금지

위 두가지 규칙을 제약 조건을 사용해서 패키지 전체에 적용할 수 있다.

제약 조건은 프로젝트 루트의 yarn.config.js 파일을 추가하여 만든다. 이 파일은 제약 조건 메서드가 있는 객체를 export 해야한다.

예시를 들자면, 모든 리액트 종속성이 18.0.0으로 설정되도록 할 수 있다.

module.exports = {
  async constraints({Yarn}) {
    for (const dep of Yarn.dependencies({ ident: 'react' })) {
      dep.update(`18.0.0`);
    }
  },
};

Extensibility

Yarn은 기본적으로 지원하지 않는 상황에 직면했을때 이를 차단되지 않도록 사용자 지정 플러그인을 제공할 수 있습니다.

플러그인을 통해서 할 수 있는 일은 몇가지가 있습니다.

새로운 resolvers 추가 : 의존성 범위를 완전한 패키지로 변환하는 역할
새로운 Fetchers 추가 : 완전한 패키지 참조를 가져와 해당 패키지 데이터를 실제로 얻는 방법을 알 수 있는 요소
새로운 Linkers 추가 : 모든 패키지가 설치 준비를 마치면, Yarn은 링커를 호출하여 설치 대상이 올바르게 작동하는데 필요한 파일을 생성한다.
새로운 commands 추가 : 플러그인은 필요에 따라 원하는 만큼의 명령을 제공할 수 있으며, CLI에 주입된다.
이벤트 등록

Yarn 플러그인은 실행 중인 Yarn 프로세스와 동적으로 연결되므로 전체 Yarn api에 접근이 가능해 Yarn에서 제공하지 않는 특정 기능을 직접 구현할 수 있다. 또한, hooks라는 개념을 가지고 있어 패키지 관리자의 라이프사이클 동안 주기적으로 이벤트를 트리거한다.

위와 같은 특징을 통해서 yarn은 확장하기가 쉽고 여러 맞춤 커스텀, 메모리 및 시간 절약이 가능해 요즘 많이 사용하는 것 같다.

패키지 매니저를 선택하는 관점은 다들 다르겠지만 프로젝트의 목적성과 시간 여유등과 같은 여러 요소를 고려하고 선택해야 할 것 같다. 작성한 글에 따르면 Yarn이 엄청 좋아보이지만 그 만큼의 셋팅이 요구되고 npm이 엄청 안좋아보이지만 빠르게 개발을 할 수 있다는 점이 있다.