기타

NPM과 NPX의 차이점에 대해 알아보자

Joonfluence 2022. 4. 16. 09:56

서론

오늘은 비슷하지만 다른 역할을 하는 NPM과 NPX의 차이점에 관해서 알아보도록 하겠습니다.

본론

NPM이란

NPM이란 node.js 환경에서 사용되는 패키지 관리자입니다. 패키지 매니저(Package manager)는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이며, 라이브러리가 코드의 작성을 위해 사용되는 코드의 묶음이라면 패키지는 코드의 배포를 위해 사용되는 코드의 묶음입니다.

 

또한 많은 패키지들은 다른 패키지들이 설치되어야만 제대로 동작하는데, 기존 패키지를 제대로 동작시키기 위해 필요한 다른 패키지들을 dependency(의존성)라고 한다. 따라서 패키지를 사용하고자 할 때, 의존성을 갖는 다른 패키지들을 전부 설치해 줄 필요가 있다. 다만, 이는 패키지가 늘어갈 때마다 다른 패키지의 의존성을 체크하고 또 설치해줘야 하는 번거로움이 발생하는 원인이 됩니다. 이 때, packge.json 파일에 의존성에 대한 정보를 확인할 수 있도록 저장하면 사용자가 사용하고자 하는 패키지의 dependency를 패키지 매니저를 통해 쉽게 설치하도록 도울 수 있습니다.

NPX란

NPX란 아래 3가지 역할을 합니다.

  1. NPX로 실행하고자 하는 패키지가 현재 실행 경로에 존재하는지 파악합니다.
  2. 만약 존재한다면, 패키지를 실행해줍니다.
  3. 없다면, 패키지가 존재하지 않는다는 의미이므로 패키지의 최신 버젼을 설치하고 실행해준 뒤 자동으로 삭제해줍니다.

NPX가 나온 배경

NPX는 npm 버젼 5.2.0부터 가능하게 됐습니다. NPX가 하는 역할은 참 직관적입니다. 그냥 '패키지를 실행'해줍니다. 정말 간단합니다. 예를 들어, NPX가 없던 시절에는 패키지를 실행하기 위해선 다음과 같이, 해당 모듈 경로로 직접 찾아가야 했습니다.

./node_modules/.bin/my-package

그런데 이젠 그럴 필요가 없습니다. NPX가 설치한 경로를 찾아서 실행해주거든요!

npx my-package

CRA에서 NPX를 사용하는 이유

create-react-app 같은 경우에는 글로벌 모듈에 설치하면 좋습니다. 왜냐면 프로젝트 셋팅 도구이기에, 자주 사용될 수 있습니다. 따라서 로컬에 매번 설치하면 용량도 많이 차지합니다. (우리의 용량은 소중하잖아요?) 그런데, 글로벌 모듈로 설치할 경우 문제가 발생될 수 있습니다.

  1. 모듈이 업데이트 되었는지 안되었는지 파악 하기 불가능합니다. 그래서 글로벌 모듈로 설치된 모듈은 설치 당시 버젼을 사용하므로 버젼 파악을 따로 해줘야 하는 번거로움이 있습니다.
  2. 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있습니다. 프로젝트를 3개를 운영하는데, 같은 모듈의 각각 다른 버전이 필요한 상황이 있을 수 있습니다. 이럴 때 글로벌 모듈의 버전은 당연히 한 개이기 때문에 문제가 발생하게 됩니다.
  3. create-react-app 같은 보일러플레이트에는 치명적입니다. 리액트 프로젝트 생성 도구인 create-react-app 같은 모듈의 경우, 변경사항이 꽤나 잦은 모듈입니다. 그렇기 때문에 매 설치 전마다 npm으로 재 설치를 하지 않는 경우에는 이전 버전을 사용할 여지가 꽤 있습니다. 이런 프로젝트 생성 모듈은 매 업데이트마다 새로운 기능과 다양한 버그들이 고쳐집니다. 그리고 이런 보일러플레이트 같은 경우에는, 항상 최신 버전을 유지해 주는 것이 좋은데, 매번 설치하는 것이 꽤나 귀찮은 일입니다.

(출처 : https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx)

마무리

이상으로 간단하게 NPM과 NPX의 차이점에 관해 알아보고, CRA에서 NPX를 사용하는 이유를 알아보았습니다.

참고한 사이트

https://webruden.tistory.com/275
https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx
https://javascript.plainenglish.io/yes-its-npx-not-npm-the-difference-explained-58cbb202ec33

반응형