> 웹 프론트엔드 > JS 튜토리얼 > npm vs. npx: 차이점은 무엇인가요?

npm vs. npx: 차이점은 무엇인가요?

Patricia Arquette
풀어 주다: 2024-12-20 15:57:19
원래의
715명이 탐색했습니다.

Fimber Elemuwa 작성✏️

JavaScript 또는 Node.js로 작업할 때 노드 패키지 관리자인 npm을 접했을 가능성이 높습니다. 패키지를 관리하고, 종속성을 설치하고, 프로젝트에 필요한 라이브러리를 최신 상태로 유지하는 데 꼭 필요한 도구입니다. 그런데 npm과 함께 번들로 제공되는 또 다른 도구인 npx가 있는데, 이 도구는 종종 다음과 같은 질문을 불러일으킵니다. 둘 사이의 차이점은 무엇인가요?

언뜻 보기에는 npm과 npx 모두 Node.js 패키지와 상호 작용하는 데 도움이 되는 것처럼 보이지만 서로 다른 용도로 사용됩니다. 이 기사에서는 npm과 npx의 주요 차이점을 분석하고, 작동 방식을 보여주고, 각각의 사용 시기를 살펴보겠습니다.

새 프로젝트를 설정하거나, 스크립트를 실행하거나, npm과 npx를 언제 사용해야 하는지 궁금하다면 이 가이드를 통해 두 도구를 이해하고 개발 워크플로에 어떻게 적용할 수 있는지 알아볼 수 있습니다.

npm이란 무엇입니까?

npm은 Node Package Manager의 약자이며 말 그대로 Node.js 패키지를 관리하는 도구입니다. 프로젝트에 새로운 "패키지"가 필요할 때마다 npm을 사용하여 설치에 도움을 받을 수 있습니다. 이러한 패키지는 작은 유틸리티 기능부터 본격적인 프레임워크 및 라이브러리까지 다양합니다.

하지만 npm은 단지 라이브러리 설치만을 위한 것이 아닙니다. 프로젝트 종속성 및 스크립트를 관리하는 데에도 좋습니다. 주요 변경을 방지하기 위해 특정 버전의 라이브러리를 잠가야 하는 경우 npm이 해결해 드립니다. 또한 package.json 파일에 스크립트를 정의하여 프로젝트 테스트 또는 빌드와 같은 일반적인 작업을 자동화할 수도 있습니다.

npm 작동 방식

npm을 소프트웨어 구성 요소의 디지털 저장소로 생각해보세요. 새로운 Node.js 프로젝트를 시작할 때 이를 빌드하려면 다양한 도구와 라이브러리가 필요합니다. 바퀴를 다시 만드는 대신 npm을 사용하여 사전 빌드된 패키지를 가져와 설치할 수 있습니다. 각각 고유한 이름과 버전을 가진 방대한 온라인 패키지 레지스트리를 유지 관리함으로써 작동합니다.

npm install 명령을 사용하면 npm은 지정된 패키지와 해당 종속성을 다운로드하여 모든 프로젝트 종속성과 버전이 추적되는 중앙 위치인 node_modules라는 로컬 디렉터리에 배치합니다. 로컬 설치는 패키지를 설치한 프로젝트 내에서만 패키지를 사용할 수 있음을 의미합니다. 명령은 다음과 같습니다.

npm install <package-name>
로그인 후 복사
로그인 후 복사

예를 들어 프로젝트에 cowsay 라이브러리를 추가하려면 다음을 입력합니다.

npm install cowsay
로그인 후 복사
로그인 후 복사

이 디렉터리는 프로젝트에 액세스할 수 있으므로 코드에서 패키지 기능을 사용할 수 있습니다. 전역 설치를 통해 전체 시스템에서 패키지를 사용할 수 있으므로 모든 프로젝트에 사용할 수 있습니다. 이는 어디에서나 실행하려는 명령줄 도구에 유용합니다.

간단한 패키지 설치 외에도 npm은 각 패키지에 대한 버전 제어 기능도 제공하므로 원하는 정확한 버전을 지정할 수 있습니다. 이는 최신 버전의 주요 변경 사항으로 인해 발생할 수 있는 문제를 방지하는 데 중요합니다.

또한 npm은 package.json 내에서 스크립트를 정의하는 방법을 제공합니다. 스크립트는 서버 시작, 테스트 실행, 프로젝트 빌드와 같은 작업을 자동화하는 명령입니다. package.json에서 다음과 같은 스크립트를 정의할 수 있습니다.

npm install <package-name>
로그인 후 복사
로그인 후 복사

npx 란 무엇입니까?

npx는 npm v 5.2.0과 함께 도입되었습니다. npm이 패키지 설치 및 관리에 관한 것이라면 npx는 패키지 실행에 관한 것입니다.

npx를 Node.js 패키지를 설치하지 않고도 실행할 수 있는 빠른 명령 실행기로 생각해보세요. npx는 패키지를 한 번만 사용하거나 시스템에 영구적으로 추가하지 않고 테스트하려는 경우에 특히 유용합니다.

npx 이전에는 패키지의 명령줄 도구를 사용하려면 먼저 전역적으로 설치해야 했습니다. npx는 전역 설치 없이 npm 레지스트리에서 직접 도구를 실행할 수 있도록 하여 이를 단순화합니다.

npx 작동 방식

npx로 명령을 실행하면 먼저 로컬 node_modules 디렉터리를 확인합니다. 거기에서 패키지가 발견되면 실행됩니다. 그렇지 않은 경우 npx는 패키지를 임시로 설치하고 실행한 다음 제거합니다. 즉, 시스템을 복잡하게 만들지 않고도 다양한 도구를 사용할 수 있습니다.

create-react-app을 사용하여 새 React 프로젝트를 시작한다고 가정해 보겠습니다. 일반적으로 먼저 전역적으로 설치해야 합니다.

npm install cowsay
로그인 후 복사
로그인 후 복사

그런 다음 다음을 실행합니다.

{
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  }
}
로그인 후 복사

그러나 npx를 사용하면 전역 설치를 건너뛰고 직접 실행할 수 있습니다.

npm install -g create-react-app
로그인 후 복사

이 명령은 create-react-app을 다운로드하고 실행한 후 완료되면 삭제합니다. 빠르고 편리하며 한 번만 사용할 수 있는 글로벌 패키지로 인해 시스템이 복잡해지는 것을 방지할 수 있습니다.

이미 프로젝트에 로컬로 패키지를 설치한 경우 npx를 사용하면 node_modules에 대한 전체 경로를 지정하지 않고도 패키지를 실행할 수 있습니다. 예를 들어 테스트를 위해 Jest를 로컬에 설치한 경우 다음과 같이 npx를 사용하여 실행할 수 있습니다.

create-react-app my-app
로그인 후 복사

npx는 자동으로 로컬 node_modules 폴더에서 패키지를 찾아 실행하므로 시간과 번거로움이 줄어듭니다.

npx의 가장 멋진 기능은 실행하려는 패키지나 명령을 파악하는 기능이라고 생각합니다. 명령 실행 방법을 결정하려면 다음 3단계 프로세스를 따르세요.

  • 로컬에서 확인: npx는 먼저 패키지가 프로젝트의 node_modules 폴더에 로컬로 설치되어 있는지 확인합니다. 패키지를 찾으면 거기에서 실행됩니다
  • 전역적으로 확인: 패키지가 로컬에서 발견되지 않으면 npx는 해당 패키지가 시스템에 전역적으로 설치되어 있는지 확인합니다. 전역적으로 패키지를 찾으면 실행합니다
  • npm 레지스트리에서 가져오기: 마지막으로 npx가 로컬 또는 전역적으로 패키지를 찾지 못하면 npm 레지스트리에서 패키지를 가져와 실행한 다음 실행 후 제거합니다

주의, 기본적으로 npx는 최신 버전의 패키지를 실행하지만 특정 버전이 필요한 경우 실행할 버전을 알려줄 수도 있습니다.

npm과 npx의 주요 차이점

npm과 npx는 둘 다 Node.js 생태계에서 중요한 도구이지만 서로 다른 수준에서 서로 다른 역할을 합니다.

Feature npm npx
Purpose and functionality Primarily used for installing packages from the npm registry and managing dependencies in Node.js projects. It helps in adding, removing, and updating packages, and maintaining package versioning Designed to execute Node packages directly without needing to install them globally. It allows users to run packages without cluttering the global or project-specific `node_modules`
Package installation Installs packages locally or globally Executes packages temporarily without installing them permanently
Temporary usage Installation with npm persists until explicitly removed. Packages remain in `node_modules` or globally installed paths Runs packages temporarily and discards them after execution unless otherwise specified
Usage `npm install ` `npx `
Script setup Requires modifications to `package.json` to create custom scripts No modifications needed in `package.json` for running commands
Execution of CLI tools Must install CLI tools globally or locally before using them Can run CLI tools directly from the npm registry without prior installation
Project setup Typically used for project setup involving multiple dependencies and versions. Ideal for quick project scaffolding or one-time command execution, like `create-react-app`
Node.js compatibility Bundled with Node.js for general project and package management Included with Node.js starting from v 8.2.0, streamlining the execution of packages

결론: npm과 npx를 언제 사용해야 합니까?

npm 또는 npx를 언제 사용할지 결정하는 것은 작업과 프로젝트 요구 사항에 따라 다릅니다.

개발이나 프로덕션에 중요한 프로젝트 종속성을 설치하고 관리해야 하는 경우 npm을 사용해야 합니다. npm은 패키지가 package.json에 나열되도록 보장하므로 프로젝트 내에서 버전 관리 및 일관성을 완벽하게 제어할 수 있습니다. 또한 package.json에 정의된 스크립트를 실행하기 위한 유용한 도구이므로 서버 구축, 테스트 또는 실행과 같은 작업에 이상적입니다.

반면에 npx는 전역 설치 없이 빠른 일회성 명령이나 테스트 도구에 가장 적합합니다. React 프로젝트 부트스트래핑을 위한 create-react-app과 같은 도구를 한 번만 사용하려는 경우 npx를 사용하면 시스템을 복잡하게 하지 않고 직접 실행할 수 있습니다. 또한 전체 경로를 입력하지 않고도 로컬에 설치된 패키지를 실행하는 데 편리하여 작업 흐름을 단순화합니다. 즉, 장기적인 종속성 관리에는 npm을 사용하고 임시 작업이나 즉시 패키지 실행에는 npx를 사용하세요.


200개만 ✔️ 프로덕션에서 실패하고 느린 네트워크 요청을 모니터링합니다.

노드 기반 웹 앱이나 웹사이트를 배포하는 것은 쉬운 일입니다. Node 인스턴스가 계속해서 앱에 리소스를 제공하는지 확인하는 것은 상황이 더 어려워집니다. 백엔드 또는 타사 서비스에 대한 요청이 성공하는지 확인하려면 LogRocket을 사용해 보세요.

npm vs. npx: What’s the difference?

npm vs. npx: What’s the difference?

LogRocket은 웹 앱용 DVR과 같아서 사이트에서 일어나는 모든 일을 말 그대로 기록합니다. 문제가 발생한 이유를 추측하는 대신 문제가 있는 네트워크 요청을 집계하고 보고하여 근본 원인을 빠르게 이해할 수 있습니다.

LogRocket은 앱을 계측하여 페이지 로드 시간, 첫 번째 바이트 도달 시간, 느린 네트워크 요청과 같은 기본 성능 타이밍을 기록하고 Redux, NgRx 및 Vuex 작업/상태도 기록합니다. 무료로 모니터링을 시작해 보세요.

위 내용은 npm vs. npx: 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿