npx? npm? pnpm?

보통 React 앱을 만들 때 많이 쓰는 npx create-react-app simple-deploy 이 명령어, 문득

npx란 무엇일까?

라는 의문이 들었다.

npx란?

-      Node Package eXecute의 약자로
-      Node.js와 함께 설치되는 명령어 실행 도구
-      주로 패키지 실행에 쓰임

역할
🔹  글로벌 설치 없이 패키지 실행
그럼, 글로벌 설치란?
npm install -g create-react-app처럼 -g 옵션을 사용
글로벌 설치를 하면 내 컴퓨터 전체 어디서나 해당 패키지를 사용할 수 있게 됨
즉, 패키지가 내 컴퓨터의 글로벌 패키지 폴더에 영구적으로 설치됨
=> npx는 최신버전을 일시적으로 다운로드해서 바로 실행 후 사용 후에는 삭제함

🔹 일회성 실행
패키지를 설치할 필요 없이 바로 실행
패키지 다운로드를 안한다는 말은 X, 임시로 다운로드 후 자동으로 삭제

🔹 최신 버전 사용 보장

동작
1. npx가 create-react-app(패키지이자 명령어)을 찾아봄
먼저 로컬(현재 프로젝트의 node_modules)에 설치되어 있는지 확인
1-1. 로컬에 설치되어 있으면 그 버전 실행
1-2. 로컬에 설치 안 되어 있으면 글로벌로 설치된 패키지를 찾고,
1-3. 로컬에도, 글로벌에도 설치 X 되어 있으면? 
npm 레지스트리에서 최신 버전을 임시로 다운로드 해서 실행(다운로드된 패키지는 실행 후 자동으로 삭제됨)

npm과 npx의 차이점

특징	npm	npx
용도	패키지 설치 및 관리	패키지 실행
설치 방식	로컬(node_modules) 또는 글로벌 설치	설치 없이 임시로 다운로드 후 실행가능
예시	npm install react	npx create-react-app my app
영구성	영구적으로 남아있음	임시로 다운로드 후 사용 후 삭제
활용 시기	프로젝트에서 자주 사용하는 패키지 설치 시(여러 번 사용해도 재설치 필요 X)	일회성으로 사용하는 CLI(Command Line Interface) 도구나 최선 버전 사용 시

오케이 npm과 npx는 이렇게 다르군. 그럼 npm과 pnpm은 뭐가 다르지?

---

pnpm은 무엇일까?

pnpm이란?

🔹npm의 대안으로 나온 패키지 관리 도구

특징
🔹 하드 링크 사용
pnpm은 패키지를 공유폴더에 한번만 다운로드 한 후, 각 프로젝트의 node_modules에 하드링크 생성되면 이 하드링크는 pnpm-store에 있는 파일을 참조
공유폴더란?
▪️ 패키지 저장소라고 불리며, 모든 프로젝트들이 공통으로 사용하는 패키지들이 저장되는 곳
▪️ 기본적으로 **pmpm store**라고 불리는 폴더
▪️ ~/.pmpm-store 경로로 저장
보통 Mac, Linux에는 /Users/username/.pnpm-store에,
Windows에는 C:\Users\username\.pnpm-store에 위치함
=> 하드링크 사용(파일 복사본이 아닌 링크를 생성)으로 여러 프로젝트에서 같은 패키지를 설치해도, 중복 다운로드가 없고 디크스 공간 절약

🔹 모노레포 지원
모노레포란?
여러 개의 프로젝트를 하나의 Git 레포지토리에서 관리하는 방식
장점
- 공유코드 관리: 여러 프로젝트가 같은 코드를 쉽게 공유 가능(코드 재사용성)
- 의존성 일관성: 모든 프로젝트가 같은 버전의 패키지 사용가능
- 일관된 빌드 및 테스트 환경: 한 번에 모든 프로젝트를 빌드/테스트 가능(협업 효율성)
단점
- 리포지토리가 커지면 관리가 복잡해짐
- 빌드가 테스트 시간이 길어질 수 있음(모든 프로젝트를 다 빌드/테스트 해야함)

 

My-mororepo는 하나의 레포지토리
packages/ 안에는 여러 개의 프로젝트(a,b)가 있음
shared-Utills는 공통 코드를 담고 있는 패키지로, a,b 프로젝트가 모두 이 패키지를 공유할 수 있음

 

 

 

 

npm과 pmpm의 차이점

특징	npm	pmpm
설치방식	로컬 설치 시 모든 패키지를 복사	패키지들은 하드링크를 통해 공유됨
디스크 사용량	프로젝트마다 패키지 복사 -> 큼	중복 패키지는 공유 -> 절약
속도	복사와 중복 설치 -> 느림	공유된 패키지 사용 -> 빠름
모노레포 지원	기본 지원 아님(추가적으로 설치해야함)	기본적으로 모노레포 지원
명령어	npm install	pnpm install

---

몇 가지 의문점!

npm도 유저의 홈 디렉토리에 저장된다면, -g(글로벌) 설치와 같은 건가?

A: 프로젝트 간의 패키지들의 일종의 글로벌 저장소 역할을 하긴 하지만, 약간의 차이가 있음!

pnpm-store vs -g

특징	pnpm store	-g
저장 위치	~/.pnpm-store(사용자 홈 디렉토리)	/user/local/lib/node_modules 또는 C:\Users\<username>\AppData\Roaming\npm\node_modules
사용방식	하드링크로 연결(로컬 프로젝트의 node_modules)	시스템 전역에서 CLI 명령어로 사용가능
설치대상	모든 프로젝트에서 공통으로 사용하는 라이브러리 패키지	주로 CLI 도구(ex: eslint, create-react-app)
패키지 관리	pnpm이 내부적으로 관리, 중복 설치 감소	직접 설치/관리해야 하며, 중복설치 가능
자동삭제	사용하지 않는 패키지는 자동으로 삭제 가능(명령어 - pnpm store prune)	수동으로 삭제해야 함

---

평소에 아무 생각없이 npm, npx, pnpm 어디서 사용하라고 하는 명령어 복붙해왔었는데, 정확히 어떤 게 다르고 어떻게 작동하는지 알고 싶어서 공부해봤다.
chat-pgt 작년까지만 해도 이상한 답변을 많이 내놨는데 이젠 꽤 믿음직스럽고 공부하기에 아주 좋은 것 같다.