npm vs. pnpm : 패키지 매니저 비교

2024. 11. 19. 22:44·개발/FE

최근 커뮤니티에서 주로 사용하는 패키지 매니저에 대한 투표를 본 적이 있습니다. 그중 대부분은 Yarn과 npm을 선택하였지만 항목 외에 댓글에서 자주 등장하는 pnpm에 대한 궁금증이 생겨, npm과 비교해 보았습니다.

 


 

◆ npm (Node Package Manager) 이란?

: Node.js의 기본 패키지 매니저. JavaScript 런타임 환경인 Node.js와 함께 제공된다.

특징

  • 광범위한 패키지 생태계 : 세계 최대의 소프트웨어 레지스트리를 보유하고 있다.
  • 의존성 관리 : package.json 파일을 통해 프로젝트 의존성을 관리한다.
  • 스크립트 실행 : npm run 명령어를 통해 사용자 정의 스크립트를 실행한다.

 

장점

  1. 사용 용이성 : Node.js와 함께 제공되어 추가 설치가 필요 없다.
  2. 풍부한 생태계 : 다양한 모듈과 패키지를 쉽게 사용할 수 있다.

 

단점

  1. 성능 이슈 : 대규모 프로젝트에서 설치 속도가 느릴 수 있다.
  2. 디스크 공간 사용 : 각 프로젝트마다 중복된 패키지를 설치해 디스크 공간을 많이 차지한다.

 

◆ pnpm (Performant npm) 이란?

: 성능 최적화와 디스크 공간 절약을 목표로 개발된 패키지 매니저

특징

  • 공유 저장소 : 모든 프로젝트에서 패키지를 공유해 디스크 공간을 절약할 수 있다.
  • 심볼릭 링크 사용 : 패키지를 실제로 복사하지 않고 링크를 생성해 효율적으로 관리한다.
  • 병렬 설치 : 의존성을 병렬로 설치해 속도를 향상 시킨다.

 

장점

  1. 빠른 설치 속도 : npm보다 최대 2배 이상 빠른 속도를 제공한다.
  2. 디스크 공간 절약 : 중복 패키지를 공유해 효율적으로 디스크 공간을 관리할 수 있다.
  3. 모노레포 지원 : 여러 프로젝트를 효율적으로 관리할 수 있다.

 

단점

  1. 호환성 문제 : 일부 패키지나 도구와 호환성 문제가 발생할 수 있다.
  2. 학습 곡선 : 다른 패키지 매니저에 익숙한 개발자들이 새로운 개념을 학습해야 한다.

◆ npm vs. pnpm 주요 차이점

1. 패키지 저장 방식

- npm : 각 프로젝트마다 독립적으로 패키지 설치

- pnpm : 전역 저장소에 패키지를 한 번만 저장하고, 프로젝트에서는 링크를 사용

 

2. 의존성 구조

- npm : 평탄화된 의존성 구조 사용

- pnpm : 중첩된 의존성 구조를 사용해 더 정확한 의존성 관리를 제공

 

3. 설치 속도

- npm : 대규모 프로젝트에서 상대적으로 느린 설치 속도를 보인다.

- pnpm : 병렬 설치와 효율적인 캐싱으로 빠른 설치 속도를 제공

 

4. 디스크 공간 사용

- npm : 각 프로젝트마다 패키지를 중복으로 설치해 많은 디스크 공간 사용

- pnpm : 패키지를 공유하여 디스크 공간을 크게 절약

 

5. 보안

- npm : 평탄화된 구조로 인해 의도하지 않은 패키지 접근이 가능할 수 있다.

- pnpm : 엄격한 의존성 구조로 보안성이 더 높다.

 

npm은 널리 사용되고 있으며 풍부한 생태계를 가지고 있지만, pnpm은 성능과 디스크 공간 관리 측면에서 더욱 효율적이다.


◆ pnpm 사용 시 주의할 사항

1. 호환성 문제

- 일부 패키지나 도구가 pnpm의 node_modules 구조와 호환되지 않을 수 있다. 특히 평탄화된 node_modules 구조에 의존하는 오래된 패키지들과 문제가 발생할 수 있다.

 

2. 유령 의존성 (Ghost Dependencies) 주의

- pnpm은 유령 의존성 문제를 해결하지만, 이로 인해 기존 프로젝트를 마이그레이션 할 때 문제가 발생할 수 있다.

유령 의존성이란?
: package.json에 명시하지 않은 라이브러리를 조용히 사용할 수 있게 되는 현상
- npm과 yarn에서 중복 설치를 줄이기 위해 사용하는 Hoisting 기법으로 인해 발생한다.
- 다른 의존성을 package.json에서 제거했을 때 소리 없이 같이 사라질 수 있다.

→ 의존성 관리를 어렵게 만들고, 예기치 못한 버그를 일으킬 수 있다.

 

3. 전역 스토어 관리

- pnpm은 전역 스토어를 사용하므로, 디스크 공간 관리에 주의해야 한다.

불필요한 패키지가 전역 스토어에 쌓이지 않도록 주기적으로 정리가 필요할 수 있다.

 

4. CI/CD 환경 설정

- CI/CD 파이프라인에서 pnpm을 사용할 때는 적절한 캐싱 전략을 설정해야 한다.

 

5. 모노레포 (Monorepo) 관리

- 모노레포 환경에서 pnpm을 사용할 경우 워크스페이스 설정에 주의해야 한다.

모노레포란?
: 두 개 이상의 프로젝트 코드를 하나의 버전 관리 저장소에서 관리하는 방법

 

6. 마이그레이션 과정

- npm이나 yarn에서 pnpm으로 전환할 때, lock 파일 변환 등 마이그레이션 과정에 주의해야 한다.

 

 

 

 

 

 

 

 

 

 

'개발 > FE' 카테고리의 다른 글

Vite vs. Webpack : 모듈 번들러의 이해와 비교  (0) 2024.11.21
Monorepo vs. Multirepo: 코드 관리 방식 비교  (0) 2024.11.19
프론트엔드 아키텍처, 방법론, 디자인 패턴  (0) 2024.11.02
styled-component의 ThemeProvider  (0) 2024.10.28
코딩앙마 React JS 복습  (1) 2024.10.08
'개발/FE' 카테고리의 다른 글
  • Vite vs. Webpack : 모듈 번들러의 이해와 비교
  • Monorepo vs. Multirepo: 코드 관리 방식 비교
  • 프론트엔드 아키텍처, 방법론, 디자인 패턴
  • styled-component의 ThemeProvider
개발자 화진
개발자 화진
https://github.com/HwajinLee3114
  • 개발자 화진
    lhjin.log
    개발자 화진
  • 전체
    오늘
    어제
    • 분류 전체보기 (31)
      • 개발 (10)
        • FE (9)
        • BE (0)
      • Algorithm (0)
      • 기술면접 (4)
      • 스터디 (14)
        • 사이드 프로젝트 (7)
        • Udemy) NextJS 15 & React (3)
        • Udemy) TypeScript with Reac.. (1)
      • ETC (2)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 인기 글

  • 태그

    프론트엔드 아키텍처
    프론트엔드
    유데미 스터디
    사이드프로젝트
    Typescript
    코딩앙마
    ThemeProvider
    멀티레포
    React
    pnpm
    NextJS
    Next.js
    udemy
    javascript
    Frontend
    fe
    유데미
    유데미 코리아
    인프런
    lazy loading
    Zustand
    supabase
    자바스크립트
    오블완
    티스토리챌린지
    모노레포
    유데미 러닝크루
    vercel
    multirepo
    아키텍처
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
개발자 화진
npm vs. pnpm : 패키지 매니저 비교
상단으로

티스토리툴바