Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

우당탕탕 개발일지

패키지 매니저 (npm, pnpm) 본문

Front-end/React

패키지 매니저 (npm, pnpm)

YUDENG 2023. 4. 13. 16:08

< 패키지 매니저 기본적인 기능 >

 

  • metadata 작성 및 관리
  • 모든 dependencies 일괄 설치 또는 업데이트
  • dependencies 추가, 업데이트, 삭제
  • 스크립트 실행
  • 패키지 퍼블리쉬
  • 보안 검사

모든 패키지 매니저는 모든 중요한 메타 정보를 package.json에 저장하고, 각자 다른 형태의 lock 파일이 존재한다.

lock 파일이란 매 설치시 결정적이고 예측가능한 특성을 보장하기 위하여, 각 버전의 정확한 의존성 버전을 저장하고 있는 파일이다. lock 파일이 없다면 매 설치마다 설치하는 버전이 달라질 수 있다.

 

npm : node package management

 

$npm install 또는 $npm i 명령어를 실행하면, package-lock.json이 생성되고 node_modules 폴더도 생성된다. 이 외에도 .npmrc 설정 파일도 생성될 수 있다.

 

  • npm을 사용하는 경우 해당 프로젝트의 node_modules 폴더에 dependency들을 설치한다.
  • yarn의 경우 설치 프로세스의 속도를 높이기 위해 작업을 병령화 하여 npm보다 빠르다.

 

pnpm : performant npm

 

2017년 처음 소개되었고, npm을 대체하기 위한 더 빠르고 효율적인 패키지 매니저

지난 1년간 Vite나 Next.js, Vue 등 pnpm을 도입하고, 다운로드 수도 급격하게 늘어났다.

 

$ pnpm i를 실행하면, node_modules 가 생성된다. 이 외에도 .npmrc 설정 파일도 생성될 수 있다.

pnpm 설치 방법 두가지
1. $ npm i -g pnpm
2. $ corepack prepare pnpm@6.24.2 --activate

 

  • pnpm의 경우 설치 시 해당 프로젝트 별로 설치하는 게 아니라 content-addressable store라는 곳에 저장을 하고 각 프로젝트에서 심볼릭 링크로 가져다 사용한다.
  • 프로젝트가 아무리 많아져도 효율적으로 dependency를 관리할 수 있다.
728x90

'Front-end > React' 카테고리의 다른 글

JSX  (0) 2023.04.19
리액트를 사용하는 이유  (0) 2023.04.17
Styled Component  (0) 2023.04.16
Vite를 사용해야 하는 이유  (0) 2023.04.06
리액트 개발 환경 준비(npm.version)  (0) 2023.03.05