안녕하세요, 소플입니다.

프론트엔드 개발을 하다보면 다양한 패키지 매니저들을 접하게 됩니다.

이번 매거진에서는 패키지 매니저의 개념과 프론트엔드 개발에서 사용되는 다양한 패키지 매니저들에 대해서 살펴보도록 하겠습니다.

패키지 매니저란?

패키지 매니저는 프로젝트에서 라이브러리, 프레임워크, 모듈 등의 패키지를 관리하는 도구입니다.

패키지 매니저를 사용하면 필요한 패키지들을 쉽게 설치, 업데이트, 삭제, 설정할 수 있습니다.

아래는 패키지 매니저의 장점을 정리한 것입니다.

• 효율성: 수작업으로 패키지를 관리하는 것보다 빠르고 효율적
• 일관성: 잠금 파일 등을 통해 모든 개발자가 동일한 환경을 유지할 수 있음
• 편리성: 명령어 하나로 복잡한 의존성 트리를 쉽게 관리할 수 있음
• 안정성: 패키지의 무결성을 검증하고, 신뢰할 수 있는 소스에서 패키지를 가져옴

프론트엔드 개발에서 사용되는 패키지 매니저들은 종류가 다양합니다.

그럼 지금부터 각 패키지 매니저에 대해서 하나씩 살펴보도록 하겠습니다.

npm (Node Package Manager)

먼저 가장 대표적인 패키지 매니저인 npm이 있습니다.

npm은 Node Package Manager의 약자로 Node.js의 표준 패키지 관리자입니다.

그래서 Node.js를 설치하면 npm도 함께 설치됩니다.

npm은 처음에 Node.js 패키지의 의존성을 다운로드하고 관리하기 위해 탄생했지만,

지금은 프론트엔드 개발에서도 거의 필수적으로 사용하는 도구가 되었습니다.

아래 화면은 npm 공식 웹사이트입니다.

우리가 개발할 때 npm install이라는 명령어를 사용해서 패키지들을 설치하게 되는데,

이 명령어가 하는 역할은 npm 레지스트리에서 패키지들을 다운로드 받아오는 것이라고 보면 됩니다.

2020년에 npm은 GitHub에 인수되었으며,

현재 수백만 개의 패키지가 npm 레지스트리에 등록되어 있습니다.

npm의 장점과 단점

장점

• 광범위한 사용: Node.js와 함께 기본으로 제공되며, 가장 널리 사용되고 있음.
• 대규모 생태계: 가장 큰 패키지 레지스트리로, 다양한 패키지와 플러그인을 제공.
• 간편한 설치 및 사용: Node.js 설치 시 함께 설치되어 별도의 설치 과정이 필요 없음.
• 자동 설치: 패키지를 설치할 때 의존성도 자동으로 설치됨.
• 스크립트 기능: package.json 파일 내의 스크립트 섹션을 통해 자동화 작업이 가능.

단점

• 속도 문제: 초기 버전에서는 속도가 느린 문제가 있었음. 현재는 개선되었으나 여전히 일부 사용자들은 느리다고 느낄 수 있음.
• 중복 설치 문제: 이전 버전에서는 중복된 패키지 설치로 인해 디스크 공간 낭비가 발생할 수 있음.

npm 사용 방법

프로젝트 초기화

npm init -y

패키지 설치

npm install express

스크립트 실행 (package.json 수정)

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

npm run start

Yarn

Yarn은 Meta(구 Facebook)에서 npm의 단점을 보완하기 위해 개발한 JavaScript 패키지 매니저입니다.

빅테크 기업답게 npm을 사용하다가 불편한 점들이 많아서 직접 개발해버린 것이죠ㅎㅎ

아래 화면은 Yarn 공식 웹사이트입니다.

Yarn에 대해서 들어본 분들은 아마 Yarn Berry에 대해서도 들어보셨을 겁니다.

Yarn Berry는 Yarn의 최신 버전(2.x 이상)을 의미하며,

Yarn의 아키텍처를 완전히 새로 설계하여 더 많은 기능과 성능 향상을 제공합니다.

그리고 Yarn Berry에서는 "Plug'n'Play(PnP)" 시스템을 도입하여,

대규모 프로젝트에서도 패키지 의존성을 더 효율적으로 관리할 수 있게 해줍니다.

그래서 이왕 Yarn을 사용할거면 Yarn Berry를 사용하는 것이 좋습니다.

Yarn의 장점과 단점

장점

• 빠른 속도: 병렬 설치와 캐싱 덕분에 설치 속도가 빠름.
• 결정적 설치: yarn.lock 파일을 통해 모든 개발 환경에서 동일한 패키지 버전을 보장.
• 워크스페이스 지원: 단일 레포지토리 내에서 여러 패키지를 관리할 수 있어 모노레포에서 유용.
• 신뢰성: checksum을 통해 패키지의 무결성을 확인하여 설치 과정의 신뢰성을 높임.
• 플러그인 시스템: 다양한 기능을 플러그인 형태로 확장 가능.

단점

• 복잡성: npm보다 약간 복잡할 수 있음.
• 호환성 문제: 일부 패키지나 툴링에서 호환성 문제가 발생할 수 있음.

Yarn 사용 방법

Yarn Berry 설치 및 초기화

npm install -g yarn
yarn set version berry

프로젝트 초기화

yarn init -y

패키지 설치

yarn add express

스크립트 실행 (package.json 수정)

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

yarn start

pnpm (Performant npm)

마지막으로 나오는 패키지 매니저는 pnpm입니다.

pnpm은 이름에서 알 수 있듯이 주로 성능 향상에 초점을 맞춰 개발된 패키지 매니저입니다.

아래 화면은 pnpm 공식 웹사이트입니다.

아마 npm을 오래 사용하신 분들은 동일한 패키지들이 각 프로젝트의 node_modules 폴더에 중복으로 존재하는 것을 많이 보셨을 겁니다.

이것은 결국 불필요하게 디스크 용량을 많이 차지하는 결과를 초래하게 됩니다.

하지만 pnpm은 패키지를 중복 설치하지 않고, 하드 링크를 사용하여 디스크 공간을 절약하고 설치 속도를 높여줍니다.

그래서 pnpm을 사용하면 대규모 프로젝트에서의 성능 향상과 더불어 디스크 공간도 효율적으로 사용할 수 있습니다.

pnpm의 장점과 단점

장점

• 성능: 패키지를 중복 설치하지 않고, 하드 링크를 사용하여 빠르고 효율적으로 패키지를 관리.
• 디스크 공간 절약: 중복된 패키지를 제거하여 디스크 공간 절약.
• 결정적 설치: pnpm-lock.yaml 파일을 통해 모든 개발 환경에서 동일한 패키지 버전을 보장.
• 모노레포 지원: 여러 프로젝트를 단일 레포지토리에서 관리할 때 효율적.
• 의존성 격리: 프로젝트별로 의존성을 격리하여 서로 영향을 주지 않도록 함.

단점

• 적은 사용자 기반: npm이나 Yarn에 비해 상대적으로 사용자 기반이 적음.
• 호환성 문제: 일부 오래된 패키지나 툴과의 호환성 문제가 있을 수 있음.

pnpm 사용 방법

pnpm 설치 (글로벌)

npm install -g pnpm

프로젝트 초기화

pnpm init -y

패키지 설치

pnpm add express

스크립트 실행 (package.json 수정)

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

pnpm start

정리

지금까지 프론트엔드 개발에서 사용되는 다양한 패키지 매니저에 대해서 살펴보았습니다.

아래는 각 패키지 매니저에 대해서 요약 정리한 것입니다.

• npm
  • 가장 널리 사용되며, 기본적인 기능에 충실함.
  • 속도나 효율성에 크게 민감하지 않을 경우 사용하기 좋음.
• Yarn
  • 빠른 속도와 안정성을 원하는 사용자에게 적합.
  • 특히 대규모 프로젝트나 모노레포에서 유용.
• pnpm
  • 성능과 디스크 공간 효율성을 중시하는 사용자에게 적합.
  • 모노레포와 의존성 관리가 중요한 프로젝트에 유용.

그럼 결론적으로 어떤 패키지 매니저를 사용해야 할까요?

사실 모든 개발에 정답이 없는 것처럼, 패키지 매니저를 선택하는 것 또한 정답은 없습니다.

그래서 각각의 장단점을 잘 따져보고, 프로젝트의 규모나 형태에 따라서 가장 적합한 것을 선택하면 됩니다.

🔗 참고 링크

• https://www.markslides.ai/publications/Package-Managers-11MIq9fSl44wN0SknrzMJ
• https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager
• https://npmjs.com/
• https://yarnpkg.com/
• https://pnpm.io/

---

이번 매거진에서는 프론트엔드 개발에서 사용되는 다양한 패키지 매니저에 대해서 살펴보았습니다.

그럼 저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀