npm과 npx는 뭐가 다를까?

프론트엔드 개발을 시작하고 node.js를 설치한 후, react를 사용하다 보면 꼭 만나게 되는 두 명령어가 있습니다:
바로 npm과 npx입니다.

"둘 다 이름이 비슷한데 뭐가 다른 거지?", “둘 다 패키지를 설치하고 실행하는 거 아냐?”라고 생각하기 쉽지만,

햄스터와 갱스터가 비슷하지만 성격이 전혀 다르듯이
이 둘은 역할부터 동작 방식, 사용하는 목적까지 다르며, 번갈아가며 사용하는 경우가 많아 이번기회에 정리하고자 합니다.

---

npm

npm | Home

npm은 "Node Package Manager"의 줄임말로 Node.js를 설치하면 자동으로 같이 따라오는 javascript 기본 패키지 매니저입니다.

예를 들어 아래 명령어를 입력하면

npm install lodash

 

lodash라는 라이브러리가 node_modules/ 폴더아래에 설치되고
package.json과 package-lock.json에 lodash 패키지의 정보가 기록됩니다.

project/
├── node_modules/
│   └── lodash/
├── package.json
└── package-lock.json

즉, npm 은 프로젝트에 패키지를 설치할 때 사용합니다

"내 프로젝트에 라이브러리를 추가하고 계속 쓸 거야" → npm install ~

---

npx

npx는 "Node Package eXecute" 의 줄임말로 npm에 포함된 CLI 유틸리티 도구입니다.
(npm 5.2 이상부터 기본으로 제공합니다.)

npx는 패키지를 설치하지 않고 바로 실행할 수 있게 도와주는 도구이며 패키지를 일시적으로 설치한 뒤 실행 후 삭제합니다.

npx create-react-app my-app

 

 

즉, npx는 패키지를 설치하지 않고 바로 실행할 때 사용합니다. (필요하면 임시 설치-> 실행 후 삭제)

"이 라이브러리 한번만 실행하고 말 거야" → npx ~ 

---

npm install prettier

npx prettier .

---

언제 어떤 걸 써야 할까

프로젝트에 라이브러리를 설치하고 유지	npm
일회성 실행이 필요한 CLI 명령어를 사용	npx
전역 설치 없이 최신 CLI 버전을 빠르게 실행	npx

---

npm 패키지를 만들어보자

npm과 npx를 이해하기 위해 직접 나를 소개하는 간단한 npm package를 배포해서 npx로 바로 실행할 수 있게 만들어보자

node -v 처럼 neogul -v, -g 등 단축어까지 만들어서 바로 링크로 접속할 수 있도록 구현해 보았다.

open 라이브러리를 사용해 바로 링크로 페이지를 띄워주는 기능을 구현했고
https://www.npmjs.com/package/open

chalk 라이브러리를 사용해 CLI 텍스트에 색상을 입혀주었다.
https://www.npmjs.com/package/chalk/v/4.1.0

폴더구조

package.json 

{
  "name": "neogul02",
  "version": "1.0.0",
  "bin": {
    "neogul02": "./bin/index.js"
  },
  "dependencies": {
    "chalk": "^4.1.2",
    "commander": "^11.0.0",
    "open": "^9.0.0"
  }
}

index.js

#!/usr/bin/env node
const { program } = require('commander')
const chalk = require('chalk')

program
  .version('v0.1 - 2025.06')
  .option('-g, --github', 'open github')
  .option('-b, --blog', 'open blog')
  .option('-e, --email', 'display email')
  .option('-r, --resume', 'open resume')
  .option('-p, --portfolio', 'open portfolio')
  .parse(process.argv)

const options = program.opts()

const links = {
  github: { url: 'https://github.com/neogul02', label: chalk.blueBright('GitHub:') },
  blog: { url: 'https://neogul02.tistory.com', label: chalk.hex('#FF8800')('Blog:') },
  email: { url: 'wlsgud2414@naver.com', label: chalk.greenBright('E-mail:') },
  resume: { url: 'https://www.rallit.com/hub/resumes/1518972/%EC%B5%9C%EC%A7%84%ED%98%95', label: chalk.redBright('Resume:') },
  portfolio: { url: 'https://choe-jinhyeong.vercel.app', label: chalk.cyanBright('Portfolio:') },
}

async function openLink(url) {
  const open = (await import('open')).default
  open(url)
}

if (Object.keys(options).length === 0) {
  console.log(`
안녕하세요! 프론트엔드 개발자 최진형입니다.

${links.github.label} ${links.github.url}
${links.blog.label} ${links.blog.url}
${links.email.label} ${links.email.url}
${links.resume.label} ${links.resume.url}
${links.portfolio.label} ${links.portfolio.url}

더 많은 정보는 --help를 통해 확인해주세요.
  `)
} else {
  ;(async () => {
    for (const key in options) {
      if (links[key]) {
        if (key === 'email') {
          console.log(`${links.email.label} wlsgud2414@naver.com`)
          await openLink(links.email.url)
        } else {
          console.log(`${links[key].label} ${links[key].url}`)
          await openLink(links[key].url)
        }
      }
    }
  })()
}

두 파일을 작성한 후 필요한 라이브러리를 다운로드하아야 하기 때문에 패키지를 다운로드하여주면 node_modules폴더와 package-lock.json파일이 생성된다.

npm install

---

npm publish 

코드를 다 작성했으면 이제 npm package를 배포할 차례이다 자신 있게 전 세계 사람들에게 내 소개를 해보자

# 1 npm 로그인
npm login

# 2 배포
npm publish

# 3 test 
npx neogul02

 

neogul02

npx neogul02

npm install neogul02

npm install neogul02 로 로컬에 설치, npx neogul02 --? 로 바로 커멘드도 실행이 잘 되는 것을 볼 수 있다.

간단히 만들어둔 패키지이기 때문에 디벨롭해서 깃꾸할 때 써야겠다!