0Pricing
Frontend Academy · 강의

모노레포를 위한 pnpm Workspaces

루트 pnpm-workspace.yaml을 사용하는 pnpm workspace를 설정하고, 공유 종속성을 끌어올리며, workspace: 프로토콜로 로컬 패키지를 연결합니다.

모노레포를 위한 pnpm Workspaces은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

왜 pnpm인가요?

pnpm(Performant npm)은 빠르고 디스크 효율이 높은 패키지 관리자입니다. 각 패키지의 사본 하나만 전역 콘텐츠 주소 지정 저장소에 저장하고, 프로젝트의 node_modules에서는 해당 저장소로 연결합니다. 동일한 의존성을 여러 프로젝트에서 사용해도 디스크에는 사본 하나만 저장됩니다.

속도와 디스크 절약

일반적인 모노레포에서 pnpm 설치는 npm/yarn보다 2~3배 빠르고 디스크 사용량은 약 70% 적습니다. 패키지가 많은 모노레포에서 특히 큰 이점이 있습니다.

pnpm 설치하기

Corepack(Node 16+에 포함됨)을 사용하거나 전역으로 설치합니다.

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

워크스페이스 구성

패키지가 들어 있는 폴더를 나열하는 pnpm-workspace.yaml을 루트에 만듭니다.

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

프로젝트 구조

각 앱과 패키지는 자체 package.json을 가집니다. 루트에는 공유 devDeps가 포함된 워크스페이스 package.json이 있습니다.

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

의존성 설치하기

루트에서 pnpm install을 한 번 실행합니다. pnpm은 모든 패키지에 있는 항목을 설치하고 공통 의존성을 상위로 끌어올립니다.

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

workspace: 프로토콜

workspace:*로 내부 패키지를 참조합니다. pnpm은 이를 로컬 패키지로 해석하고, 게시할 때 실제 버전으로 대체합니다.

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

여러 패키지에서 스크립트 실행하기

pnpm -r은 모든 패키지에서 스크립트를 실행합니다. 일부 패키지만 대상으로 하려면 --filter를 사용합니다.

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

엄격한 의존성 해석

기본적으로 pnpm은 심볼릭 링크를 사용하므로 패키지는 자신의 package.json에 명시적으로 나열한 의존성만 볼 수 있습니다. 패키지 간 의존성이 실수로 새어 나가지 않으며, 이는 npm과 yarn classic에서는 허용되는 버그입니다.

hoist 패턴

기본적으로 pnpm은 아무것도 상위로 끌어올리지 않습니다. 전이 의존성을 접근할 수 있어야 한다면(예: 전역 TypeScript), .npmrc에 shamefully-hoist=true를 추가하거나(가능하면 피하세요) 특정 public-hoist-pattern을 사용합니다.

의존성 업데이트하기

pnpm update는 semver 범위 내에서 업데이트합니다. pnpm update -L은 캐럿을 무시하고 최신 버전으로 올립니다.

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

Turborepo와 함께 사용하기

pnpm은 워크스페이스와 설치를 제공하고, Turborepo는 작업 조정과 캐싱을 제공합니다. 둘은 매우 잘 어울리며 대부분의 JS 모노레포에서 함께 사용합니다.

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

CI 팁

더 빠른 CI를 위해 pnpm의 콘텐츠 주소 지정 저장소(~/.local/share/pnpm/store)를 캐시합니다. pnpm-lock.yaml이 변경되면 실패하도록 --frozen-lockfile을 사용합니다.

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

빠른 확인

모노레포에서 npm/yarn과 비교했을 때 pnpm이 제공하는 주요 디스크 공간상의 이점은 무엇인가요?

복습: pnpm 워크스페이스

콘텐츠 주소 지정 저장소 하나와 심볼릭 링크를 함께 사용하므로 설치가 빠르고 디스크 사용량이 약 70% 적습니다. pnpm-workspace.yaml에는 패키지 폴더가 나열됩니다. 내부 의존성에는 workspace:* 프로토콜을 사용합니다. pnpm -r은 모든 패키지에서 스크립트를 실행하고, --filter는 일부 패키지만 대상으로 지정합니다. 엄격한 해석으로 의존성 누수를 방지합니다. 작업 조정을 위해 Turborepo와 함께 사용하세요. CI에서는 --frozen-lockfile을 사용하세요.

자주 묻는 질문

“모노레포를 위한 pnpm Workspaces” 강의는 무료인가요?

네 — “모노레포를 위한 pnpm Workspaces” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“모노레포를 위한 pnpm Workspaces”에서 뭘 배우나요?

루트 pnpm-workspace.yaml을 사용하는 pnpm workspace를 설정하고, 공유 종속성을 끌어올리며, workspace: 프로토콜로 로컬 패키지를 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“모노레포를 위한 pnpm Workspaces” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Vite: 플러그인 시스템과 SSR 모드
  2. esbuild: 속도와 한계
  3. 모노레포를 위한 pnpm Workspaces
  4. Turbo: 캐싱과 작업 파이프라인
← Frontend Academy(으)로 돌아가기