![width:244px height:232px bg right](https://media3.giphy.com/media/3spMIKLg2kDxIyItgd/giphy.webp?cid=d8f9e3b8kcks76tcrikbw2y33oan1ed6gel6jprz5qatwj77&ep=v1_stickers_search&rid=giphy.webp&ct=s) # Package Managers ## [소플 (이인제)](https://www.soaple.io/) --- # 목차 - [Package Manager란?](#package-manager란) - [npm](#npm) - [Yarn](#yarn) - [pnpm](#pnpm) --- ![width:244px height:232px bg right](https://media3.giphy.com/media/3spMIKLg2kDxIyItgd/giphy.webp?cid=d8f9e3b8kcks76tcrikbw2y33oan1ed6gel6jprz5qatwj77&ep=v1_stickers_search&rid=giphy.webp&ct=s) # Package Manager란? --- # Package Manager란? - 프로젝트에서 라이브러리, 프레임워크, 모듈 등의 패키지를 관리하는 도구 - 필요한 패키지들을 쉽게 설치, 업데이트, 삭제, 설정할 수 있음 - 프로젝트에 사용되는 패키지의 특정 버전을 지정하여 일관성을 유지할 수 있음 --- # Package Manager의 장점 - **효율성**: 수작업으로 패키지를 관리하는 것보다 빠르고 효율적 - **일관성**: 잠금 파일 등을 통해 모든 개발자가 동일한 환경을 유지할 수 있음 - **편리성**: 명령어 하나로 복잡한 의존성 트리를 쉽게 관리할 수 있음 - **안정성**: 패키지의 무결성을 검증하고, 신뢰할 수 있는 소스에서 패키지를 가져옴 --- ![bg right:50% width:70%](https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/540px-Npm-logo.svg.png) # npm --- # npm (Node Package Manager) - Node.js의 표준 패키지 관리자 - Node.js를 설치하면 npm도 함께 설치됨 - 2020년에 npm은 GitHub에 인수됨 - 수백만 개의 패키지가 npm 레지스트리에 등록되어 있음 --- ![bg](https://cdn.markslides.ai/users/1/images/I5joPMg3b1verOLTLcqXF) --- # 👍 npm의 장점 - **광범위한 사용**: Node.js와 함께 기본으로 제공되며, 가장 널리 사용되고 있음. - **대규모 생태계**: 가장 큰 패키지 레지스트리로, 다양한 패키지와 플러그인을 제공. - **간편한 설치 및 사용**: Node.js 설치 시 함께 설치되어 별도의 설치 과정이 필요 없음. - **자동 설치**: 패키지를 설치할 때 의존성도 자동으로 설치됨. - **스크립트 기능**: `package.json` 파일 내의 스크립트 섹션을 통해 자동화 작업이 가능. --- # 👎 npm의 단점 - **속도 문제** - 초기 버전에서는 속도가 느린 문제가 있었음. - 현재는 개선되었으나 여전히 일부 사용자들은 느리다고 느낄 수 있음. - **중복 설치 문제** - 이전 버전에서는 중복된 패키지 설치로 인해 디스크 공간 낭비가 발생할 수 있음. --- # npm 사용 방법 (1/2) #### 프로젝트 초기화 ```bash npm init -y ``` #### 패키지 설치 ```bash npm install express ``` --- # npm 사용 방법 (2/2) #### 스크립트 실행 (`package.json` 수정) ```json { "name": "my-app", "version": "1.0.0", "scripts": { "start": "node index.js" }, "dependencies": { "express": "^4.17.1" } } ``` ```bash npm run start ``` --- ![bg right:50% width:50%](https://seeklogo.com/images/Y/yarn-logo-F5E7A65FA2-seeklogo.com.png) # Yarn --- # Yarn - Meta(구 Facebook)에서 npm의 단점을 보완하기 위해 개발한 JavaScript 패키지 매니저 - **Yarn Berry** - Yarn의 최신 버전(2.x 이상)을 의미 - Yarn의 아키텍처를 완전히 새로 설계하여 더 많은 기능과 성능 향상을 제공 - "Plug'n'Play(PnP)" 시스템 - 대규모 프로젝트에서도 패키지 의존성을 더 효율적으로 관리할 수 있게 해줌 --- ![bg](https://cdn.markslides.ai/users/1/images/PjLqcpO3jHxY1T-zSa0Ya) --- # 👍 Yarn의 장점 - **빠른 속도**: 병렬 설치와 캐싱 덕분에 설치 속도가 빠름. - **결정적 설치**: `yarn.lock` 파일을 통해 모든 개발 환경에서 동일한 패키지 버전을 보장. - **워크스페이스 지원**: 단일 레포지토리 내에서 여러 패키지를 관리할 수 있어 모노레포에서 유용. - **신뢰성**: `checksum`을 통해 패키지의 무결성을 확인하여 설치 과정의 신뢰성을 높임. - **플러그인 시스템**: 다양한 기능을 플러그인 형태로 확장 가능. --- # 👎 Yarn의 단점 - **복잡성**: npm보다 약간 복잡할 수 있음. - **호환성 문제**: 일부 패키지나 툴링에서 호환성 문제가 발생할 수 있음. --- # Yarn 사용 방법 (1/2) #### Yarn Berry 설치 및 초기화 ```bash npm install -g yarn yarn set version berry ``` #### 프로젝트 초기화 ```bash yarn init -y ``` #### 패키지 설치 ```bash yarn add express ``` --- # Yarn 사용 방법 (2/2) #### 스크립트 실행 (`package.json` 수정) ```json { "name": "my-app", "version": "1.0.0", "scripts": { "start": "node index.js" }, "dependencies": { "express": "^4.17.1" } } ``` ```bash yarn start ``` --- ![bg right:50% width:70%](https://cdn.markslides.ai/users/1/images/vP7b5fB-PoSlCiYw6HjDK) # pnpm --- # pnpm - **성능 향상**에 초점을 맞춰 개발된 패키지 매니저 - 패키지를 중복 설치하지 않고, **하드 링크**를 사용하여 디스크 공간을 절약하고 설치 속도를 높여줌 - 대규모 프로젝트에서의 성능 향상과 더불어 디스크 공간도 효율적으로 사용할 수 있음 --- ![bg](https://cdn.markslides.ai/users/1/images/HSoO14PFf8020MUoo2B0B) --- # 👍 pnpm의 장점 - **성능**: 패키지를 중복 설치하지 않고, 하드 링크를 사용하여 빠르고 효율적으로 패키지를 관리. - **디스크 공간 절약**: 중복된 패키지를 제거하여 디스크 공간 절약. - **결정적 설치**: `pnpm-lock.yaml` 파일을 통해 모든 개발 환경에서 동일한 패키지 버전을 보장. - **모노레포 지원**: 여러 프로젝트를 단일 레포지토리에서 관리할 때 효율적. - **의존성 격리**: 프로젝트별로 의존성을 격리하여 서로 영향을 주지 않도록 함. --- # 👎 pnpm의 단점 - **적은 사용자 기반**: npm이나 Yarn에 비해 상대적으로 사용자 기반이 적음. - **호환성 문제**: 일부 오래된 패키지나 툴과의 호환성 문제가 있을 수 있음. --- # pnpm 사용 방법 (1/2) #### pnpm 설치 (글로벌) ```bash npm install -g pnpm ``` #### 프로젝트 초기화 ```bash pnpm init -y ``` #### 패키지 설치 ```bash pnpm add express ``` --- # pnpm 사용 방법 (2/2) #### 스크립트 실행 (`package.json` 수정) ```json { "name": "my-app", "version": "1.0.0", "scripts": { "start": "node index.js" }, "dependencies": { "express": "^4.17.1" } } ``` ```bash pnpm start ``` --- # 정리 - **npm** - 가장 널리 사용되며, 기본적인 기능에 충실함. - 속도나 효율성에 크게 민감하지 않을 경우 사용하기 좋음. - **Yarn** - 빠른 속도와 안정성을 원하는 사용자에게 적합. - 특히 대규모 프로젝트나 모노레포에서 유용. - **pnpm** - 성능과 디스크 공간 효율성을 중시하는 사용자에게 적합. - 모노레포와 의존성 관리가 중요한 프로젝트에 유용. --- # References - https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager - https://npmjs.com/ - https://yarnpkg.com/ - https://pnpm.io/ --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)