[TIL] npm / npx / yarn 차이

박먼지·2023년 6월 12일
0
post-thumbnail

이번에 해커톤 프로젝트를 진행하면서 패키지 관리 툴로 yarn을 사용하기로 했는데, 왜 npm말고 yarn을 사용해야 하는지 궁금해져서 알아보기로 했다!

npm, npx, yarn 모두 자바스크립트 런타임 환경인 node.js의 패키지를 관리할 수 있는 도구이다.

개발자들이 자바스크립트로 만든 다양한 패키지를 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제뿐만 아니라 패키지 버전 관리, 의존성 관리가 가능하다.

npm

2010년 이전에는 프로젝트의 의존성은 직접 다운로드하고 관리하여야 했는데, 이러한 불편함에 npm이 등장했다.

npm의 방향은 아래와 같다.

  • 여러 버전의 동일한 패키지를 한 프로젝트에서 사용할 수 있게 하자
  • 설치 방식을 통일하자
  • 패키지 관련 정보가 들어있는 메타 데이터를 간소화 하자
  • 누구나 배포할 수 있도록 하자

npmNode.js를 설치하기만 하면 자동으로 설치된다.

npx

npxexecute npm package binaries의 줄임말로, npm에 속해 있는 npm 패키지 실행 도구이다.

npx는 모듈을 로컬에 설치해야만 실행시킬수 있는 npm과 달리 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식으로 작동된다.

npxcreate-react-app같은 변경사항이 잦은 보일러 플레이트 모듈에 효과적이다. 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어진다.

yarn

yarn은 페이스북에서 만든 자바스크립트 패키지 매니저이다.
yarnnpm의 속도, 안정성, 보안성의 문제를 보완하기 위해 만들어졌다.

  • 속도 Speed(Performance)
    yarn은 다운받은 패키지 데이터를 캐시(cache)에 저장하여, 중복된 데이터는 다운로드하지않고, 캐시에 저장된 파일을 활용함으로써 이론적으로 npm에 비해 패키지 설치속도가 매우 빠르다. 또한 여러개의 패키지를 설치할 때 순차적으로 설치하는 npm과 달리 yarn은 병렬로 설치하기 때문에 속도가 빠르다고 한다.
    하지만 npm도 속도가 많이 개선되어서 install 속도 차이는 아주 근소하다고 한다.

  • 안정성 & 보안성 Security
    npm은 패키지가 설치될 때 자동으로 코드와 의존성을 실행할 수 있도록 허용했다. 이 특징은 편리한 기능이지만 보장된 정책 없이 등록한 패키지가 존재할 수 있다는 점에서 안정성을 위협할 수 있다.
    반면 yarnyarn.lock이나 package.json파일에 있는 것만 설치를 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그를 방지해줄 수 있다.

npm과 yarn, 무엇을 선택할까?

yarnnpm의 개선된 버전으로 나왔다고 하지만, yarn도 단점이 있다. 디스크 용량을 좀 더 많이 잡아먹는다는 점, 그리고 npm의 점유율이 높아 npm에 관련된 자료가 더 많다는 점도 단점이다.
그리고 npm도 성능적인 부분에서 많이 개선되었기 때문에 yarn과 차이가 많이 나지는 않다고 한다.
결론적으로 둘 중에 무엇을 선택해야 할지는 개인의 취향, 성능, 커뮤니티에 따라 달라질 수 있다.

나의 취향은..

npm을 더 많이 사용하기도 했고 명령어도 직관적이라고 생각한다.
하지만 yarn을 써본 결과.. 뭔가 더 세련됐고(?) 속도도 빠른 것 같아서 yarn을 자주 사용할 것 같다.
빨간색보다 파란색을 더 좋아해서라는게 학계의 정설
그리고 고양이 귀여워

참고:
https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx
https://joshua1988.github.io/vue-camp/package-manager/npm-vs-yarn.html#npm%E1%84%80%E1%85%AA-yarn%E1%84%8B%E1%85%B4-%E1%84%8E%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8C%E1%85%A5%E1%86%B7
https://seogeurim.tistory.com/12
https://subtlething.tistory.com/111
https://ko.wikipedia.org/wiki/Npm_(%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4)

profile
개발괴발

0개의 댓글