[JavaScript] npm과 yarn의 혼용과 충돌(Conflict)

수족관 유리와 물개의 conflict

 

 

📍 자바스크립트 패키지 매니저(JavaScript Package Manager)

• 자바스크립트 프로젝트에서 사용되는 의존성 관리 도구
• 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리(갱신/삭제)하는 역할을 합니다.
• 대부분의 자바스크립트 패키지 매니저는 Node.js 실행 환경(runtime)에서 돌아가며 package.json이라는 파일에 프로젝트가 의존하고 있는 패키지 목록을 명시합니다.
• 일반적으로 패키지는 프로젝트의 node_modules 디렉토리에 저장되는데, 주로 공개 npm 저장소(registry)로 부터 다운을 받지만 회사의 경우 사내망 내의 사설 저장소를 운영하는 경우도 있습니다.
• ex) npm, yarn, pnpm, bun

 

 

📍 npm(Node Package Manager)

• 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 표준 패키지 매니저
• Node.js를 설치하면 자동으로 설치됩니다. (별도로 설치할 필요X)
• npm 명령어

npm init	package.json 생성
npm install	package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치
npm install package_name@버전	특정 패키지의 특정 버전 설치
npm install --save [패키지명]	패키지를 프로젝트 의존성 수준으로 추가
npm install package_name -g	글로벌로 설치. (로컬의 다른 프로젝트도 이 패키지를 사용 가능하게 함)
npm uninstall	패키지 삭제 명령어
npm update	설치한 패키지들을 업데이트
npm dedupe	중복 설치된 패키지들을 정리해주는 명령어

 

 

📍 Yarn(Yet Another Resource Negotiator)

• 2016년 페이스북에서 개발한 패키지 관리자
• 리액트(React)와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하기 위해 개발되었습니다.
• npm과 같은 기능을 수행하지만, npm registry와 호환하면서 속도나 안정성 측면에서 향상 되었습니다.
• yarn 명령어

yarn init	package.json 생성
yarn	package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치
yarn add package_name@버전	특정 패키지의 특정 버전 설치
yarn add [패키지명]	패키지를 프로젝트 의존성 수준으로 추가
yanr global add package_name	글로벌로 설치. (로컬의 다른 프로젝트도 이 패키지를 사용 가능하게 함)
yarn remove	패키지 삭제 명령어
yarn upgrade	설치한 패키지들을 업데이트

 

 

📍 npm과 yarn의 혼용 

• npm과 yarn의 패키지 관리 방식이 달라서 충돌(conflict)이 날 수 있으므로 혼용하는 것은 지양해야합니다!
  • npm: 설치한 패키지별로 서브패키지를 이루는 형식으로 각각의 설치한 패키치의 독립성이 보장되지만 패키지 중복으로 인해 크기가 전체적으로 커집니다.
  • yarn: 설치한 패키지와 종속되는 패키지를 공통적으로 사용할 때 일렬로 나열한 뒤 설치 패키지로 링크하는 방식으로 패키지 중복이 제거되어 적은 용량으로 빠른 실행이 가능하나 패키지 충돌이 있을 수 있습니다.
• lock 파일은 npm과 yarn 둘 다 있어도 상관 없지만, npm install이나 yarn add를 혼용해서 사용하지 않고 처음부터 끝까지 하나의 패키지 관리자로 프로젝트를 진행하는 것이 패키지 충돌 오류를 막을 수 있는 방법입니다😮‼️