[React] NPM, NPX, YARN

1. NPM(Node Package Manager)

NPM은 Node.js와 함께 제공되는 패키지 관리 도구

Node.js 애플리케이션에서 필요한 패키지 설치, 제거, 업데이트, 실행 등을 간편하게 처리 가능

주요 기능

1. 패키지 설치
   • 실행 환경에서 필요한 패키지 설치(Dependencies)
     • npm install <package_name> --save (또는 생략 가능)
   • 개발 환경에서만 필요한 패키지 설치(DevDependencies)
     • npm install <package_name> --save-dev 또는 -D
2. 패키지 제거: npm uninstall <package_name>
3. 패키지 업데이트: npm update <package_name>
4. 패키지 실행: npm run <script_name>
5. 글로벌 패키지 관리
   • 설치: npm install -g <package_name>
   • 제거: npm uninstall -g <package_name>
6. 패키지 초기화: npm init으로 프로젝트 초기화 및 package.json 파일 생성
7. 프로젝트 생성: npm create <package_name>으로 내부적으로 npx를 사용하여 프로젝트 생성

---

Dependencies와 DevDependencies

package.json 파일에서 확인 가능

• Dependencies: 애플리케이션 실행 또는 빌드 시 필요한 패키지
  • 예: React, Express
• DevDependencies: 개발 환경에서만 필요한 패키지
  • 예: 린터, 테스트 도구
• 프로젝트 설치 시 이 둘을 구분해서 설치 필요 ⇒ 빌드 시 참조하기 때문

✅ but, 최근 빌드 도구의 발전으로 devDependencies에 설치된 패키지도 필요하다고 판단 시 자동으로 빌드에 포함
⇒ 하지만 명확한 구분 설치가 좋은 관행

🤔 어디에 설치해야 되는지 구분 방법
공식문서에서 설치 방법 확인
ex) —save-dev, —save

---

NPM 특징

• node.js와 함께 설치
• ".npmrc" 파일을 통해 설정 가능
• "package-lock.json" 파일을 사용하여 패키지 버전을 고정(건들 ❌)

2. NPX(Node Package Execute)

노드패키지 실행 담당

Node.js 설치 시 함께 제공되며, 일회성 패키지 실행과 특정 버전 실행에 유용

주요 기능

1. 일회성 패키지 실행
   • 패키지가 없으면 설치 후 실행: npx <package_name>
   • 패키지가 존재하면 바로 실행
2. 특정 버전 실행
   • 예: npx <package_name>@<version>

---

NPX의 특징

• 로컬/글로벌 설치 없이 실행 가능: 임시적으로 패키지를 설치하여 실행
• 개발 의존성 감소: 불필요한 글로벌 설치를 줄이고 필요할 때만 패키지를 실행

---

3. YARN

YARN은 페이스북에서 개발한 병렬 설치 기반 패키지 매니저임

npm은 싱글스레드 기반이라 한 번에 한 작업밖에 못해 시간이 오래 걸림

YARN은 더 빠르고 안정적인 패키지 관리 환경 제공

주요 기능

1. 패키지 설치
   • 로컬: yarn add <package_name>
   • 전역: yarn global add <package_name>
2. 패키지 제거
   • 로컬: yarn remove <package_name>
   • 전역: yarn global remove <package_name>
3. 패키지 업데이트: yarn upgrade <package_name>
4. 패키지 실행: yarn run <script_name>

---

YARN의 특징

1. 병렬 설치: 패키지를 병렬로 설치하여 빠른 속도로 처리
2. 오프라인 모드: 이전 설치 패키지 재다운로드 없이 설치 가능
3. yarn.lock 파일: 더 확정적인 의존성 관리 지원

단점

• 호환성 이슈: 일부 NPM 패키지가 YARN에서 미지원 가능
• 기본적으로 NPM이 더 널리 사용

---

💡프로젝트당 하나의 패키지 매니저만 사용 필요예: NPM 사용 중이면 YARN 혼용 금지

4. 도구별 비교

기능/특징	NPM	NPX	YARN
기본 제공	Node.js 기본 패키지 관리자	NPM에 포함 (v5.2.0 이상)	별도 설치 필요
패키지 설치 속도	보통	N/A	빠름
의존성 고정 파일	package-lock.json	N/A	yarn.lock
병렬 설치 지원	아니요	아니요	예
오프라인 모드	아니요	아니요	예
패키지 실행	npm run <script_name>	npx <package_name>	yarn run <script_name>
사용 편의성	보통	간편	높음

5. 패키지 버전 읽는 법

Node.js 패키지는 버전 관리를 통해 안정성과 호환성 유지. 버전은 항상 3자리 숫자로 표기

버전 번호의 구성

1. Major (주 버전):
   • 패키지에 큰 변화가 있을 때 증가
   • 이전 버전과 호환되지 않을 가능성이 높음
2. Minor (부 버전):
   • 새로운 기능 추가
   • 기존 기능과의 호환성 유지 ⇒ 추가된 기능을 쓰지 않는다면 전혀 영향 없음
3. Patch (패치):
   • 기존 기능의 버그 수정(=많을수록 엉망)
   • 기존 기능과의 호환성 유지

예시

1.15.3
|  |  └ Patch (버그 수정)
|  └ Minor (새로운 기능 추가)
└ Major (큰 변화)

옵셔널 태그: 특정 버전 뒤에 의미를 추가로 부여. 예: 1.15.3-beta (베타 버전)

출처: 수코딩