티스토리 뷰
1. 패키지 매니저란?
패키지 매니저는 코드의 재사용성을 높이고, 의존성을 효율적으로 관리할 수 있도록 돕는 도구이다.
주요 기능은 아래와 같다.
- 패키지 설치 및 삭제
- 의존성 관리
- 패키지 업데이트
- 캐시 활용 및 성능 최적화
- 스크립트 실행 및 프로젝트 관리
JavaScript나 TypeScript에서는 import 구문을 사용하여 외부 라이브러리 및 모듈을 참조할 수 있다. 이러한 외부 의존성을 올바르게 관리하고 참조할 수 있도록 보장하는 프로그램이 바로 패키지 매니저이다.
import React from 'react';
소스 코드보다 상위 디렉토리에 위치한 package.json 파일은 프로젝트의 의존성을 정의하고, 특정 패키지의 버전 정보를 명시하여 모호성을 해결하는 역할을 한다.
예를 들어, package.json 파일 내의 dependencies 항목은 프로젝트에서 필요한 라이브러리와 해당 버전 범위를 정의한다.
{
"dependencies": {
"react": "^18.2.0" // react는 ≥ 18.2.0, <19 사이의 어떤 버전이든지 쓸 수 있다고 명시
}
}
패키지 매니저(npm, yarn, pnpm 등)는 이러한 의존성 정보를 바탕으로 프로젝트에 적절한 패키지를 설치하여, 모든 소스 코드 파일이 동일한 버전의 라이브러리를 사용할 수 있도록 보장한다. 즉, 패키지 매니저가 모호한 버저닝 문제를 해결해주는 것이다.
2. 패키지 매니저의 동작 방식
https://toss.tech/article/lightning-talks-package-manager
패키지 매니저의 과거, 토스의 선택, 그리고 미래
토스는 왜 패키지 매니저로 Yarn을 선택했을까요? 이번 라이트닝 토크에서는 JavaScript의 패키지 매니저, 동작 방식, 그리고 토스의 선택과 앞으로의 방향성에 대해 이야기해 보려고 해요.
toss.tech
1️⃣ Resolution 단계 (의존성 해결)
역할: 패키지 버전 고정 및 의존성 관리
- package.json에 명시된 버전 범위를 기반으로, 사용할 패키지의 정확한 버전을 결정
- 의존성의 의존성을 탐색하여, 모든 라이브러리의 버전을 고정
- 동일한 package.json을 사용해도 환경마다 다른 버전이 설치되는 문제를 방지
- 결정된 버전 정보를 yarn.lock 또는 package-lock.json에 저장
2️⃣ Fetch 단계 (패키지 다운로드)
역할: 필요한 파일 다운로드
- Resolution 단계에서 결정된 버전의 패키지를 네트워크(NPM 레지스트리)에서 다운로드
- 캐시를 활용하여, 한 번 받은 패키지는 다시 다운로드하지 않고 빠르게 설치
- yarn.lock 또는 package-lock.json 파일을 참고하여 정확한 버전을 가져옴
3️⃣ Link 단계 (패키지 연결 및 사용)
역할: 설치된 패키지를 실제 코드에서 사용할 수 있도록 환경 구성
- 패키지를 어떻게 연결할지 결정하며, 패키지 매니저마다 방식이 다르다.
📌 npm Linker (기본 방식)
- 모든 패키지를 node_modules 디렉토리에 복사하여 저장
- 중첩된 의존성으로 인해 디렉토리 크기가 커지고 속도가 느려질 수 있음
📌 pnpm Linker (Hard link 활용)
- node_modules에 직접 복사하는 대신, OS의 Hard link를 활용하여 패키지를 공유
- 디스크 사용량을 줄이고 설치 속도를 개선
📌 PnP (Plug’n’Play, Yarn 방식)
- node_modules 없이, 모든 패키지를 JavaScript Map 객체로 관리
- import/require 시, 파일 시스템을 순회하는 대신, 메모리에서 빠르게 참조
- 설치 및 로드 속도가 빠르지만, 기존 Node.js 환경과 호환성이 낮을 수 있음
3. 주요 패키지 매니저 비교
✦ npm (Node Package Manager)
npm은 Node.js를 설치하면 기본적으로 제공되는 패키지 매니저입니다. 가장 널리 사용되며, 방대한 패키지 저장소(NPM Registry)를 기반으로 작동한다.
✅ 특징
- 기본적으로 제공되는 패키지 매니저로, 별도 설치가 필요 없음
- package.json과 package-lock.json을 통해 의존성을 관리
- npm audit 기능을 통해 보안 취약점 확인 가능
- 글로벌(global)과 로컬(local) 설치 지원
✦ Yarn (Yet Another Resource Negotiator)
Yarn은 Meta(구 Facebook)에서 개발한 패키지 매니저로, npm의 속도와 보안 문제를 해결하기 위해 등장했다.
✅ 특징
- 병렬 다운로드 기능으로 npm보다 빠른 속도 제공
- yarn.lock을 사용하여 의존성 버전을 명확하게 관리
- 보안성을 강화한 무결성 체크 기능 지원
- 오프라인 캐시 기능 제공 (이미 설치한 패키지는 다시 다운로드할 필요 없음)
✦ pnpm (Performant npm)
pnpm은 패키지를 보다 효율적으로 설치하고 관리할 수 있도록 설계된 패키지 매니저입니다. 중복 파일 저장을 최소화하고, 디스크 사용량을 줄이는 것이 특징이다.
✅ 특징
- 하드 링크 및 심볼릭 링크를 사용하여 패키지를 관리 (저장 공간 절약)
- 기존 npm 및 yarn보다 빠른 설치 속도 제공
- 글로벌 패키지 저장소를 공유하여 여러 프로젝트에서 동일한 패키지를 다시 다운로드하지 않음
- node_modules 구조가 변경되어 의존성 충돌 문제 감소
✦ Yarn Berry
Yarn Berry는 Yarn 2 버전 이후부터 사용되는 새로운 패키지 매니저로, 기존 Yarn과는 차별화된 아키텍처를 가진다.
✅ 특징
- node_modules 디렉토리 없이 작동하는 PnP (Plug'n'Play) 지원
- 의존성을 파일 시스템 대신 메모리에서 관리하여 실행 속도 향상
- 패키지별 격리 환경 제공으로 보안성 강화
- Zero-installs(무설치 모드) 기능 제공 → yarn.lock과 .yarn/cache만으로 패키지 관리 가능
- npm, yarn, pnpm보다 빠른 설치 속도
✦ 정리
패키지매니저 | npm | yarn | pnpm | yarn berry |
속도 | 보통 | 빠름 | 매우 빠름 | 가장 빠름 |
디스크 사용량 | 높음 | 보통 | 낮음 | 매우 낮음 (PnP 지원) |
오프라인 캐시 | ✕ | ✓ | ✓ | ✓ |
보안성 | 보통 | 높음 | 높음 | 매우 높음 (격리 환경) |
멀티 레포 지원 | ✕ | ✓ | ✓ | ✓ |
node_modules 사용 | ✓ | ✓ | ✓ | ✕ (PnP) |
'FrontEnd > Web' 카테고리의 다른 글
GraphQL (0) | 2024.11.06 |
---|---|
모듈 번들러 (0) | 2024.04.12 |
브라우저 렌더링 과정 (1) | 2024.01.08 |
- Total
- Today
- Yesterday
- eslint
- 캡스톤디자인
- Network
- Next.js
- 핀터레스트
- git
- web
- style-lint
- 알고리즘
- 무한스크롤
- zustand
- react
- 오블완
- AI Challeng for Biodiversity
- React Query
- 디바운싱
- 티스토리챌린지
- Tanstack Query
- Firebase
- 패키지 매니저
- Masonry 레이아웃
- github
- 최적화
- 이브와ICT멘토링
- sass
- Tanstack-Query
- 네트워크
- 쓰로틀링
- prettier
- react-query
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |