본문 바로가기

Develop Log/JavaScript

친숙하지만 생소한 NPM, Yarn 알아보기

반응형

NPM ? Yarn ?

자바스크립트 개발을 할 때, 우리는 종종 라이브러리나 도구를 프로젝트에 추가해야 한다.

이를 도와주는 도구들이 바로 패키지 매니저인데, 가장 많이 쓰이고 프로젝트를 생성할 때 가장 먼저 보이는 패키지 매니저 npmyarn에 대해 알아보려고 한다.

 

NPM (Node Package Manager)

 

NPM (Node Package Manager)

 

npm은 Node.js에서 기본으로 제공되는 패키지 매니저로, 2010년에 처음 출시되었다.

Node.js의 초창기부터 빠르게 성장하면서, 커뮤니티는 공유된 코드 조각들을 쉽게 관리하고 배포할 방법의 필요성을 느꼈고, 이에 따라 npm이 탄생하게 되었다.

 

기능

  • 패키지 저장소: npm은 수백만 개의 자바스크립트 라이브러리와 도구를 호스팅하는 중앙 저장소 역할을 한다.
  • 패키지 설치 & 관리: 로컬 프로젝트에 필요한 패키지를 설치하고, 해당 패키지의 버전을 관리한다.
  • 글로벌 설치: 개발 도구나 명령줄 도구와 같은 패키지를 시스템 레벨에서 설치하여 전역적으로 사용할 수 있도록 한다.
  • 스크립트 실행: package.json 내의 scripts 섹션을 통해 특정 스크립트를 실행할 수 있다.

 

특징

  • package.json: 프로젝트의 메타데이터, 의존성, 스크립트 등의 정보를 포함하는 파일이다.
  • node_modules: 프로젝트에 설치된 모든 패키지를 포함하는 폴더이다. 이 폴더는 일반적으로 .gitignore에 포함되어 Git에 커밋되지 않는다.
  • package-lock.json: 의존성 트리에 대한 정확한 정보를 제공하는 파일로, 프로젝트에 설치된 모든 패키지의 정확한 버전, 위치 및 종속성을 나열해준다.

 

사용

  • npm init: 새로운 package.json 파일을 생성한다.
  • npm install: package.json에 나열된 모든 의존성을 설치한다.
  • npm install [package-name]: 특정 패키지를 설치한다.
  • npm uninstall [package-name]: 특정 패키지를 제거한다.
  • npm update [package-name]: 특정 패키지를 최신 버전으로 업데이트한다.
  • npm run [script-name]: package.jsonscripts 섹션에서 지정된 스크립트를 실행한다.

 

구동 방식

  1. 패키지 설치: npm install [package-name] 명령어를 사용하여 패키지를 설치할 때 npm은 npm registry에서 해당 패키지의 메타데이터를 가져온다.
  2. 의존성 해결: 가져온 패키지 메타데이터를 기반으로 해당 패키지의 종속성을 파악하고, 필요한 모든 패키지를 설치한다.
  3. node_modules 생성: 모든 패키지와 그 의존성이 node_modules 디렉토리에 설치된다.
  4. 패키지 재설치: 이전에 설치한 패키지가 있다면, npm은 기본적으로 중첩된 의존성 구조를 가지게 되며, 이는 프로젝트 간 의존성 충돌을 피하고자하는 설계 방향 때문이다.

 

Yarn (Yet Another Resource Negotiator)

 

yarn

 

yarn은 2016년에 Facebook에서 주도하여 Google, Exponent 및 Tilde와 함께 출시되었다. npm의 여러 문제점을 개선하고자 하는 목적으로 개발되었으며, 특히 대규모 애플리케이션의 빌드 과정에서 발생하는 속도와 일관성 문제에 중점을 둔 도구로 시작되었다.

 

특징

  • 속도: yarn은 동시에 여러 패키지를 설치할 수 있는 병렬 처리 기능을 제공하여 설치 속도를 크게 향상시켜준다.
  • 보안: npm과 비교하여 보안에 더 강력한 접근 방식을 취하며, 더 안전하게 패키지를 설치한다.
  • 오프라인 모드: 한 번 설치된 패키지는 로컬 캐시에 저장되며, 이후에는 캐시에서 패키지를 직접 가져올 수 있고, 이는 인터넷 연결이 불안정한 환경에서 매우 유용하다.
  • 결정론적 설치: 동일한 yarn.lock 파일과 의존성을 사용하는 한, 모든 시스템에서 동일한 방식으로 의존성이 설치된다.

 

사용

  • yarn init: 새로운 package.json 파일을 생성한다.
  • yarn add [package-name]: 특정 패키지를 설치하고, package.json의 의존성에 추가한다.
  • yarn remove [package-name]: 특정 패키지를 제거한다.
  • yarn upgrade [package-name]: 패키지를 최신 버전으로 업데이트한다.
  • yarn run [script-name]: package.jsonscripts 섹션에서 지정된 스크립트를 실행한다.
  • yarn cache clean: 로컬 캐시를 정리한다.

 

구동방식

  1. 패키지 설치: yarn add [package-name] 명령어를 사용하면, yarn 또한 npm registry 혹은 다른 설정된 레지스트리에서 패키지의 메타데이터를 가져온다.
  2. 의존성 해결: yarn도 가져온 패키지 메타데이터를 기반으로 해당 패키지의 의존성을 파악하고 필요한 모든 패키지를 설치한다.
  3. yarn.lock 파일: yarn은 설치된 모든 패키지의 구체적인 버전을 yarn.lock 파일에 저장한다. 이는 프로젝트 내 모든 개발자들이 동일한 패키지 버전을 사용하게끔 보장하며, 패키지의 일관성을 유지해준다.
  4. 플랫한 node_modules 구조: yarn은 가능한 한 플랫한 의존성 구조를 갖도록 node_modules를 구성한다. 이는 패키지 중복을 최소화하고 디스크 공간을 절약하기 위한 목적으로 이용된다.
  5. 병렬 처리: 패키지 설치 작업이 병렬로 수행되는데, 여러 패키지의 설치 작업이 동시에 이루어지므로 설치 속도가 빠르다는 장점이 있다.

 

NPM, Yarn 차이

 

npm, yarn 지난 1년 트랜드

성능과 속도

  • npm: 초기에 npm은 의존성을 설치할 때 다소 느린 속도를 가지고 있었지만, 최신 버전의 npm은 속도와 성능 개선이 이루어져서 이전보다 훨씬 빨라지게 되었다.
  • Yarn: 병렬 설치를 지원하여 패키지 설치가 빠르다는 장점이 있으며, 이로 인해 대규모 프로젝트에서 효율적이다.

 

npm, yarn 트리구조

 

보안

  • npm: 초기에는 일부 보안 문제가 있었으나, 시간이 지남에 따라 보안 기능이 강화되었다. npm v6부터는 npm audit 명령어를 제공하여 보안 취약점을 자동으로 체크한다.
  • Yarn: 처음부터 보안을 강조하여 만들어진 도구로, 더 안전한 패키지 설치 방법을 제공한다.

 

Lockfile

  • npm: package-lock.json을 사용하여 의존성 트리의 정확한 스냅샷을 제공한다.
  • Yarn: yarn.lock 파일을 사용하여 모든 설치의 일관성을 보장한다.

 

CLI (명령어 인터페이스)

  • npm: 예를 들면 패키지를 설치할 때 npm install [package-name]을 사용한다.
  • Yarn: yarn add [package-name]으로 패키지를 설치한다.

 

node_modules 구조

  • npm: npm v5 이전에는 의존성을 중첩된 방식으로 설치했었지만, 최근에는 플랫한 구조를 채택하고 있다.
  • Yarn: 가능한 한 플랫한 구조를 사용하여 의존성 중복을 최소화한다.

 

오프라인 캐시

  • npm: 기본적으로 오프라인 캐시를 지원하지 않는다.
  • Yarn: 한 번 설치한 패키지는 로컬 캐시에 저장되어, 오프라인에서도 재설치 없이 사용할 수 있다.
반응형

'Develop Log > JavaScript' 카테고리의 다른 글

웹 컴포넌트 알아보기  (0) 2023.09.18
이벤트 델리게이션 알아보기  (0) 2023.09.12
var, let, const 차이  (0) 2023.08.18
Console을 더 예쁘게!  (0) 2023.08.16
Virtual DOM 훑어보기  (0) 2023.08.15