프로젝트 개발을 하다보면 npm install, npx install 둘의 차이가 정확히 무엇인지 궁금해진다.
특히 npm의 경우 node package manager의 줄임말로 pnpm, yarn, yarn-berry 등 다양한 노드 패키지 관리 도구가 있기 때문에, npx가 명확히 무엇이고, yarn과 혼합해서 사용해도 되는지에 대한 의문이 생긴다.
npm
기본적인 npm은 말 그대로 노드 패키지 관리자로, 매 프로젝트마다 node_modules 폴더를 만들어 모듈을 관리해준다. 이 경우에는 매 프로젝트마다 모듈을 다운받아 관리하기 때문에 그 용량이 매우 커질 가능성이 있다.
이를 위한 npm 옵션이 존재하는데,
npm install 모듈이름 -g
바로 -g 옵션이다. 이를 이용하면 모듈을 글로벌로 사용할 수 있다.
pnpm
이와 비슷한 개념이 pnpm이라고 할 수 있다. pnpm의 경우에는 노드 모듈들을 글로벌로 관리해주기 때문에 디스크 용량을 아낄 수 있다.
하지만 이러한 노드 모듈들의 글로벌 관리에는 여러 단점들이 존재한다.
단점
가장 큰 단점은 각 모듈들의 버전 관리가 불가능하다는 점이다. 각 프로젝트마다 필요한 버전이 다르고, 모듈이 업데이트가 될 가능성도 있기 때문에 이에 대한 관리가 필요하다.
create-react-app 같은 보일러플레이트는 업데이트가 잦기 때문에 이러한 경우에는 관리하기 매우 어렵고 귀찮아진다. 특히 이런 보일러플레이트 같은 경우에는, 항상 최신 버전을 유지해 주는 것이 좋기 때문에 글로벌로 관리하기 어렵다.
npx
이러한 부분을 해결해주는 것이 npx이다. npx는 npm과 다르게 모듈을 로컬에 설치하지 않고 아주 잠깐만 실행시킨 후 사라진다. 또한 최신 버전만 가져와서 설치하기 때문에 따로 버전관리를 해줄 필요가 없다. create-react-app과 같은 보일러 플레이트에는 특히 효과적이라고 할 수 있다.
결론
npx는 결국 글로벌 npm 사용의 단점을 줄여주기 위해 만들어졌다고 할 수 있다. npx와 npm의 가장 큰 차이점은 로컬에 저장되느냐, 아니면 사라지느냐인 것 같다. 또한 설치 후 사라지기 때문에 yarn과 혼합해서 사용해도 상관없다.
'frontend' 카테고리의 다른 글
[JavaScript] task queue와 micro task queue (0) | 2024.11.01 |
---|---|
[frontend] 모노레포와 프론트엔드의 마이크로 아키텍쳐 (1) | 2024.10.14 |
[frontend] HMR란 무엇이고 프론트엔드 개발에서 왜 중요할까? (1) | 2024.10.06 |
[CSS] px, em, rem 차이와 rem이 유연한 페이지에 유리한 이유 (2) | 2024.09.30 |
[frontend] 웹 페이지 렌더링 방식 SSR, CSR, SSG 이해하기 (0) | 2024.09.09 |