[JavaScript] npm vs npx vs yarn

coderH·2022년 9월 10일
0
post-thumbnail

npm vs npx vs yarn

패키지는 프로젝트를 개발할 때 복잡하거나 까다로운 부분을 좀 더 빠르고 쉽게 구현할 수 있도록 도와줍니다.

이러한 패키지의 설치, 삭제, 버전관리, 종속성(= 의존성, Dependency)관리 등을 도와주는게 패키지 매니저의 역할입니다.

대표적인 패키지 매니저는 python의 PyPI, Java의 Maven 혹은 Gradle이 대표적이며 JavaScript에서는 주로 npm을 사용하지만 npx, yarn도 들어본 적이 있을겁니다.

그래서 오늘은 자주 사용하지만 헷갈리기 쉬운 이 3가지의 차이점에 대해 알아보려고 합니다.

npm (Node Package Manager)

npm은 JavaScript의 대표적인 패키지 매니저로서 NodeJS를 설치할 때 함께 설치되며 JS의 패키지 매니저 중 가장 유명하고 많이 사용됩니다.

패키지 매니저가 존재하기 전에는 개발자가 직접 해당 패키지의 파일을 찾아서 다운로드 받아 프로젝트에 설치하고 종속성또한 직접 관리해야 했습니다.
이러한 작업은 프로젝트의 크기가 커지고 사용하는 패키지의 수가 늘어날수록 번거로워집니다.

하지만 패키지 매니저가 생기면서 패키지의 설치, 삭제, 업데이트등을 쉽게 할 수 있도록 도와주고 종속성 목록또한 패키지 매니저가 관리해주기 때문에 보다 간편하고 안정적으로 패키지 관리를 할 수 있게 되었습니다.

특히, npm은 패키지를 자신들의 데이터베이스인 npm registry라고 부르는 장소에 등록시켜놓고 설치시에 이 npm registry로 부터 파일을 받아오는 특징을 가지고 있습니다.

npx (NodePackage eXecute)

npx는 npm의 5.2버전부터 자동으로 포함되어 설치되는 npm의 일부분으로 패키지를 디렉토리에 설치하지 않고 실행하는게 목적일 때 사용합니다.

이를 패키지 러너라고 부르며 만약 우리가 어떤 패키지를 테스트해보고 싶을 때 npm을 사용한다면 npm install 명령어를 통해 패키지를 설치하고 npm run을 통해 실행하는 과정들을 거쳐야 합니다.

이는 단순히 테스트를 목적으로 하기에는 번거로운 작업이며 만약 프로젝트가 진행중인 디렉토리에서내에서 진행한다면 종속성이 변경되기 때문에 테스트 후 패키지를 삭제해줘야 하는 과정도 추가됩니다.

그래서 불필요한 메모리를 차지하고 위 과정들로 인해 시간이 소요되는 단점을 가지고 있기에 이를 보완하고자 npx를 사용합니다.
npx는 CLI 툴이기 때문에 CLI로 아래와 같은 명령어를 통해 실행할 수 있습니다.

npx <packageName>

명령어를 입력하면 먼저 local이나 global에서 해당 패키지가 설치되어 있는지 확인하고 존재한다면 설치없이 해당 패키지를 실행합니다.

만약 설치되어 있지 않다면 npm cache영역에 임시로 패키지를 설치하여 실행을 도와줍니다.

이는 종속성에 영향을 주지 않아 온전히 해당 패키지만 테스트할 수 있습니다.

npm의 cache 디렉토리는 npm config get cache 명령어를 통해 찾을 수 있습니다.

yarn (Yet Another Resource Negotiator)

yarn은 npm과 같은 패키지 매니저로서 npm을 통해 설치할 수 있습니다.

npm install -g yarn

과거의 npm은 보안, 안정성, 속도등의 여러 부분에서 단점이 있었고 이러한 단점을 보완하기 위해 페이스북과 구글, Exponent, Tilde의 개발자들이 함께 yarn을 개발하여 2016년에 발표되었습니다.

속도 부분에서는 다수의 패키지를 설치해야한다고 가정했을 때 npm은 각 패키지를 순차적으로 설치하지만 yarn은 병렬적으로 설치하기 때문에 설치 속도에서 차이가 있으며 캐시되어 있거나 재설치의 경우 yarn이 최소 2배 이상 빠른 속도를 가지고 있습니다.

출처: https://phoenixnap.com/kb/yarn-vs-npm

또한, 안정성 측면에서는 yarn을 통해 패키지를 설치해보면 yarn-lock.json이라는 파일이 생성되는데 이 파일은 우리가 사용하는 패키지의 하위 패키지 간 종속성 문제로 충돌이 일어날 수 있어 패키지 내부 하위 패키지들의 정확한 버전명을 명시하는 역할을 합니다.

과거 npm은 이런 lock 파일이 없어 패키지 간 종속성 문제로 종종 충돌이 일어나 yarn이 안정성을 확보하기 위해 도입하였습니다.

다만, npm은 이러한 여러 문제를 해결하기 위해 많은 업데이트를 거쳐 현재는 yarn과 기능적으로 큰 차이가 없도록 발전하였으며 이에 따라 최근 yarn은 버전 2를 발표하면서 PnP, zero install등의 기능이 추가되었습니다.

정리

npmnpxyarn
분류패키지 매니저패키지 러너 (실행이 목적)패키지 매니저
설치NodeJS 설치 시 함께 설치npm과 함께 설치 됨npm을 통해 별도 설치 필요
특징가장 대표적인 JS의 패키지 매니저로 패키지의 설치, 업데이트, 제거, 종속성 등을 관리해준다.패키지가 로컬 및 전역 환경에 설치되어 있다면 바로 실행이 가능하며 패키지 테스트에 용이하다.npm의 단점을 보완한 패키지 매니저로 최신 버전의 경우 PnP, zero install등의 기능을 탑재하고 있다.

또한 최근 pnpm이라는 새로운 JS 패키지 매니저도 좋은 성능으로 주목받고 있으니 살펴보면 좋을 것 같습니다.

참조 사이트

freecodecamp.org

npm yarn | geeksforgeeks

npm npx | geeksforgeeks

개발후라이 | Tistory

phoenixnap.com

0개의 댓글