npm과 npx의 차이

프론트엔드를 공부하면서, 백엔드를 공부하면서
vscode 터미널이나 명령프로젝트 등에 npm과 npx의 관한
코드를 아무 생각없이 수도 없이 수도 없이 쳤다.

그러다 eslint를 공부하며 라이브러리를 설치하다 문득 떠올랐다.
이 npm 과 npx 가 정확하게 뭐지?
어떤 차이가 있지?

이렇게 시작된 npm과 npx 공부
DFS식 공부법 시작.

---

⚀ npm?

npm은 Node Packaged Manager의 약자이다.
즉, Node.js로 만들어진 패키지들을 관리하는 프로그램이다.

정의는 그래 그렇다 치자!
그래서 이걸 이용해서 뭘 할 수 있는데?

---

🂡 npm init

npm init은 npm의 초기환경을 설정해줄 수 있는 package.json을 만들어준다.

필자는 귀찮기 때문에 npm init을 사용하지 않고 npm init -y를 사용한다.
이유는 설치하기 전 귀찮은 질문들이 있는데 그것을 자동으로 기본값으로 답해준다.
(해보기 전까진 모르니, 한 번은 해보길 추천해요ㅎㅎ)

어떤 환경들을 설정할 수 있는지 알아보자.

{
  "name": ["패키지 이름"],
  "version": "0.0.1",
  "description": "Hello My Project is awesome"
  "main": "index.js",
  "script": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Injae",
  "license": "ISC"
}

설치하게 되면 다음과 같은 값들이 설정되는데 무엇을 의미하는 것일까?

• name : 패키지 이름
• version : 패키지의 버전
• description : 패키지의 설명
• main : 자바스크립트 실행 파일 진입점(처음 js가 시작하는 곳)
• script : npm 명령어 저장하는 곳 (npm run [스크립트 명령어]로 실행)
  • ex) npm run test를 하게 되면 오른쪽 문자열이 출력
• author : 패키지 만든 사람
• license: 라이선스 종류 (ISC, MIT, BSD, GPL...)

그 외의 것들도 더 있는데 다음을 알아보며 차근차근 더 알아보자!

---

🂢 package.json & package-lock.json

package.json이 초기환경을 설정해주는 것 말고도 중요한 존재이유가 있다.

그 이유는 예를 들어,
A라고 만들어진 패키지가 오로지 자신의 힘만으로 만들어졌다면 필요없었을수도 있지만
A라는 패키지는 B, C 패키지를 이용해서 만들어졌고
B라는 패키지는 C, E라는 패키지를 이용해 만들어졌다.

그게 무슨소리냐고???

여기서 문제!
나는 A라는 패키지와 B라는 패키지가 필요해 둘 다 설치했다.
하지만 A라는 패키지를 깔면 B를 적용한 A라는 패키지가 설치되기 때문에
A에 적용된 B패키지와 내가 새로 설치한 B라는 패키지에
버전 등과 관련해 호환에 문제가 생기지 않을까?

이를 해결할 수 있는 것이 package.json과 package.lock.json이다.

자신이 설치한 패키지들은 package.json에 기록되고,
그 패키지들이 만드는데 필요한 의존성이 있는 패키지는 package-lock.json에 기록되어 문제가 생기지 않도록 한다.
그러하기 때문에 package.json이 꼭 필요하다!!!

---

🂣 npm install

필요한 패키지들을 설치하는데는 두 가지 방법이 있다.

터미널에 npm install [필요한 패키지들 나열] 하는 방식과,
package.json에 아래와 같이 추가하여 npm install 명령어로 추가하는 방식이 있다.

"dependencies": {
  	"자신이 필요한 패키지": "패키지의 버전"
  	"express": "^4.17.3",
}

그 외에도, npm install --save-dev [패키지] 가 있는데,
이는 다른 npm install 과 다르게
설치한 패키지가 실제 배포시에는 사용되지 않고, 개발 중에만 사용된다.
때문에, 이를 구별하기 위해 package.json에도 다른 방법으로 구분한다.

"devDependencies": {
  	"자신이 필요한 패키지": "패키지의 버전"
  	"nodemon": "^2.0.16",
}

정확한 버전 설정이 필요한 경우, 후자의 방식을 추천한다!

그리고 TMI로 패키지를 설치하게 되면 간혹 색깔있는 글씨 메시지를 볼 수 있는데,
이는 npm이 패키지를 설치할 때, 패키지에 있는 취약점들을 검사하는데,
[숫자] [심각도] severity vulnerability 그것이 다음과 같이 나오는 것이다.
(큰 문제가 아니라면 무시해도 좋을 것 같다...?)

---

🂤 etc.

그 외에도 npm에는 여러가지 명령어들이 있다.

npm outdated : 설치한 패키지 업데이트 가능 여부 확인
npm uninstall [패키지 이름] : 설치한 패키지 삭제
npm publish : 만든 패키지 배포
npm unpublish : 배포한 패키지 제거

---

⚁ npx?

npx는 Node Packaged eXecute 약자이다.
즉, Node.js로 만들어진 패키지를 설치하고 실행시키는 프로그램이다.

npx는 npm의 단점들을 보완하기 위하여 나온 것으로,
주요기능은 패키지를 설치하여 실행시키는 것이다.
엥? npm install이랑 뭔 차이지????

이것은 npm과 npx의 설치 및 실행방식에 있는데
npx에 대해서는 npm과 차이점을 얘기하면서 더 구체적으로 얘기하겠다.

---

⚂ npm과 npx의 차이

방금 전에, npx는 npm의 단점들을 보완하기 위해 나온 것이라고 했는데,
어떤 단점들이 있어 npx가 나온 것일까?

1. 프로젝트간 의존성 충돌
npm install이나 npm install -g를 통해 패키지를 설치하게 되면,
패키지가 프로젝트에 설치되거나 전역으로 설치가 된다.
이렇게 되면 간혹 의존성 문제로 인해 패키지가 충돌될 우려가 있고
각 프로젝트가 사용하는 패키지의 버전을 일치시키기가 어려울 수 있다.
하지만 npx는 패키지를 일시적으로 다운로드하여 실행하기 때문에
로컬에 전역 설치를 하지 않아도 되어 이를 해결할 수 있다.

2. 편의성 제공
npm은 패키지를 설치하고 실행하기 위해서는
npm install로 설치를 하고 package.json에 등록하여 실행해야한다.
따라서 일회성으로 사용하려는 경우에도 번거로울 수 있다.
하지만, npx는 패키지를 일시적으로 다운로드하여 실행하는 과정으로
한 단계로 간소화하여 편의성을 제공한다.

위 두 차이점에서도 나와있듯이,
npx의 가장 큰 기능은 패키지를 일시적으로 다운로드하여 실행하는 것이다.

결론적으로 npm이 좋다 npx의 좋다의 문제가 아니라,
npx는 npm의 주요 기능들 중 하나이고,
npm install과 npx를 이용하여 설치하는 것은 각 상황에 맞게 이용하면 된다.
(그 상황을 정확하게 알기까지 많은 고난이 있을테지만....🥲)

오늘도 이 글로 인해 누군가에게 도움이 되었으면 한다 🌈🙏

잘못된 내용이 있다면 답글 부탁드립니다:)