Building and Managing Nx Workspaces: Claude Code 활용 가이드

Nxワークスペースの구축をClaude Code로 효율화하기

NxはNrwlが개발するモノレポ관리ツールで、豊富な플러그인エコシステムと高度な빌드グラフ解析が特徴です。Claude Code와組み合わせることで、Nxの多機能さを最大限に活かせます。

ワークスペースの初期セットアップ

> Nxワークスペースを新規생성して。
> 구성：
> - apps/frontend: React + Vite
> - apps/backend: NestJS API
> - libs/shared-types: 共通타입定義
> - libs/ui-components: 共通UI컴포넌트

# Nxワークスペースの作成
npx create-nx-workspace@latest my-workspace \
  --preset=integrated \
  --nxCloud=skip

# プラグインの追加
nx add @nx/react
nx add @nx/nest

프로젝트の추가とジェネレーター활용

Nxのジェネレーターを使えば、一貫した구성で프로젝트を추가할 수 있습니다。

> React애플리케이션를 추가해줘。Vitestで테스트も설정して。

# Reactアプリの生成
nx g @nx/react:app frontend \
  --bundler=vite \
  --unitTestRunner=vitest \
  --e2eTestRunner=playwright \
  --style=css

# ライブラリの生成
nx g @nx/react:lib ui-components \
  --unitTestRunner=vitest \
  --publishable \
  --importPath=@my-workspace/ui-components

project.jsonの설정

> frontend앱の빌드설정を최적화して。
> 환경 변수の전환とソースマップの설정も추가して。

{
  "name": "frontend",
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "options": {
        "outputPath": "dist/apps/frontend",
        "generatePackageJson": false
      },
      "configurations": {
        "production": {
          "mode": "production",
          "sourcemap": false
        },
        "development": {
          "mode": "development",
          "sourcemap": true
        }
      }
    },
    "serve": {
      "executor": "@nx/vite:dev-server",
      "defaultConfiguration": "development"
    }
  }
}

影響範囲の分析と선택的実行

Nxの強力な依存グラフ解析を활용します。

> 변경の影響を受ける프로젝트だけ테스트を実行する
> CI파이프라인を作って。

# 影響を受けるプロジェクトの確認
nx affected --target=test --base=main

# 依存グラフの可視化
nx graph

# 並列実行数の指定
nx affected --target=build --parallel=5

# .github/workflows/ci.yml
name: CI
on: [pull_request]
jobs:
  affected:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: nrwl/nx-set-shas@v4
      - run: npm ci
      - run: npx nx affected -t lint test build --parallel=3

カスタムジェネレーターの생성

프로젝트固有の보일러플레이트をジェネレーター化할 수 있습니다。

> API엔드포인트を추가するカスタムジェネレーターを作って。
> コントローラ、サービス、DTOの파일を自動생성したい。

// tools/generators/api-endpoint/index.ts
import { Tree, generateFiles, joinPathFragments, names } from '@nx/devkit';

interface Schema {
  name: string;
  project: string;
}

export default async function (tree: Tree, schema: Schema) {
  const { className, fileName } = names(schema.name);
  const projectRoot = `apps/${schema.project}/src`;

  generateFiles(
    tree,
    joinPathFragments(__dirname, 'files'),
    joinPathFragments(projectRoot, fileName),
    { className, fileName, template: '' }
  );
}

정리

Claude Codeを활용すれば、Nxの豊富な機能を빠르게理解し、効率的なモノレポ環境を구축할 수 있습니다。モノレポ관리の基本やTypeScript개발のコツ도 참고하세요.

Nx의 상세 정보는Nx공식 문서를 참고하세요.