[React] npm과 npx의 차이

 

리액트에서 패키지를 설치할 때 사용하는 npm과 npx의 차이점을 정리해 보았다.

 

 

---

 

npm(Node Package Manager)

 

node.js의 패키지 관리를 위한 패키지 매니저.(package manager)

node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하여 패키지를 쉽게 설치/삭제할 수 있도록 도와준다.

node.js를 설치하면 자동으로 생성된다.

 

 

사용법

# 패키지 설치
npm install 패키지명

# 패키지 삭제
npm uninstall 패키지명

# 패키지 업데이트
npm update 패키지명

위 명령어를 입력하면 원하는 패키지를 로컬인 현재 디렉터리(node_modules)에 설치/삭제할 수 있다.

 

 

글로벌 모듈

-g 옵션을 주게 되면 내 컴퓨터 안의 글로벌한 공간에 설치해 프로젝트마다 같은 모듈을 공유해서 사용할 수 있다.

이로 인해 매 프로젝트마다 모듈을 설치해 줄 필요가 없어진다.

# 글로벌 패키지 설치
npm install -g 패키지명
npm install --global 패키지명

# 글로벌 패키지 제거
npm uninstall -g 패키지명
npm uninstall --global 패키지명

하지만 이는 권장되지 않는 옵션이라 일반적으로는 로컬에 설치한다.

 

그 이유는 다음과 같다.

1. 같은 모듈을 재사용하기 때문에 모듈의 업데이트 여부 확인이 불가함.
2. 프로젝트마다 같은 모듈의 다른 버전이 필요한 경우, 업데이트 시 버전이 달라지면 다른 프로젝트에 문제가 생길 수 있음.
3. create-react-app 같은 보일러플레이트는 변동사항이 잦아 최신 버전을 사용해야 하는데 매번 최신 버전을 재설치하는 건 비효율적임.

 

 

---

 

npx

npm 5.2 버전부터 기본 패키지로 제공되는 모듈.(package runner)

패키지를 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 설치하고 실행시킨 후에, 다시 그 파일은 없어진다.

npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 이 같은 보일러 플레이트 모듈에 사용하면 효과적이다.

 

실행 과정

로컬 -> 글로벌 -> remote npm
1. 로컬에 있는지 확인 후 있으면 로컬에 있는 것을 실행
2. 없으면 글로벌 확인 후 있으면 글로벌에 있는 것을 실행
3. 내 컴퓨터에 없다면 원격 npm에서 찾아서 가장 최신 버전을 설치하고 실행 후 삭제

 

 

---

 

* 참고자료

https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx

https://seizemymoment.tistory.com/106