본문 바로가기
프론트엔드/React

NPM vs YARN

by 학습하는 청년 2023. 7. 1.

1. 특징

NPM

- Node Package Manager

- 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자.

- 단 몇 줄의 command로 패키지들을 설치하여 사용할 수 있다. (ex. axios, react-router-dom 등)

- 많은 패키지들이 존재한다.

- npm이 없었을 때는, 필요로 하는 기능을 추가하기 위해 직접 작성하거나 github을 통해 다운로드하여 사용했다. 이런 불편함을 해소하기 위해 등장했다.

 

- 저장소의 취약한 보안 이슈, 의존 패키지의 버저닝 이슈가 있다.

- 패키지가 많아짐에 따라 빌드 성능이 떨어진다.

 

YARN

- Yet Another Resource Negotiator

- 2016년 페이스북에서 개발한 패키지 관리자.

- npm과 같은 기능을 수행하지만 속도나 안정성 측면에서 더 낫다.

- yarn.lock 파일을 통해 패키지 버전 잠금을 지원. 이를 통해 프로젝트에서 의존하는 모든 패키지를 어느 환경에서든 항상 동일한 버전으로 설치할 수 있게 만들었다. 버전 차이로 인한 버그를 방지할 수 있다.

 

2. 공통점

- 둘 다 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자.

 

패키지? 

- npm에 업로드된 노드 모듈

 

자바스크립트 패키지 관리자

- 다양한 자바스크립트 프로그램이 패키지라는 이름으로 npm에 등록되어 있고, 패키지가 다른 패키지를 사용할 경우 의존 관계를 가지기도 한다.

 

3. 비교

Speed

- npm은 필수 단계를 순차적으로 수행하기 때문에 다음 패키지로 넘어가기 전에 각 패키지를 완전히 설치해야 한다.

하지만 yarn은 동시에 여러 패키지를 설치할 수 있기에 속도 면에서 빠르다.

 

하지만, 이 차이도 npm 5.0 아래의 버전일 때의 문제이다. 이제는 거의 차이가 없어졌다.

 

Security

- npm은 의존 관계를 가지는 다른 패키지들이 즉시 포함되도록 한다.

 

- yarn은 yarn.lock이나 package.json 파일에 있는 것들로만 설치를 한다.

 

1) 설치 방법의 차이

- npm : Node.js를 설치할 때 함께 설치된다.

- yarn : 별도로 설치해줘야 하는 패키지

npm install -g yarn

 

2) 명령어의 차이

[패키지 생성]
npm init --- yarn init

[패키지 업로드]
npm publish --- yarn publish

[패키지 설치 / 삭제 / 업데이트 / 정보 조회]
npm install [패키지명] --- yarn add [패키지명]
npm uninstall [패키지명] --- yarn remove [패키지명]
npm update [패키지명] --- yarn upgrade [패키지명]
npm info [패키지명] --- yarn info [패키지명]

[현재 패키지의 dependencies 조회]
npm list --- yarn list

 

3) package-lock.json vs yarn.lock

- 둘 다 같은 역할을 한다.

 

4) 명령어 실행 시 출력 내용의 차이

Yarn으로 패키지 관련 작업을 하면 npm 때와는 다른 형식으로 터미널에서 결과들이 출력된다. 조금 더 정돈된 디자인과 이모티콘을 출력한다.

 

==> 세부적으로 동작하는 방식에 차이가 있고, 미세한 기능 차이가 존재한다. 둘 중 무엇이 절대적으로 더 좋다기보다는 개인의 취향에 따라 선택하면 된다.

참고 링크

https://velog.io/@jma1020/npm-yarn-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%96%B4%EB%96%A4-%EC%B0%A8%EC%9D%B4

https://seogeurim.tistory.com/12

https://youngmin.hashnode.dev/npm-yarn

 

'프론트엔드 > React' 카테고리의 다른 글

Headless CMS  (0) 2023.07.31
Vite vs Next.JS  (0) 2023.07.11
5. 컴포넌트(Component)  (0) 2023.03.10
JSX 문법  (0) 2023.03.07
onSubmit / onClick / onChange  (0) 2023.01.25

댓글