전체 치트시트프런트엔드 개발

npx

npx 10+ (shipped with npm)

npx 명령어 빠른 참조 — 일회성 패키지 바이너리 실행, 프로젝트 스캐폴딩, npx 캐시 관리, 버전 고정, 인터랙티브 CLI 함정 회피 — 자주 쓰는 옵션과 실전 예시까지 함께 정리했습니다.

명령어 25개

일회성 바이너리 실행

npx <pkg>

`node_modules/.bin`에 없으면 `<pkg>`의 최신 버전을 다운로드해 CLI 진입점을 실행하고, 임시 캐시를 정리합니다.

<pkg>@<version> 고정; --yes / -y 설치 프롬프트 자동 확인; --package <pkg> PATH에 별도 패키지 추가

npx cowsay hello

npx <pkg>@<version>

일회성 실행에 사용할 버전을 고정합니다. `@<version>` 문법은 npm install처럼 semver 범위 또는 dist-tag를 사용합니다.

npx create-vite@latest my-app --template vue && npx [email protected] tsc --init

npx -y <pkg>

다운로드 시 확인 프롬프트를 건너뜁니다 — CI에서 필요하며 반복 가능한 셸 스크립트에서도 유용합니다.

npx -y http-server . -p 8080

프로젝트 스캐폴딩

npx create-vite <name>

Vite 앱(Vue / React / Svelte / vanilla)을 스캐폴딩합니다 — 빠른 스캐폴딩으로 CLI 의존성이 프로젝트에 들어가지 않습니다.

npx create-vite my-app --template vue-ts

npx create-next-app <name>

선택한 라우터(App Router 또는 Pages Router), TypeScript 플래그, ESLint, Tailwind, `src/` 배치를 사용해 Next.js 앱을 스캐폴딩합니다.

--typescript; --tailwind; --eslint; --app; --src-dir; --import-alias "@/*"

npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir

npx create-react-app <name>

CRA 스타일 React 앱을 스캐폴딩합니다(CRA 자체는 유지보수 모드이지만, 레거시 프로젝트와 빠른 데모용으로 바이너리는 동작).

--template typescript; --use-npm | yarn | pnpm

npx create-react-app my-app --template typescript

로컬 node_modules에서 실행

npx <bin>

현재 `node_modules/.bin`에 `<bin>`이 이미 있으면 npx는 아무것도 가져오지 않고 실행합니다. 로컬에 설치된 개발 도구를 실행하는 권장 방법입니다.

npx eslint src/ && npx tsc --noEmit && npx vitest run

npx --no-install <bin>

레지스트리에서 가져오지 말고 실패하도록 강제합니다 — CI에서 누락된 로컬 의존성을 감지할 때 유용합니다.

npx --no-install eslint src/

GitHub 호스트 패키지

npx github:user/repo

GitHub 리포지터리의 `main` 브랜치에서 바이너리를 직접 실행합니다 — 일회성 테스트 릴리스에 유용합니다.

npx github:user/my-cli-tool --help

npx user/repo#<branch|tag|sha>

GitHub 리포지터리의 특정 ref로 고정합니다.

npx user/repo#v1.2.3 --flag

npx gist:<gist-id>

GitHub gist로 호스팅된 스크립트를 실행합니다. 공유 유틸리티에 유용하지만 보안 영향에 주의하세요 — 누구나 임의의 gist를 실행할 수 있습니다.

npx gist:abcd1234efgh5678

로컬 스크립트

npx <script.js>

Node로 단일 자바스크립트 파일을 실행하며, `require`/`import` 해석을 위해 로컬 `node_modules`를 사용합니다. `node script.js`보다 편리합니다.

npx ./scripts/seed.ts

npx tsx <script.ts>

`tsx`(또는 `ts-node`)로 TypeScript 파일을 직접 실행합니다. `tsx`가 로컬에 설치되어 있어야 합니다.

npx tsx scripts/migrate.ts --dry-run

PATH의 패키지

npx --package=<pkg1> --package=<pkg2> <cmd>

실행 시 추가 패키지를 PATH에서 사용할 수 있게 합니다. 직접 `npm install`되지 않은 부수 의존성에 의존하는 러너에 유용합니다.

npx --package=typescript --package=@types/node tsc --init

캐시 제어

npx --clear-cache

npx 패키지 캐시(POSIX는 `~/.npm/_npx`, Windows는 `%LocalAppData%\npm-cache\_npx`)를 비워 다음 실행에서 레지스트리에서 다시 받게 합니다.

-y 프롬프트 건너뛰기; --no 가져오기 테스트

npx --clear-cache && npx -y create-next-app@latest demo

ls ~/.npm/_npx

캐시된 패키지를 수동으로 검사합니다 — 각 하위 디렉터리가 자체 `package.json`과 `node_modules`를 가진 해석된 지정자 하나입니다.

ls -la ~/.npm/_npx && du -sh ~/.npm/_npx/*

고정 동작

npx --always

같은 이름의 로컬 바이너리가 있어도 레지스트리에서 가져오도록 강제합니다. 프로젝트 의존성과 무관하게 최신 업스트림 릴리스를 원할 때 유용합니다.

-y 설치 프롬프트 자동 수락

npx --always --package=eslint eslint --version

npx -p <pkg> -c '<cmd>'

작업 디렉터리를 설정하고 단일 호출에 `<pkg>`를 PATH에서 사용합니다. 설치가 완료되면 `<cmd>`가 실행됩니다.

npx -p [email protected] -c 'tsc --init && tsc'

인터랙티브 CLI

npx -y <scaffold> <name>

대부분의 현대 스캐폴드(`create-vite`, `create-next-app`, `create-nuxt-app`)는 `npx -y`로 실행될 때를 자동 감지해 설치 확인 프롬프트를 건너뜁니다.

--typescript / --javascript / --template <name>

npx -y create-nuxt-app my-site

샌드박스 플래그

npx --shell-auto-fallback <bash|zsh|...>

Windows / 비표준 POSIX 환경에서 스크립트 실행에 사용할 셸에 대한 npx 자동 감지를 재정의합니다.

npx --shell-auto-fallback bash

npx --ignore-scripts

npx가 일회성 패키지를 설치할 때 lifecycle 스크립트(postinstall / preinstall)를 건너뜁니다. 익숙하지 않은 specifier에 더 안전합니다.

npx --ignore-scripts -y some-cli --help

즉석에서 패키지 업그레이드

npx --package <pkg>@latest -- <cmd>

로컬 설치와 무관하게 `<pkg>`의 최신 사용 가능 버전을 사용해 명령을 실행합니다.

npx --package npm-check-updates -- ncu -i

검사

npx --version

npx 버전을 출력합니다(번들된 npm과 일치).

npx --version

npx --help

npx가 받는 모든 플래그를 나열합니다.

npx --help

대안

npm exec -- <pkg> [args]

`npx <pkg>`의 현대 npm 동등 명령. `npm exec`는 동일한 인자를 받으며 일부 npm 문서에서는 `npx`보다 권장되지만, `npx`가 더 짧고 보편적입니다.

--package <pkg>; --yes / -y; --call=<cmd>; --workspaces

npm exec -- create-vite@latest demo --template vue

상표 및 사용 안내

본 명령줄 도구 치트시트 모음은 오픈 커뮤니티 참고 자료입니다. 본 문서에서 언급되는 도구의 명칭, 로고, 상표(예: Git™, Docker™, Kubernetes®, kubectl, PostgreSQL®, MySQL®, Redis™, MongoDB®, Linux™, PowerShell™, Vim™ 등)는 각 권리자의 자산이며, 본 문서에서는 식별 및 참고 목적のみで 사용됩니다.

본 치트시트의 모든 내용은 독립적으로 작성된 단순화된 자체 완결형 참고 자료이며, 어떠한 공식 문서와도 계열·인정·출처 관계가 없습니다. 명령 목록, 플래그 설명, 예제는 모두 저자의 원본 단순화이며, 권위 있는 정보가 필요한 경우 각 도구의 공식 문서를 참조하시기 바랍니다.

명령 구문 및 옵션 플래그는 도구 버전에 따라 다를 수 있습니다. 표시되는 버전 태그는 안정 릴리스를 반영하며, 다른 버전에서는 동작이 다를 수 있습니다. 본 치트시트는 상표권자의 어떠한 선호나 권장도 의미하지 않습니다.

본 사이트는 사이트 정보의 이용으로 인해 발생하는 어떠한 직접적 또는 간접적 손해에 대해서도 법적 책임을 지지 않습니다.

npx 소개

npx는 npm 5.2(2017)부터 Node.js 7.0+에 동봉되어 제공되는 패키지 러너입니다. 먼저 `node_modules/.bin`에서 명령을 찾고(항상 프로젝트에 설치된 버전과 일치), 없으면 npm 레지스트리에서 임시 캐시(`~/.npm/_npx`)로 패키지를 받아 한 번 실행한 뒤 정리합니다. 현재 npx는 npm 10에 동봉됩니다. npx는 프로젝트 의존성을 오염시키지 않고 스캐폴딩 도구(`create-react-app`, `create-next-app`, `create-vite`)를 실행하는 정석 방법입니다. GitHub 스타일 지정자(`github:user/repo`, `user/repo`)와 GitHub gist도 지원합니다. npm 7+부터 `npx`는 대부분 `npm exec --`의 래퍼입니다(`npm exec`는 한때 de deprecated 후 다시 복귀). npx는 소스 코드를 어디에도 전송하지 않으며, 레지스트리에서만 다운로드합니다. npm 레지스트리는 `npmjs.com`에서 볼 수 있는 집계 다운로드 카운트를 기록합니다. 프로젝트의 로컬 툴체인과 충돌하지 않고 항상 최신 또는 명시적으로 고정한 버전을 실행하므로 수동 글로벌 설치보다 권장됩니다.

치트시트 버전 1.0.0

npx