동기
여느 때처럼 npm을 사용하여 외부 패키지들을 설치하고 있었습니다.
😢 그런데... storybook을 설치하는 도중 에러가 발생하더라구요!
npm i --force ... force 옵션을 주어 설치했지만 찝찝하더라구요.
다른 크루들에게 물어보니 npm은 안되고, yarn은 정상 설치된다는 답변을 들었습니다.
🤔 도대체 무슨 차이가 있는 걸까요?
Javascript Package Manager
npm과 yarn은 자바스크립트 패키지 매니저입니다.
Package (패키지)
-
npm에 업로드된 노드 모듈입니다. (매일 쓰고 있죠)
-
다양한 자바스크립트 프로그램이 패키지라는 이름으로 npm에 등록되어 있어요.
-
패키지 안에서 또 다른 패키지를 사용할 경우 의존 관계를 가집니다.
-
이러한 패키지들을 사용하기 위해서는 다운로드, 설치, 업데이트, 의존성 관리, 제거 등 복잡한 상황들이 많이 생기는데 package manager는
이러한 과정들을 자동화하여 편리하고 안전하게 수행할 수 있도록 해줍니다.
❓ 그렇다면 npm과 yarn 각각이 가지고 있는 특징들로는 어떤 것들이 있을까?
npm (node package manager)
런타임 동안 노드 환경에서 쓰이는 다양한 패키지들을 관리합니다.
npm registry라고 불리는 공개적인 패키지들로 구성된데이터베이스를 가지고 있어요.
yarn
yarn은 npm의 부족한 부분들을 개선하기 위해 Facebook에서 개발되었어요.
(역시 페갓 페갓)
-
npm이 사용하는 동일한 npm 구조에 의존합니다.
-
따라서 패키지의 레지스트리에 대한 것은 바뀌지 않았고,
설치 절차가 바뀌었다고 생각하면 됩니다.
뭐가 바뀌었는데요?
1. 패키치 병렬 설치 👉 속도 향상
npm은 순차, yarn은 병렬
npm에서 여러 패키지를 설치할 때, 패키지가 완전히 설치될 때까지 기다린 후 다른 패키지를 설치해요.
즉, 작업은 패키지별로 순차적으로 실행됩니다.
반면에 yarn은 이러한 작업을 병렬로 설치하므로 퍼포먼스와 속도가 증가합니다.
React를 설치했을 때, 🏎️ yarn이 훨씬 빠른 것을 볼 수 있죠?
NPM — 3.572 seconds
YARN — 1.44 seconds2. Automatic Lock file generation (자동 lock 파일 생성)
npm과 yarn 모두 패키지에서 프로젝트의 종속성(dependencies)과 버전 번호를 추적합니다.
종속성(dependencies)을 설치할 때마다 종속성 버전이 버전 번호 앞에 ^로 시작될 수 있어요.
🤔 ^로 시작한다는 것은 무슨 의미일까요?
- 종속성을 설치할 때마다 ^로 시작하는 종속성들의 최신 버전을 찾습니다.
- 최신 버전이 있다면 최신 버전으로 업데이트 됩니다.
🤔 최신버전으로 만들고 싶지 않으면?
- 패키지 파일에 ^을 제거합니다.
- 잠금 파일을 생성하여 한 번에 특정 버전만 설치합니다.
npm: package-lock.json
yarn: yarn.lock yarn은 항상 yarn.lock 파일을 생성하고 업데이트합니다.
npm은 이전에 npm-shrinkwrap.json이 존재하는 경우에만 업데이트되었어요.
- 물론 npm v5.0부터는 자동으로
package.lock.json파일이 생성됩니다. package.lock.json파일이 설치 과정과 성능을 효율적으로 향상시켰지만, 아직 yarn의 속도는 못 따라와요!
3. Security, 보안
yarn은 지정된 파일만 설치해서 보안이 더 좋아요.
😅 npm은 다른 패키지를 즉시 포함시킬 수 있는 코드를 자동으로 실행하므로, 보안 시스템에 여러 가지 취약성이 발생합니다.
😀 반면에, yarn은 yarn.lock 또는 package.json 파일에 있는 파일만 설치합니다. YARN이 NPM 패키지보다 보안이 강화되었다고 말할 수 있죠!
yarn은 결국 모든 디바이스에 같은 패키지들을 설치하는 것을 보장하기 때문에 디바이스마다 다른 버전을 설치해서 발생할 수 있는 버그들을 많이 주게 됩니다.
참고
