본문 바로가기
프론트엔드/HTML & CSS & Javascript

자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager)

by YUNI Heo 2024. 5. 14.
반응형

 

⭕ 자바스크립트 JavaScript | JavaScript 패키지 매니저(package manager)

  • 패키지 매니저(package manager)프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다.
  • 특히 자바스크립트는 풍부한 오픈 소스 생태계를 자랑하기 때문에, 패키지 매니저는 필수적인 역할을 합니다.
  • 자바스크립트 프로젝트는 적게는 수십 개, 많게는 수백 개의 다른 패키지에 의존할 수 있습니다.

 

➡️ NPM (Node Package Manager)

  • Node.js 환경에서 JavaScript 패키지를 관리하기 위한 패키지 관리자입니다.
  • Node.js 프로젝트에서는 추가적인 설치 없이 기본적으로 npm을 사용할 수 있습니다.
  • 파일 구성: package.json, package-lock.json
  • 적합한 프로젝트
    • 작은 규모의 프로젝트나 개인 프로젝트에 적합합니다.
    • npm 생태계에 익숙하거나 특정 패키지를 찾을 때 유용합니다.

 

➡️ NPM 사용하기

프로젝트 초기화

  • 프로젝트를 시작할 때 package.json 파일을 생성하는 명령어입니다.
  • 문답식으로 입력된 내용이 package.json 파일에 기록됩니다.
    • $ npm init
  • 기본값으로 자동 생성하려면 다음 명령어를 사용합니다
    • $ npm init --yes

 


패키지 설치

  1. 일반 패키지 설치
    • 프로젝트에서 사용할 패키지를 설치합니다.
    • 설치된 패키지의 이름과 정보가 package.json의 dependencies에 기록됩니다.
      • $ npm install [패키지 이름]
  2. 개발용 의존성 설치
    • 개발 단계에서만 필요한 패키지를 설치합니다.
    • 개발용 의존성의 이름과 정보는 package.json의 devDependencies에 기록됩니다.
      • $ npm install [패키지 이름] --save-dev

 


프로젝트에 의존성 내려받기

  1. 의존성 내려받기
    • package.json에 정의된 모든 의존성을 node_modules 디렉터리에 설치합니다.
    • node_modules 디렉터리는 코드 관리나 배포 시 업로드하지 않으며, 삭제 후 npm install 명령어를 사용하면 다시 설치됩니다.
      • $ npm install
  2. 개발용 의존성을 제외하고 내려받기
    • 프로젝트 배포 시 개발용 의존성을 제외하고 설치합니다.
    • package.json의 dependencies만 node_modules에 내려받습니다.
      • $ npm install --production

 

➡️pacakage.json

  • 프로젝트 정보와 의존성(dependencies)을 관리하는 문서입니다.
  • JSON 파일로, 속성-값의 쌍으로 이루어져 있습니다.
  • 주요 기능
    • 프로젝트에서 사용하는 패키지(오픈 소스)와 해당 패키지의 버전을 기록합니다.
    • 어느 환경에서도 동일한 개발 환경을 구축할 수 있게 합니다.

 


package-lock.json

  • package.json을 이용해 npm install을 진행할 때 버전 차이를 방지하는 파일입니다.
  • npm을 사용해 package.json 파일 또는 node_modules 트리를 수정할 때 자동으로 생성됩니다.
  • 주요 기능
    • npm의 버전이 다르거나, version range에 명확히 명시되지 않은 경우, 새로운 패키지 버전이 배포된 경우 발생할 수 있는 버전 차이를 해결합니다.
    • 협업 시 동일한 환경을 보장하기 위해 소스 저장소에 반드시 commit 해야 합니다.

 

➡️ npm의 문제점

보안 문제

  1. 자동 의존성 처리
    • npm은 패키지 설치 시 의존성을 자동으로 처리합니다.
    • 신뢰성이 검증되지 않은 패키지가 설치될 위험이 있습니다.
    • 악성 코드가 포함된 패키지가 의도치 않게 설치될 가능성을 높입니다.
  2. 오타 및 악성 코드
    • 패키지 이름의 오타로 인해 잘못된 라이브러리가 설치될 수 있습니다.
    • 악의적으로 악성 코드를 포함한 패키지가 배포될 가능성이 존재합니다.
    • 이러한 문제는 시스템 보안에 심각한 위협을 가할 수 있습니다.

 


성능 문제

  1. 순차적 설치
    • npm은 패키지 설치를 순차적으로 처리합니다.
    • 설치 속도가 느려질 수 있습니다.
    • 많은 수의 패키지를 설치할 때나 대용량 패키지를 설치할 때 이 문제가 두드러집니다.
  2. 네트워크 속도
    • 네트워크 속도에 따라 설치 속도가 크게 영향을 받을 수 있습니다.
    • 대규모 프로젝트의 경우 설치 시간이 상당히 오래 걸릴 수 있습니다.

 


디스크 용량 문제

  1. 중복 설치
    • npm은 각 프로젝트마다 node_modules 디렉터리에 필요한 모든 패키지를 설치합니다.
    • 동일한 패키지가 여러 버전으로 중복 설치될 수 있습니다.
    • 이는 디스크 용량을 불필요하게 많이 차지하게 만듭니다.
  2. 의존성 트리
    • 많은 의존성을 가진 프로젝트는 깊고 복잡한 의존성 트리를 가지게 됩니다.
    • node_modules 디렉터리의 크기가 매우 커질 수 있습니다.
    • 이는 디스크 공간 부족 문제를 야기할 수 있습니다.

 

➡️ npm 대안

Yarn

  • 2016년 Facebook에서 개발한 패키지 매니저로, npm의 대안으로 발표되었습니다.
  • 파일 구성: package.json, yarn.lock
  • 특징
    • 패키지를 병렬로 다운로드하여 설치 속도를 개선합니다.
    • 패키지의 의존성을 자동으로 해결합니다.
    • 설치된 패키지를 캐싱하여 재사용할 수 있습니다.
  • 적합한 프로젝트
    • 큰 규모의 프로젝트나 복잡한 의존성을 가진 프로젝트에 유용합니다.
    • 성능과 속도, 일관성, 신뢰성 측면에서 더 나은 선택입니다.
  • 참고 링크: Yarn 공식 사이트
 

Home page | Yarn

Yarn, the modern JavaScript package manager

yarnpkg.com

 


Pnpm

  • 디스크 공간을 절약하고 설치 시간을 단축하는 패키지 매니저입니다.
  • 파일 구성: package.json, pnpm-lock.yaml
  • 특징
    • 심볼릭 링크를 통해 패키지를 공유하여 중복 다운로드를 방지합니다.
    • 각 프로젝트에서 필요한 패키지 버전을 선택적으로 설치할 수 있습니다.
  • 적합한 프로젝트
    • 여러 프로젝트에서 같은 패키지를 사용하는 경우 디스크 공간을 절약할 수 있습니다.
    • 의존성 트리가 복잡한 프로젝트에서 설치 시간을 단축할 수 있습니다.
  • 참고 링크: Pnpm 공식 사이트
 

Fast, disk space efficient package manager | pnpm

Fast, disk space efficient package manager

pnpm.io

 

➡️ npm와 yarn 혼용

충돌 문제

  • 각 lock 파일이 패키지 매니저마다 의존성을 다르게 관리합니다.
  • 서로 다른 패키지 매니저를 사용할 경우 의존성 충돌이 발생할 수 있습니다.
  • 프로젝트의 특성에 맞는 패키지 매니저를 하나 선택하여 사용해야 합니다.

 


npm과 Yarn의 패키지 관리 방식

  • npm
    • 관리 방식: 각 설치된 패키지별로 서브패키지를 구성합니다.
    • 특징: 각 패키지의 독립성이 보장되지만, 패키지 중복으로 인해 디스크 용량이 커집니다.
  • Yarn
    • 관리 방식: 설치된 패키지와 종속 패키지를 일렬로 나열한 뒤 설치 패키지로 링크합니다.
    • 특징: 패키지 중복이 제거되어 적은 용량으로 빠르게 실행됩니다. 그러나 네이티브 모듈과의 충돌 가능성이 있습니다.

 


lock 파일 관리

  • 혼용 문제: package-lock.json과 yarn.lock 파일이 동시에 존재해도 상관없지만, 의존성 충돌을 피하기 위해서는 한 가지 패키지 매니저를 일관되게 사용하는 것이 좋습니다.
  • 권장 방법: npm install을 사용하기로 했다면 끝까지 npm으로, yarn add를 사용하기로 했다면 끝까지 Yarn으로 패키지를 관리합니다.
반응형