개요
React 프로젝트를 하기위해 CRA(Create-React-App)를 설치할 때 무심코 npx create-react-app 프로젝트명 같은 명령어를 통해 React 프로젝트를 설치한다. 이 상황 외에도, 가끔 npm 과 npx 를 번갈아 쓰는 경우가 많은데, 이 기회에 이 둘의 차이점을 정리한다.
본론
📍 NPM (Node Package Manager)
Package Manager = 관리
npm은 노드 패키지 관리자를 뜻한다.- javascript로 작성되어있다.
- npm 은 node.js의 모든 패키지와 모듈을 관리하며 CLI 클라이언트 npm으로 구성된다.
- node.js를 설치하면 시스템에 설치된다.
- Node 프로젝트의 필수 패키지 및 모듈은 npm을 사용하여 설치된다.
- 패키지에는 모듈에 필요한 모든 파일이 포함되어 있다.
- 모듈은 프로젝트 요구사항에 따라 Node 프로젝트에 포함될 수 있는 Javascript 라이브러리이다.
로컬에 npm 으로 패키지를 설치하려면
{
"name": "Your app",
"versiuon": "1.0.0",
"scripts": {
"your-package": "your-package-name"
}
}
작성한 패키지를 실행하려면
$ npm run your-package-name
📍 NPX (Node Package eXecute)
Package eXecute = 실행
npm 5.2.0버전 이상부터 npm을 설치하면 자동으로npx가 설치된다.- 즉, 새로운 패키지 관리 모듈이 아닌, npm의 5.2.0버전부터 새로 추가된 도구이다. 따라서 npm과 비교대상이 아니라, npm을 좀 더 편하게 사용하기 위해 npm 제공해주는 하나의 도구이다.
- 패키지를 설치하지 않고도 npm 레지스트리에서 원하는 패키지를 실행(Excute) 할 수 있다.
- 실행 즉,
npm package runner로써 npx는 일회용 패키지 로써 사용된다.
NPM Registry(레지스트리) ? 🔍
NPM NPM Registry
- NPM Registry는 누구나 Node.js에서 사용할 수 있는 모듈을 일정한 양식만 갖춘다면 등록할 수 있고, npm 명령을 통해서 Module Registry 에서 필요한 모듈을 설치할 수 있다.
node.js 를 이미 설치해서 사용하고 있다면, 왠만하면 npm이 5.2.0 버전 이상일테고, 그럼 npx 가 기본적으로 설치되어 있을 것이다.
그럼에도 확인해보려 한다면
$ which npx
그리고 만약 npx 가 설치되어 있지 않다면, 수동으로 설치
$ npm i -g npx
npx로 패키지 실행하려면
$ npx your-package-name
왜 등장했는 가 ❓
npm 으로 패키지를 설치할 때, 두 가지 케이스가 있다.
- 전역으로 패키지를 설치하여 의존성 라이브러리들을 전체적으로 관리하는 방법
- 특정 프로젝트에만 의존성 라이브러리를 설치하는 방법
의존성 라이브러리(Dependency) 들이 전역이나 로컬에 설치된 채 관리가 되면 어떤 문제가 있을까 ?
- 패키지가 업데이트 된다면 ?
- 전역으로 관리되고 있는 패키지도 따로 업데이트해주고, 로컬로 관리되고 있는 패키지도 따로 업데이트하면 굉장히 번거로울 것이다.
- 가뜩이나 변화무쌍한 Javascript 생태계에서는 더욱 관리가 쉽지 않을 것이다.
이러한 문제를 해결할 수 있는 도구가 바로 npx 이다.
내가 패키지를 설치하고 업데이트를 하지 않더라도, npm 레지스트리에 올라가 있는 최신 버전을 실행시키고 설치만 시키면 끝이다. 굉장히 간편하다 !
언제 사용하는 가 ❓
- npm run-script를 사용하지 않고 로컬에 설치된 패키지를 사용할 경우
- 일회성 명령으로 패키지를 실행할 경우
- gist-based scripts 를 실행할 경우
- 특정 노드 버전의 스크립트를 실행할 경우
📍 NPM vs NPX
영어로 자~알 설명되어 있는 것 같은데, 해석해보자면 이렇다.
결론
포인트만 정리하자면
npm: 패키지 관리자, 전역적npx: 패키지 실행자, 일회성
다음은, npm 과 yarn 에 대해 정리한다.