npm과 npx 용어정리 및 차이점

기본용어정리

 

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

node_modules : 모든 모듈의 저장공간 

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

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

 

NPM란?

우리가 매우 잘 알고 있듯이, npm은 Node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다.

 

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

 

1) 패키지 설치 

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

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

 

2) 버전관리 제공 

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

 

 

* npm install 모듈이름 -g

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

 

(유의해야할 점)

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

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

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

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

 

npx란?

npx는 Node 패키지를 실행시키는 하나의 도구이고 npm5.2 버전부터 함께 딸려있습니다.

npx는 다음과 같은 역할을 합니다.

1. 기본적으로 실행되어야할 패키지가 경로에 있는지 먼저 확인합니다.(예: 우리의 프로젝트);

2. 경로에 제대로 있다면, 그대로 실행합니다;

3. 그렇지 않다면 패키지는 설치되어 있지 않다는 걸 의미하고, npx가 최신 버전의 패키지를 설치를 한 후에 실행합니다;

위에 설명한 행동들은 npx의 기본 설정 중 하나이고 실행을 방지할 수 있는 명령어도 갖고 있습니다.
예를 들면, 만약 우리가 npx 무슨-패키지 --no-install을 실행하면 이것은 npx에게 무슨-패키지가 기존에 설치되지 않았더라도 설치하지 않고 오직 실행만 시키도록 말하는 것이 됩니다.

여기에서 더 많은 npx 명령어들이 있습니다.

예시

여기 우리가 실행하고자 하는 my-package라는 패키지가 있다고 해봅시다.

아마 npx가 없다면 우리는 패키지를 실행하기 위해 로컬 경로에서 다음과 같이 실행해야 하겠죠.

./node_modules/.bin/my-package

아니면 package.json파일의 scripts 부분에 각각의 스크립트로 정의할 수도 있겠네요, 이렇게요.

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

그리고 npm run my-package로 실행하느 거죠.

이제, 우리는 npx로 더 쉽게 할 수 있습니다. npx my-package명령만으로요.

결론

그래서, 보강하자면 npm !== npx라는겁니다. 그리고 저는 이 짧은 글이 우리의 오해를 해결하는데 도움이 되었으면 합니다.

만약 물어보실게 있다면, 편하게 마음껏 댓글 달아주세요!

코딩 열심히 하셔서 오지고 지리는거 만드시고 항상 행복하세요! 😊

 

 

결론

 

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

 

 

yarn란?

 

참조 :https://seizemymoment.tistory.com/106

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

참조:https://velog.io/@kimkyeseung/%EB%B2%88%EC%97%AD-%EA%B7%B8%EB%9E%98-npx-npm%EB%A7%90%EA%B3%A0-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%84%A4%EB%AA%85

[번역] 그래, npx! npm말고 — 차이점 설명