리액트 프로젝트를 만들 때 npx create-react-app [프로젝트이름] 을 한 번쯤은 써봤을 것이다. 이때 npx가 정확히 무엇인지 모르고 사용했는데, 이번 기회에 자세히 알아보고자 한다.
npm이란?
npm은 node package manager의 줄임말으로 알려져 있으며, node.js의 패키지를 관리할 수 있는 도구이다. 보통 node.js를 설치할 때 함께 설치되며 npm install ~~을 통해 패키지를 다운로드할 수 있다. 다운로드 된 파일들은 package.json 파일에 종속성이 기록되며, package-lock.json 파일에는 package.json 파일이 수정되거나 업데이트 될 때의 의존성 정보를 모두 가지고 있다.
npx는?
npx는 npm과 다른 관리 모듈이 아니다. npm의 5.2.0 버전부터 새로 추가된 실행기라고 생각하면 된다. npx는 npm 레지스트리에 올라가있는 패키지를 쉽게 설치하고 관리할 수 있도록 도와주는 CLI 도구이다. npm을 통해 설치하는 모든 종류의 Node.js 기반의 파일들을 간단하게 설치하고 실행할 수 있게 도와준다.
npx의 등장 이유
모든 명령어들은 존재 이유가 있다. npx(node package execute) 또한 그렇다. npm으로 패키지를 설치하면 두 가지 케이스가 있다.
1. -g 명령어를 붙여 전역으로 패키지를 설치해 의존성 라이브러리를 전체적으로 관리하는 방법
2. 특정 프로젝트에만 의존성 라이브러리를 설치하는 방법
전역으로 패키지를 설치해 관리하면 설치할 때는 편하겠지만, 뒤로 갈수록 문제가 생긴다. 가령, 업데이트 할 일이 생겼을 때 전체적으로 패키지를 업데이트를 해주면, 굳이 업데이트 할 필요없는 파일도 같이 업데이트 되어 버전 차이로 인한 문제가 생길 수 있다. 그리고 항상 최신 버전을 유지해주면 좋은 보일러플레이트 (최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드, ex) create-react-app)를 매번 설치해주는 것은 번거로운 일이다. 이를 해결하기 위해 npx가 등장했다. npx는 npm과 달리 일회성으로 원하는 패키지를 npm 레지스트리에 접근해서 실행시키고 설치하는 실행기이다. 내 패키지를 업데이트 하지 않아도 npm 레지스트리에 있는 최신 버전을 실행시키고 설치한다. 이렇게 실행하면 패키지를 디렉토리에 설치하지 않고 실행할 수 있다.
npx를 주로 사용하는 경우
1. npm run-script를 사용하지 않고 로컬에 설치된 패키지를 사용할 경우
2. 일회성 명령으로 패키지를 실행할 경우 (테스트를 진행할 경우에 유용)
3. gist-based scripts를 실행할 경우
4. 특정 노드 버전의 스크립트를 실행할 경우
아래 블로그에 예시가 잘 나와있으니 참고하면 도움이 될 것 같다.
https://webruden.tistory.com/275
yarn
yarn은 npm의 문제점을 해결하기 위한 node.js 모듈이다. npm은 패키지 배포와 종속성 관리가 쉽다는 장점이 있지만, 패키지가 중복으로 설치될 수 있다는 단점이 있다. 파일이 많아질 경우 이는 문제가 된다. 또 npm은 보안, 신뢰성, 안전성 및 속도 부분에서 단점이 있었다고 한다. yarn은 이 부분을 보완하기 위해 등장하였다. 현재는 npm도 여러 업데이트를 거쳐 앞서 언급한 문제들을 상당 해결했다고 한다.
npm | npx | yarn |
node.js 설치할 때 같이 설치 패키지 관리매니저로 패키지 배포와 설치, 삭제 및 업데이트, 종속성 관리에 용이하다. |
npm 5.2.0 버전 이상부터 있는 패키지 실행기 패키지가 로컬 및 전역 환경에 설치되어있다면 바로 실행이 가능하며, 없어도 npm 레지스트리에서 찾아 실행해준다. 위와 같은 특징 덕분에 패키지 테스트에 용이하다. |
npm이 가지고 있던 문제를 해결하기 위해 나온 패키지 매니저 npm을 통해 따로 설치해주어야 한다. 재설치의 경우, npm의 2배 정도 속도로 설치할 수 있다. (병렬적으로 설치하기 때문) |
'NODE.JS' 카테고리의 다른 글
[Node.js] package.json 이름 규칙 (String does not match the pattern of "^(?:@[a-z0-9-*~][a-z0-9-*._~]*/)?[a-z0-9-~][a-z0-9-._~]*$".) (1) | 2024.01.07 |
---|---|
[Node.js] Blocking과 Non-Blocking (0) | 2024.01.05 |
[Node.js] Node.js가 작업을 처리하는 방법 (0) | 2024.01.05 |
[Node.js] Node.js API와 브라우저 API의 차이 (1) | 2024.01.05 |
[Node.js] Node.js란? (1) | 2024.01.05 |