-
pnpm으로 갈아타기Tip 2024. 10. 25. 15:35728x90
프론트엔드 개발을 하다 보면 다양한 패키지 매니저를 접하게 되는데, npm, Yarn 외에도 요즘 각광받고 있는 또 다른 선택지가 있습니다. "Performant npm"의 약자인 pnpm은 설치 속도와 디스크 공간 활용 면에서 탁월한 성능을 자랑합니다.
pnpm의 장점
1. 빠른 설치 속도
pnpm은 패키지를 중앙 캐시에서 관리하고, 하드 링크를 통해 설치하기 때문에 일반적인 npm이나 Yarn보다 훨씬 빠릅니다.
하드 링크 : 파일 시스템에서 동일한 파일을 여러 경로에서 접근할 수 있게 해주는 방식으로, 실제 파일은 하나만 저장되며 여러 위치에서 공유됩니다. 이를 통해 중복 저장을 피하고 디스크 공간을 절약하면서도 빠르게 설치가 가능합니다.
2. 디스크 사용 효율성
동일한 패키지를 여러 프로젝트에서 사용할 때, 실제 패키지는 하나만 저장되므로 디스크 공간을 크게 절약할 수 있습니다.
pnpm은 하드 링크뿐만 아니라 심볼릭 링크도 사용하여 의존성을 효율적으로 관리합니다.
3. 엄격한 의존성 관리
pnpm은 의존성 트리를 평탄화(flatten) 하지 않기 때문에, 패키지의 종속성을 명확하게 관리할 수 있습니다.
또한, pnpm은 Yarn Berry에서 발생했던 Ghost Dependency 문제를 해결하였다는 점에서 큰 장점을 가지고 있습니다.
심볼릭 링크를 사용하여 의존성을 효율적으로 관리하며, 덕분에 의존성 문제를 초기에 발견할 가능성이 큽니다.
심볼릭 링크 : 특정 파일이나 디렉터리에 대한 참조를 제공하는 링크로, 실제 파일의 위치와는 다른 경로에서 접근할 수 있게 해 줍니다. 이를 통해 패키지 설치 시 여러 프로젝트 간에 중복을 줄이고, 필요한 파일을 효율적으로 공유할 수 있습니다.
4. 모노레포 지원
pnpm은 모노레포 환경에서 매우 효율적입니다.
여러 프로젝트가 동일한 의존성을 공유할 때 설치 속도와 공간 효율성이 탁월합니다.
기존 npm 프로젝트에서 pnpm으로 교체하기
기존 npm 프로젝트를 pnpm으로 교체하는 과정은 매우 간단합니다.
// 1. pnpm 설치 npm install -g pnpm // 2. 기존 설정 제거 rm -rf node_modules package-lock.json // 3. pnpm으로 의존성 설치 pnpm install // 4. 서버 실행 pnpm run dev
.npmrc를 통한 pnpm 설정 커스터마이징
추가로 pnpm의 설정을 커스터마이즈하고 싶다면 프로젝트 루트에 .npmrc 파일을 생성하여 추가 설정을 할 수 있습니다.
// 기본적으로 pnpm은 중앙 캐시를 사용하지만, 필요에 따라 로컬 저장소를 지정할 수 있습니다. store-dir=~/.pnpm-store // 패키지를 설치할 때 일부 의존성을 호이스팅하여 여러 프로젝트에서 공유할 수 있습니다. shamefully-hoist=true // 패키지를 설치할 때 네트워크 연결 수와 재시도 횟수 등을 제한할 수 있습니다. fetch-retries=3 fetch-retry-factor=10 fetch-retry-mintimeout=1000 fetch-retry-maxtimeout=60000 // 특정 네트워크 환경에서는 프록시 설정이 필요할 수 있습니다. proxy=http://proxy.example.com:8080
pnpm은 빠른 설치 속도와 디스크 사용 효율성에서 뛰어난 성능을 발휘하는 패키지 매니저로, npm이나 Yarn의 대안으로 충분히 고려해 볼 만합니다.
특히 모노레포 환경에서 많은 장점을 제공하며, 엄격한 의존성 관리로 안정성을 보장합니다.
Yarn Berry와의 비교에서 각자 장단점이 있지만, 설정의 직관성과 디스크 사용 효율 면에서 pnpm이 더 나은 선택일 수 있습니다.
기존 npm 프로젝트에서도 pnpm은 손쉽게 적용될 수 있으므로, 한번 교체해 보시는 것을 추천합니다.'Tip' 카테고리의 다른 글
Yarn Berry로 갈아타기 (3) 2024.10.22 모노레포(Monorepo) 소개 (feat. 터보레포(Turborepo)) (0) 2024.10.07 StyleX 소개하기(feat. Next.js) (3) 2024.10.04 마이크로 서비스 아키텍처(Microservice Architecture) 소개 (1) 2024.10.02 React에서 스크롤을 하단에 고정하는 방법(feat. css) (0) 2024.09.07