패키지 매니저로 Yarn을 사용해야 하는 이유가 뭘까?

패키지 매니저란?

패키지 매니저는 프로젝트에서 필요한 라이브러리와 패키지를 쉽게 설치, 업데이트, 삭제하고 의존성을 관리해주는 도구이다.

주요 기능

1. 라이브러리 및 프레임워크 관리 – React, TailwindCSS 같은 라이브러리를 간편하게 설치할 수 있음.
2. 의존성 관리 – 프로젝트에서 사용하는 패키지들의 버전을 유지하고 업데이트할 수 있음.
3. 빌드 및 실행 자동화 – 프로젝트를 실행하거나 빌드하는 스크립트를 실행할 수 있음.
4. 팀 협업 용이 – package.json 파일을 통해 팀원들이 동일한 환경을 유지할 수 있음.

🔹 대표적인 프론트엔드 패키지 매니저

• npm (Node Package Manager) – Node.js 기본 패키지 매니저
• Yarn – npm보다 빠른 속도를 제공하는 패키지 매니저
• pnpm – 더 효율적인 디스크 사용을 지원하는 패키지 매니저

---

NPM에 대해

기본적으로 JavaScript의 패키지 매니저는 npm으로 설정되어 있다.

이는 Node.js 생태계에서 가장 널리 사용되고 있지만 여러 문제점이 존재한다.

1. 느린 속도

• 초기에는 패키지를 설치할 때 속도가 느렸고, 특히 npm install 실행 시 시간이 오래 걸렸음.
• 중복 패키지를 많이 설치해서 디스크 사용량도 많았음.

2. 글로벌 캐시 관리 문제

• 같은 패키지를 여러 프로젝트에서 사용할 때도 중복 다운로드하는 경우가 많음.
• 캐시 관리가 효율적이지 않아 필요 없는 파일이 쌓여 공간을 차지함.

3. 의존성 트리 구조 (node_modules 문제)

• node_modules 폴더가 매우 깊어져서 Windows에서 경로 길이 제한(260자) 문제를 발생시킬 수 있음.
• 중복된 패키지를 많이 설치해서 폴더 크기가 커짐.

4. 패키지 보안 문제

• npm은 패키지 관리가 오픈되어 있어, 악성 코드가 포함된 패키지가 배포되는 사례가 종종 발생함.
• 예를 들어, event-stream 라이브러리가 악성 코드 포함 후 배포된 적 있음.
• 최근에는 보안 점검 기능(npm audit)이 추가되었지만, 여전히 신뢰할 수 없는 패키지를 주의해야 함.

5. Lock 파일 일관성 문제

• npm의 package-lock.json 파일이 협업 중 서로 다른 버전으로 충돌하는 경우가 있음.

6. Workspace 기능 부족

• npm은 여러 패키지를 관리할 수 있는 Workspaces 기능을 지원하지만,
  상대적으로 Yarn이나 pnpm의 Workspaces보다 기능이 부족함.

이러한 문제점 때문에 yarn, pnpm등 다른 패키지 매니저가 등장하였다.

---

Yarn vs NPM

1. 속도

• npm은 설치 속도가 느렸고, 중복 다운로드로 인해 비효율적이었음.
• Yarn은 병렬 설치(Parallel Installation) 방식을 도입해서 npm보다 훨씬 빠름.
• Yarn은 패키지를 한 번 다운로드하면 캐시에 저장하여 다시 다운로드할 필요 없이 빠르게 재사용할 수 있음. (offline 다운 가능)

2. node_modules 구조 차이 (의존성 설치 방식 개선)

• Yarn은 디터미니스틱(Deterministic) 설치를 보장하여 항상 같은 방식으로 패키지를 설치함. (항상 동일한 경로)
• 중복 파일 등을 다운하지 않아 node_modules 내부 구조가 더 효율적으로 관리됨.
• Yarn의 yarn.lock 파일 덕분에 더 안정적인 의존성 트리를 제공함.

3. 보안 

• npm은 오픈된 패키지 레지스트리를 사용하여, 가끔 악성 코드가 포함된 패키지가 배포됨.
• Checksum 검증을 통해 다운로드한 패키지가 원본과 동일한지 확인.
• npm보다 패키지의 무결성을 더 철저하게 검사함.

4. Lock 파일 관리 (yarn.lock vs package-lock.json)

• package-lock.json이 있어도 동일한 패키지 버전을 보장하지 않는 경우가 있음.
• 협업할 때 package-lock.json 충돌이 자주 발생하여 버전 관리가 어려움.
• yarn.lock 파일은 항상 동일한 패키지 버전을 유지하도록 보장.
• yarn install 실행 시 예측 가능한 결과를 제공.
• 협업 시 패키지 버전 충돌을 줄일 수 있음.

5. Workspaces 기능 (모노레포 지원 개선)

• npm은 기본적으로 모노레포(Monorepo)를 지원하지 않음.
• 여러 개의 패키지를 하나의 프로젝트에서 관리하려면 추가적인 설정이 필요함.
• Yarn은 Workspaces 기능을 통해 모노레포를 쉽게 관리할 수 있도록 지원.
• 여러 패키지를 단일 프로젝트에서 효율적으로 관리 가능.
• 대규모 프로젝트에서 Yarn이 더 유리함.

---

Yarn Classic vs Yarn Berry

1 . node_modules 제거 (Zero-Install 지원)

Yarn Classic (v1)의 문제점

• node_modules 폴더를 유지해야 해서 디스크 공간을 많이 차지함.
• 패키지를 다시 설치할 때 시간이 오래 걸릴 수 있음.

Yarn Berry (v2+)의 개선점

• Zero-Install: node_modules 없이 .yarn/cache에 압축된 패키지 캐시를 저장.
• .gitignore에서 node_modules를 제외하면, 다른 개발자가 패키지를 설치할 필요 없이 바로 실행 가능.
• 프로젝트 크기가 줄고, 속도가 더 빨라짐.

2. Plug'n'Play (PnP) 도입 – 의존성 관리 방식 변경

 Yarn Classic (v1)의 문제점

• node_modules을 사용하여 패키지를 설치하는 방식이 npm과 동일했음.
• 중복 패키지 설치, 경로 문제, 성능 저하 등의 문제가 발생할 수 있었음.

Yarn Berry (v2+)의 개선점

• PnP(Plug'n'Play) 모드를 기본 활성화하여 node_modules를 아예 제거함.
• 패키지를 .pnp.cjs 파일로 관리하여, 필요할 때만 로드하는 방식으로 최적화됨.
• require() 호출을 더 빠르게 처리하여 성능이 향상됨.

3. Lock 파일 개선 (yarn.lock vs 압축된 yarn.lock)

Yarn Classic (v1)의 문제점

• yarn.lock 파일이 커질수록 읽고 쓰는 속도가 느려짐.
• npm의 package-lock.json과 비슷한 방식으로 동작.

Yarn Berry (v2+)의 개선점

• 압축된 yarn.lock 파일을 사용하여 크기를 줄이고 속도를 개선함.
• 변경 사항을 효율적으로 관리할 수 있어 Git 충돌이 줄어듦.

4. Workspaces 개선 (대규모 프로젝트 지원 강화)

Yarn Classic (v1)의 문제점

• 모노레포(Monorepo)에서 여러 패키지를 관리할 수 있는 Workspaces 기능이 있었지만, 일부 기능이 제한적이었음.

Yarn Berry (v2+)의 개선점

• 더 강력한 Workspaces 관리 기능 추가.
• 모노레포 프로젝트에서 여러 패키지 간의 의존성 관리가 최적화됨.

5. 설정 파일 변경 (.yarnrc → .yarnrc.yml)

Yarn Classic (v1)의 문제점

• 설정 파일이 .yarnrc로 되어 있어 JSON 형태가 아니어서 가독성이 떨어짐.

Yarn Berry (v2+)의 개선점

• .yarnrc.yml 형식으로 변경하여 더 직관적인 설정 방식 제공.

6. 플러그인 시스템 도입 (확장성 증가)

Yarn Classic (v1)의 문제점

• 새로운 기능을 추가하려면 기본 Yarn에 의존해야 했음.

Yarn Berry (v2+)의 개선점

• 플러그인 시스템 지원: 원하는 기능만 추가해서 사용할 수 있음.
• 필요하지 않은 기능을 제거할 수 있어, 더 가볍고 최적화된 패키지 매니저로 사용 가능.

---

Yarn Berry로 React 프로젝트 생성하기

1. Vite 기반 React 프로젝트 생성

yarn create vite my-react-app --template react cd my-react-app

2. Yarn Berry로 프로젝트 초기화

yarn set version berry

3. 의존성 설치

yarn install

4. 실행 스크립트 추가 (package.json)

"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }​

Yarn Berry는 기본적으로 node_modules를 사용하지 않기 때문에, package.json의 scripts를 수정해야 할 수도 있다.

기본적으로 Vite가 제공하는 스크립트는 그대로 사용하면 된다.

5. 개발 서버 실행

yarn dev