[ReactJS] npm과 npx의 용어정리 및 차이점

웹 개발/ReactJS

ohbox 2021. 4. 8. 14:15

react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다.

낯익은 용어지만 제대로 공부한 적이 없는거 같아 차이점을 알기 위해 정리해보았다.

package.json : 모듈 설치시 자동으로 생성되는 node.js 버전 관리 파일

node_modules : 모든 모듈의 저장공간

React : 많은 모듈들로 구성된 라이브러리로 이들 간의 상호작용이 중요하다.

따라서 npm으로 모듈 설치, node.js로 개발 작업환경을 구성한다.

npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다.

1) 패키지 설치

프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다.

npm intall를 실행하기만 하면 원하는 패키지를 로컬(node_modules)에 설치할 수 있다.

2) 버전관리 제공

npm은 패키지의 버전을 선택할 수 있기 때문에 패키지 버전 차이로 생기는 문제를 방지할 수 있다.

* npm install 모듈이름 -g

-g 옵션을 사용하면 프로젝트마다 모듈을 설치할 필요없이 글로벌한 공간에 설치되어 모듈을 공유할 수 있다.

(유의해야할 점)

- 한번 설치한 모듈을 계속 사용하기 때문에 업데이트 확인이 어렵다.

- 같은 모듈을 사용해도 프로젝트마다 다른 버전이 필요할 수 있기 때문에 버전 문제가 발생할 수 있다.

- 위와 같은 문제로 모듈 변경사항이 잦은 create-react-app 같은 보일러플레이트에서는

최신버전 설치를 매번 해줘야 하기 때문에 번거롭다.

npm 5.2.0버전부터 추가된 node.js 패키지를 실행시키는 하나의 도구이다.

1) 패키지 실행

패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식입니다.

(과정)

- 실행시킬 패키지가 로컬에 저장되어 있는지 먼저 확인한다.

- 존재한다면 실행시킨다.

- 존재하지 않는다면 npx가 가장 최신 버전을 설치하고 실행시킨다.

npx는 결국 npm을 더욱 편리하게 사용하기 위해 나온 도구이다.

npx이 아닌 npm을 사용한다면

my-package (패키지 예시) 를 실행시킬 때

로컬에서 패키지가 위치한 ./node_modules/.bin/my-package의 경로로 실행시켜야하거나

package.json의 script로 my-package의 경로를 정의해주어야한다.

{
  "name": "myPackage",
  "version": "1.0.0",
  "scripts": {
    "my-package": "./node_modules/.bin/my-package"
  }
}

업데이트의 경우에도 npm는 일일히 업데이트를 해줘야하기 때문에

모듈이 많아 업데이트가 잦은 create-react-app의 경우 npx를 이용해 설치하는 것을 권장한다는 것을 알게 되었다.

출처 및 참고자료