pnpm: Claude Code 활용 가이드
pnpm: Claude Code 활용. 실용적인 팁과 코드 예시를 포함합니다.
pnpmワークスペースでモノレポを구축する
pnpmは厳密な依存解決とディスク効率の良さで人気の패키지マネージャーです。ワークスペース機能を使えば、추가ツールなしでモノレポを관리할 수 있습니다。Claude Codeを활용して、pnpmワークスペースの구성を효율적으로進めましょう。
ワークスペースの初期설정
> pnpm workspacesでモノレポ를 생성해줘。
> 구성:
> - apps/web: React SPA
> - apps/admin: 관리画面
> - packages/ui: 共通컴포넌트
> - packages/config: 共通설정
# pnpm-workspace.yaml
packages:
- 'apps/*'
- 'packages/*'
// package.json (ルート)
{
"name": "my-monorepo",
"private": true,
"scripts": {
"dev": "pnpm -r --parallel dev",
"build": "pnpm -r build",
"lint": "pnpm -r lint",
"test": "pnpm -r test"
},
"devDependencies": {
"typescript": "^5.5.0"
}
}
패키지間の依存관리
> web앱からui패키지を参照する설정をして。
> TypeScriptのパス解決もセットアップして。
// apps/web/package.json
{
"name": "@myapp/web",
"dependencies": {
"@myapp/ui": "workspace:*",
"@myapp/config": "workspace:*"
}
}
// packages/ui/package.json
{
"name": "@myapp/ui",
"main": "./src/index.ts",
"types": "./src/index.ts",
"exports": {
".": {
"import": "./src/index.ts",
"types": "./src/index.ts"
}
}
}
workspace:* プロトコルにより、常にローカルの패키지が参照されます。公開時には実際のバージョン番号に自動置換されます。
フィルタリングとスクリプト実行
pnpmのフィルタ機能で特定패키지のみを操作할 수 있습니다。
# 特定パッケージのdev実行
pnpm --filter @myapp/web dev
# 依存パッケージも含めてビルド
pnpm --filter @myapp/web... build
# 変更があったパッケージのみテスト
pnpm --filter "...[origin/main]" test
# 複数パッケージの指定
pnpm --filter "@myapp/web" --filter "@myapp/admin" build
Changesetsでバージョン관리
> changesetsを도입して、패키지の公開フローを整備して。
pnpm add -Dw @changesets/cli
pnpm changeset init
// .changeset/config.json
{
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [["@myapp/ui", "@myapp/config"]],
"access": "restricted",
"baseBranch": "main",
"updateInternalDependencies": "patch"
}
# 変更セットの作成
pnpm changeset
# バージョンの更新
pnpm changeset version
# 公開
pnpm -r publish --access public
.npmrcの최적화
> pnpmの설정を최적화して。strict-peer-depsと
> hoistの설정を적절하게して。
# .npmrc
strict-peer-dependencies=false
auto-install-peers=true
shamefully-hoist=false
link-workspace-packages=true
prefer-workspace-packages=true
shamefully-hoist=false はpnpmの厳密な依存解決を維持する重要な설정です。暗黙的な依存をコードから排除할 수 있습니다。
정리
pnpmワークスペースは、シンプルながら強力なモノレポ관리を実現します。Claude Code를 활용하면 依存関係の설정やCI구성もスムーズに進められます。モノレポ관리の実践가이드や依存관리の모범 사례도 함께 참고하세요.
pnpm의 상세 정보는pnpm공식 문서를 참고하세요.
Claude Code 워크플로우를 한 단계 업그레이드하세요
지금 바로 Claude Code에 복사해 쓸 수 있는 검증된 프롬프트 템플릿 50선.
이 글을 작성한 사람
Masa
Claude Code를 적극 활용하는 엔지니어. 10개 언어, 2,000페이지 이상의 테크 미디어 claudecode-lab.com을 운영 중.
관련 글
Claude Code로 리팩토링을 자동화하는 방법
Claude Code를 활용해 코드 리팩토링을 효율적으로 자동화하는 방법을 알아봅니다. 실전 프롬프트와 구체적인 리팩토링 패턴을 소개합니다.
Claude Code로 사이드 프로젝트 개발 속도를 극대화하는 방법 [예제 포함]
Claude Code를 활용해 개인 프로젝트 개발 속도를 획기적으로 높이는 방법을 알아봅니다. 실전 예제와 아이디어부터 배포까지의 워크플로를 포함합니다.
Complete CORS Configuration Guide: Claude Code 활용 가이드
complete cors configuration guide: Claude Code 활용. 실용적인 팁과 코드 예시를 포함합니다.