안녕하세요 SOPT 36기 웹 YB 김예지입니다.
오늘은 npm / Yarn / Yarn Berry / pnpm .. 등등 정말 많은 자바스크립트 패키지 매니저들을 비교해보는 시간을 가져보려합니다..
패키지 매니저란?
패키지 매니저는 프로그래밍에 필요한 라이브러리를 관리하는 역할을 합니다.
패키지 매니저는 구체적으로 아래와 같은 역할을 수행하는데요,,
- 의존성 관리 : 필요한 외부 라이브러리를 프로젝트에 설치
- 버전 관리 : 특정 버전의 라이브러리를 설치하거나 업데이트
- 쉬운 설치, 업데이트 : CLI 기반이기 때문에 명령어 하나로 여러 프로그램을 쉽게 설치하거나 업데이트
- 보안 관리 : 패키지가 신뢰할 수 있고, 손상되지 않음을 보장
- 일관성 유지 : 프로젝트에서 개발자 모두가 동일한 프로그램 버전과 설정 사용 가능
등등.. 프로그램 관리에 필요한 일들을 수행해주는 역할을 합니다. 땡큐 패키지 매니절.
패키지 매니저 소개
npm
npm은 Node.js와 함께 기본적으로 설치되는 패키지 매니저입니다.
가장 오래되었고, 현재도 가장 많은 사용자와 레거시 프로젝트에서 널리 사용되고 있습니다.
npm은 node_modules라는 디렉토리를 사용해 패키지를 실제 폴더 형태로 설치하며, 의존성 정보는 package.json과 package-lock.json에 저장됩니다.
설치된 패키지는 npm cache에 저장되어, 동일한 패키지를 다시 설치할 때 빠른 속도를 경험할 수 있다고 합니다.
[ 장점 ]
- Node.js 설치 시 자동으로 설치되며, 별도 설정 없이 바로 사용 가능
- 대부분의 자바스크립트 개발 툴, 프레임워크, 호스팅 플랫폼이 npm을 기본 지원
- v7부터 모노레포 지원
- npm audit 을 통한 보안 분석 기능 내장
[ 단점 ]
- node_modules의 중첩 구조로 인해 디렉토리가 깊고 복잡함
- 설치 속도가 느린 편임
명령어는
- 패키지 초기화 : npm init
- 패키지 설치 : npm install
- 패키지 추가 : npm install <패키지명>
- devDependencies 추가 : npm install <패키지명> --save-dev
- 패키지 제거 : npm uninstall <패키지명>
위의 명령어를 통해 사용할 수 있습니다 ㅎㅎ.
Yarn (v1)
Yarn은 Facebook에서 2016년, npm의 단점을 보완하기 위해 개발한 패키지 매니저입니다.
npm은 불안정한 설치와 느린 속도의 단점이 있었고, Yarn은 이를 병렬 설치, 의존성 캐싱 기능을 통해 개선했다고 합니다..
의존성은 node_modules/ 디렉토리에 폴더 형태로 설치되고, 의존성 정보는 package.json과 함께 yarn.lock 파일에 저장되어, 모든 개발자가 동일한 버전의 패키지를 설치할 수 있도록 도와줍니다.
설치된 패키지는 Yarn의 로컬 캐시에 저장되므로, 같은 패키지를 여러 번 받아도 설치 속도가 매우 빠르며 오프라인 설치도 가능합니다.
[ 장점 ]
- 빠른 설치 속도: 병렬적으로 설치되기 때문에 평균적으로 빠름
- 안정적인 의존성 : yarn.lock은 사람이 읽기 쉽고 일관성이 높아 충돌 적음
- 커맨드 구조: add, remove, upgrade 등 직관적인 명령어
- 오프라인 설치 가능: 한 번 설치된 패키지는 캐시에 저장되어 오프라인 설치 가능
[ 단점 ]
- 현재는 개발이 중단된 버전임. Yarn은 이후 Yarn 2 (Berry) 로 재설계되었고, Yarn v1은 유지보수만 이뤄지고 있음.
- 패키지 링크 문제나 일부 버그가 해결되지 않는 경우가 있음
명령어는
- 패키지 설치 : yarn install
- 패키지 추가 : yarn add <패키지명>
- devDependencies 추가 : yarn add <패키지명> --dev
- 패키지 제거 : yarn remove <패키지명>
등.. 직관적인 명령어를 사용할 수 있습니다!
Yarn Berry (v2)
Yarn Berry는 Yarn v1의 후속 버전으로, 2020년에 등장한 새로운 패키지 매니저입니다.
Yarn이라는 이름은 같지만, 내부 구조는 거의 완전히 다르게 작동한다고 합니다..
기존의 node_modules 방식을 버리고, 새로운 방식인 Plug’n’Play (PnP)으로 의존성을 연결합니다.
그렇기 때문에 Yarn Berry 부터는 복~잡한 node_modules 폴더 없이도 프로젝트를 실행할 수 있습니다.
의존성은 더 이상 node_modules에 설치되지 않으며, .pnp.cjs라는 가상 매핑 파일을 통해 경로를 추적해 모듈을 불러옵니다. 모든 설정은 .yarnrc.yml이라는 YAML 파일로 구성됩니다. 플러그인 시스템을 통해 기능을 원하는 대로 확장할 수 있고, zip 형식으로 패키지를 캐시해 디스크 사용량을 최소화합니다.
[ 장점 ]
- 빠른 설치 속도: 압축된 zip 캐시를 활용하여 설치 성능 높음
- Plug’n’Play : node_modules 없이 프로젝트 정상 작동
- zero-install : 캐시 파일을 통해 설치 없이 프로젝트 실행 가능
- 플러그인 확장 가능 : 필요한 기능만 설정하여 사용 가능
[ 단점 ]
- 기존 툴과 호환성 문제가 생길 수 있음
- PnP 환경에서 일부 라이브러리들이 작동하지 않을 수 있어서 추가적인 설정이 필요함
명령어는
- 패키지 초기화 : yarn init
- 패키지 설치 : yarn install
- 패키지 추가 : yarn add <패키지명>
- devDependencies 추가 : yarn add <패키지명> --dev
- 패키지 제거 : yarn remove <패키지명>
- 워크스페이스 지원 : yarn workspaces <명령>
pnpm
pnpm은 Performant npm의 줄임말로, npm의 느린 속도와 node_modules 구조 문제를 해결하기 위해 만들어진 고성능 패키지 매니저입니다.
요즘 인기를 얻고 있으며, Vite, Next.js, TurboRepo 등 최신 트렌드와 궁합도 아주 좋다고 합니다 ~.~ ..
일반적인 npm과 달리, pnpm은 패키지를 중복으로 저장하지 않고, 모든 의존성을 전역 캐시에 한 번만 저장하고, 각 프로젝트에서는 하드링크로 연결해 사용합니다. node_modules는 유지되지만, 내부 구조가 깔끔하고 정리되어 있어 디스크 공간을 많이 절약할 수 있습니다. 또한, lock 파일은 pnpm-lock.yaml을 사용합니다.
[ 장점 ]
- 빠른 설치 속도: 위의 패키지 매니저들 중에 가장 빠름
- 디스크 공간 절약 : 중복 패키지를 여러 번 설치하지 않고 전역 저장소에만 저장
- 워크스페이스 지원 : 대규모 모노레포 구조에서 빠르게 작동
- 기존 툴과 호환성 좋음
- 진입 장벽 낮음
[ 단점 ]
- node_modules 구조가 다르기 때문에 일부 패키지 경로를 하드코딩하면 문제가 발생할 수 있음
명령어는
- 초기화 : pnpm init
- 패키지 설치 : pnpm install
- 패키지 추가 : pnpm add <패키지명>
- devDependencies 추가 : pnpm add <패키지명> --dev
- 패키지 제거 : pnpm remove <패키지명>
- 전체 삭제 (캐시 정리) : pnpm store prune
- 마이그레이션 (npm/yarn -> pnpm) : pnpm import
비교 및 총 정리
이는 각 자바스크립트 패키지 매니저들 성능 비교 그래프인데요,
npm 은 패키지 처음 설치 속도에서 가장 오래걸리고,
pnpm은 전반적으로 빠르고 캐시 기반 재설치에 좋은 성능을 보여주고 있습니다.
yarn berry는 대부분에서 빠른 속도를 보여주고 있고,
yarn v1은 pnpm과 비슷하거나 쪼오금 느린 속도를 보여주고 있습니다..
| npm | Yarn (v1) | Yarn Berry (v2) | pnpm | |
| 설치 속도 | 보통 | 빠름 | 매우 빠름 | 최고 |
| 캐시 활용 | 보통 | 매우 좋음 | zip 캐시 | 하드링크 캐시 |
| node_modules 방식 | 직접 생성 | 직접 생성 | X | 하드링크 기반 |
| Zero-install | X | X | O | O |
| 모노레포 지원 | O | O | O | O |
| 플러그인 확장 | X | X | O | X |
| 안정성 | 높음 | 높음 | 호환성 이슈 | 안정적 |
| 설정 난이도 | 낮음 | 낮음 | 높음 | 낮음 |
| lockfile 보유 | O - package-lock.json | O - yarn.lock | O - yarn.lock | O - pnpm-lock.yaml |
참고 자료
https://devocean.sk.com/blog/techBoardDetail.do?ID=166592&boardType=techBlog
'3주차' 카테고리의 다른 글
| fetch와 useState로 직접 구현하는 Custom Query Hook (0) | 2025.05.02 |
|---|---|
| react의 props와 state (0) | 2025.05.02 |
| 🐛 왜 yarn 이어야 할까? (0) | 2025.05.02 |
| Tailwind CSS V4.1 알아보기 ~! (0) | 2025.05.02 |
| Prop Drilling? 해결 방법? (0) | 2025.05.02 |
