[React] npm vs npx

 

npm과 npx의 차이점에 대해 자세히 알아보자!

 

npm

npm(Node Package Manager)는 Node.js 패키지 매니저이다. npm을 사용하면 다양한 패키지(모듈)을 쉽게 설치하고 관리하는 것이 중점이다. npm은 아래와 같이 사용하는데

 

• 패키지 설치: npm install <package-name> 명령어를 사용하여 패키지를 설치
  • 모든 의존성 패키지는 package.json에서 npm install로 설치하여 원하는 패키지를 로컬(node_modules)에 설치
• 글로벌 설치: -g 옵션을 사용하여 패키지를 전역(global)으로 설치
• 스크립트 실행: package.json 파일에 정의된 스크립트를 실행
  • 예를 들어, npm run build는 build 스크립트를 실행
• 패키지 관리: 의존성 버전 관리, 업데이트 등을 쉽게 가능

 

다만, 한번 설치한 모듈을 계속 사용하기 때문에 업데이트가 안되고, 버전 문제가 일어날 수 있다.

 

npx

npm 5.2.0 버전부터 포함된 도구로, 패키지를 실행하기 위해 사용, 패키지를 설치하지 않고도 실행할 수 있도록 도와주며, 일회성으로 사용할 패키지를 쉽게 실행할 수 있는 방법을 제공한다.

 

• 패키지 실행: npx <package-name> 명령어를 사용하여 설치되지 않은 패키지도 즉시 실행 가능
  1. 해당 패키지가 이미 프로젝트의 node_modules에 설치되어 있다면, npx는 그 패키지를 사용하여 명령을 실행하고, 새로운 설치는 이루어지지 않는다.
  2. 패키지가 로컬에 설치되어 있지 않은 경우, 일시적으로 패키지를 다운로드하여 실행한다다. 이 패키지는 일시적으로 사용되며, 실행 후 자동으로 삭제된다
  3. 전역으로 설치된 패키지를 사용하려면 npx는 그 패키지를 찾아서 실행한다. 만약 전역 설치된 패키지가 없다면, 필요한 경우 일시적으로 패키지를 다운로드하여 사용한다

 

결론

결국, npx는 npm을 더욱 편리하게 사용하기 위해 나온 도구이다. npm을 이용하여 패키지를 실행하는 방법은 아래와 같은데

• 패키지가 위치한 경로로 직접 실행  -->   node ./bin/~~경로
• package.json의 스크립트로 경로를 정의하여 실행  -->   npm start 같이

npm은 패키지별로 일일이 업데이트를 해줘야 하기 때문에, 모듈이 많아 업데이트가 잦은 cra와 같은 경우,  npx를 이용해 설치하는 것을 권장한다. 그래서 CRA와 같은 변경사항이 잦은 보일러 플레이트코드는 최신버전을 계속 설치해줘야한다

--> 그렇기 때문에 리액트 예제에서 npx create-react-app 을 사용한다

 

npm은 프로젝트에 필요한 모듈을 설치하고 관리할 경우 사용

npx는 일회성으로 패키지를 실행하거나 특정 버전의 패키지를 사용하고자 할 경우 사용