[FE테크톡] Package Manager

npm과 yarn의 차이를 명확히 몰라서 yarn을 쓰기로 해놓고 npm을 사용하는 듯의 빌런짓을 했다. 그러다가 lock 파일에서 에러가 나서 커밋을 되돌리는 고생을 겪었고 이후 package manager에 대해서 알아보게 되었다.

---

Package Manager

개발에 필요한 다양한 패키지를 설치하고 또 수정하고 업데이트 하는 등의 작업을 편리하게 도와주는 도구

프로젝트에 필요한 다양한 패키지들을 의존성 있게 관리해주는 도구

npm

프로젝트의 의존성을 수동으로 다운로드해야 했던 불편함을 개선한 패키지 매니저

node.js에 내장되어 있기 때문에 추가적인 설치가 필요하지 않음

 

다른 사용자들이 만들어 놓은 다양한 모듈을 다운로드 가능 npm | Home (npmjs.com)

npm | Home

패키지들이 서로 의존하도록 하기 때문에 하나의 문제가 발생한다면 문제가 발생할 수 있으며, 이를 관리하기 위해 package.json을 사용

yarn

npm의 취약점이었던 보안 문제를 해결해서 보다 안전성을 보장

여러 개의 패키지를 순차적으로 설치하지 않고 병렬적으로 설치해주기 때문에 속도 측면에서도 npm보다 개선

 

npm을 통해 yarn을 먼저 설치해야함

* yarn berry

yarn의 새로운 주요 버전으로 더 빠르고 효율적인 패키지 설치 및 의존성 관리 기능을 제공. 따로 설치할 필요없이 최신 yarn이 yarn berry라고 보면 됨

 

pnpm(performant npm)

프로젝트별로 node_modules에 매번 패키지를 설치했던 것과 달리 global 저장소에 패키지를 한 번만 저장함으로써 저장 공간 절약 가능

pnpm을 사용하면 똑같은 라이브러리를 중복해서 설치할 필요가 없음

특정 패키지를 한 번만 설치하기 때문에 프로젝트별로 연결을 해놓으면 호환 문제가 발생할 수 있음

---

Vite

빠른 웹 개발을 위한 빌드 도구

Vue CLI나 webpack 같은 번들러와 같이 개발할 때 코드를 번들링하고, 브라우저에서 로딩하는 기존의 번들러와 달리 개발 서버에서 모듈을 동적으로 번들링하여 빠르게 동작

기본적으로 ES 모듈을 지원하고 빌트인된 빠른 개발 서버를 제공하며 실시간 모듈 갱신 지원

Bun

Vite의 플러그인. 번들 최적화 도구

Node의 역할을 대체하면서 node와 달리 Typescript와 JSX 컴파일러를 기본적으로 탑재

 

Turbo Pack

Hotwrite의 구성 요소 중 하나로, 주로 Ajax를 이용한 페이지 갱신 및 서버 측 렌더링을 간소화하기 위한 기술을 제공

빠른 웹 애플리케이션을 개발할 수 있음

캐시를 활용해 같은 작업을 반복하지 않으며 Webpack보다 빠른 번들 도구

 

---

lock 파일은 프로젝트의 의존성을 관리하는 데 사용되는 파일이며 패키지 매니저에 의해 자동으로 생성된다. 프로젝트에서 사용되는 패키지와 그 버전을 정확하게 기록하며, 패키지 매니저가 패키지의 의존성을 설치할 때 사용되며, 다른 사람이나 다른 환경에서 프로젝트를 재현할 때 사용한다. 버전 충돌이나 다른 환경에서의 패키지 버전 불일치를 방지하고, 프로젝트의 일관성을 유지하는 데 도움을 준다. 즉, package.json에서는 모든 의존성과 해당 범위가 기록되며 lock 파일은 실제로 설치된 패키지와 정확한 버전을 기록한다. 

package-lock.json의 버전을 설치해놨는데 yarn-lock.json이 등장해서 다른 패키지 버전과 의존성을 설치하라고 하면 당연히 충돌이 날 수밖에..!

 

근데 의문, PC 자체에는 npm으로도 설치하고 yarn으로도 설치하는데 global install에서는 버전관리를 어떻게 하는거지?

=> 마찬가지로 PC에서도 패키지 매니저 하나로 통일해야한다! 충격적인 사실..

---

Reference

Node보다 5배 빠른 Bun이 드디어 10 정식 릴리... | 커리어리 (careerly.co.kr)