[Node.js] npm으로 create-react-app 설치하기 (npm vs npx)

프로젝트를 진행하기 위해 create-react-app으로 프로젝트를 시작하려다 문득, npm과 npx의 차이에 대해 궁금해졌다.

두 명령어를 언제 쓰면 좋은 건지 구분하기 위해 학습하게 되었다.

 

npm과 npx

우선 npm은 Node Package Manager로 익히 아는 것처럼 install 한 패키지들을 관리해주는 역할을 한다.

npx는 Node Package eXecute로 패키지를 install 하지 않고 바로 실행시켜준다. 그렇기 때문에 메모리를 차지하지 않고, 가장 최신 버전을 실행시켜준다.

npm 5.2.0 이상을 설치하면 npx 또한 자동으로 설치된다. 만약 그 아래 버전이라면 

$ npm install -g npx

로 설치해주면 된다.

 

cra를 할 때, npm 대신 npx를 쓰는 이유

직접 사용하고 비교해보자!

이제 cra를 설치해보고 비교하기로 하였다.

npm으로 create-react-app을 설치

$ npm install create-react-app
$ create-react-app DIRNAME

 

비교를 위해 npx로도 설치

$ npx create-react-app DIRNAME

 

설치된 두 개의 app

구성은 별반 다르지 않으나, package.json에 설치된 모듈들의 버전이 조금 달랐다.

npx로 설치한 cra의 package.json

{
  "name": "npx-cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  ...
}

 

npm으로 설치한 cra의 package.json

{
  "name": "npm-cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  ...
}

 

npm으로 설치한 cra는 이미 설치된 cra를 실행시킨 것이기 때문에 npx에 비해 버전이 상대적으로 낮다.

cra는 자주 사용 빈도가 낮기도 하고(타 패키지에 비해) 그러다보니 이후 사용할 때, 최신 버전이 아닌 구 버전을 사용하게 될 수 있다. 그렇기 때문에 사용할 때마다 npx를 통해 새로운 버전을 실행시키는 것이 보다 효율적이라고 생각한다.

 

이렇게 사용 빈도가 낮거나 일회성으로 사용되는 패키지의 경우, npm 대신 npx를 사용하는 것이 메모리도 절약하고 버전 측면에서도 좋을 것 같다!

 

https://www.geeksforgeeks.org/what-are-the-differences-between-npm-and-npx/

What are the differences between npm and npx ? - GeeksforGeeks

https://docs.npmjs.com/

npm Docs