Previous
Next
Nx 완벽 가이드 | 모노레포·빌드 시스템·캐싱·플러그인·실전 활용

Nx 완벽 가이드 | 모노레포·빌드 시스템·캐싱·플러그인·실전 활용

· 4분 읽기 · 수정 고급
Nx 완벽 가이드 | 모노레포·빌드 시스템·캐싱·플러그인·실전 활용

이 글의 핵심

Nx로 고성능 모노레포를 구축하는 완벽 가이드. Workspace, Computation Caching, Distributed Task Execution, Plugins까지 실전 예제로 정리. Start now.

이 글의 핵심

Nx로 고성능 모노레포를 구축하는 완벽 가이드입니다. Workspace, Computation Caching, Distributed Task Execution, Plugins까지 실전 예제로 정리했습니다.

실무 경험 공유: Lerna에서 Nx로 전환하면서, 빌드 시간이 80% 단축되고 개발 경험이 크게 향상된 경험을 공유합니다.

들어가며: “모노레포가 느려요”

실무 문제 시나리오

시나리오 1: 빌드가 너무 느려요

전체 빌드에 30분이 걸립니다. Nx는 캐싱으로 5분으로 단축합니다. 시나리오 2: 의존성 관리가 복잡해요

수동 관리가 어렵습니다. Nx는 자동으로 분석합니다. 시나리오 3: CI/CD가 비효율적이에요

모든 프로젝트를 빌드합니다. Nx는 변경된 것만 빌드합니다.

1. Nx란?

핵심 특징

Nx는 차세대 모노레포 빌드 시스템입니다. 주요 장점:

  • Computation Caching: 로컬 + 원격 캐싱
  • Affected Commands: 변경된 것만 실행
  • Distributed Task Execution: 병렬 실행
  • Plugins: Angular, React, Next.js, Nest
  • Dependency Graph: 시각화

2. 설치 및 Workspace 생성

새 Workspace 생성

npx create-nx-workspace@latest my-workspace
# 옵션 선택
# - Integrated monorepo
# - React / Angular / Next.js
# - Nx Cloud (Yes/No)

기존 프로젝트에 추가

npx nx@latest init

3. 프로젝트 생성

React 앱

nx generate @nx/react:app my-app

React 라이브러리

nx generate @nx/react:lib my-lib

Next.js 앱

nx generate @nx/next:app my-next-app

Nest.js 앱

nx generate @nx/nest:app my-api

4. 프로젝트 구조

my-workspace/
├── apps/
│   ├── web/              # Next.js 앱
│   ├── mobile/           # React Native 앱
│   └── api/              # Nest.js API
├── libs/
│   ├── shared/ui/        # 공유 UI 컴포넌트
│   ├── shared/utils/     # 공유 유틸리티
│   └── feature/auth/     # Auth 기능
├── nx.json
├── package.json
└── tsconfig.base.json

5. 라이브러리 사용

라이브러리 생성

nx generate @nx/react:lib shared-ui

컴포넌트 생성

nx generate @nx/react:component button --project=shared-ui --export

사용

// apps/web/src/app/page.tsx
import { Button } from '@my-workspace/shared-ui';
export default function Home() {
  return <Button>Click me</Button>;
}

6. Task 실행

단일 프로젝트

# 빌드
nx build web
# 테스트
nx test web
# Lint
nx lint web
# Dev 서버
nx serve web

Affected Commands

# 변경된 프로젝트만 빌드
nx affected:build
# 변경된 프로젝트만 테스트
nx affected:test
# 변경된 프로젝트만 Lint
nx affected:lint

7. nx.json 설정

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "test", "lint"],
        "parallel": 3
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": [^build],
      "inputs": ["production", "^production"],
      "outputs": [{projectRoot}/dist]
    },
    "test": {
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
      "cache": true
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json"
    ],
    "sharedGlobals": []
  }
}

8. Dependency Graph

# 의존성 그래프 시각화
nx graph
# 특정 프로젝트의 의존성
nx graph --focus=web
# Affected 그래프
nx affected:graph

9. Nx Cloud

설정

nx connect-to-nx-cloud

원격 캐싱

{
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "cacheableOperations": ["build", "test", "lint"],
        "accessToken": "YOUR_TOKEN"
      }
    }
  }
}

10. 실전 예제: 풀스택 앱

구조

my-workspace/
├── apps/
│   ├── web/              # Next.js
│   └── api/              # Nest.js
└── libs/
    ├── shared/types/     # 공유 타입
    └── shared/utils/     # 공유 유틸

공유 타입

// libs/shared/types/src/lib/user.ts
export interface User {
  id: number;
  email: string;
  name: string;
}

API

// apps/api/src/app/users/users.controller.ts
import { Controller, Get } from '@nestjs/common';
import { User } from '@my-workspace/shared-types';
@Controller('users')
export class UsersController {
  @Get()
  getUsers(): User[] {
    return [
      { id: 1, email: '[email protected]', name: 'John' },
    ];
  }
}

Web

// apps/web/src/app/page.tsx
import { User } from '@my-workspace/shared-types';
export default async function Home() {
  const response = await fetch('http://localhost:3000/api/users');
  const users: User[] = await response.json();
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

정리 및 체크리스트

핵심 요약

  • Nx: 모노레포 빌드 시스템
  • Computation Caching: 로컬 + 원격
  • Affected Commands: 변경된 것만
  • Distributed Execution: 병렬 실행
  • Plugins: 다양한 프레임워크
  • Dependency Graph: 시각화

구현 체크리스트

  • Nx 설치
  • Workspace 생성
  • 프로젝트 생성
  • 라이브러리 생성
  • Task 실행
  • Affected Commands 사용
  • Nx Cloud 설정
  • Dependency Graph 확인

같이 보면 좋은 글

이 글에서 다루는 키워드

Nx, Monorepo, Build System, Caching, TypeScript, Angular, React

내부 동작과 핵심 메커니즘

이 글의 주제는 「Nx 완벽 가이드 | 모노레포·빌드 시스템·캐싱·플러그인·실전 활용」입니다. 앞선 튜토리얼을 구현·런타임 관점에서 다시 압축합니다. 구성 요소 간 책임 분리와 관측 가능한 지점을 기준으로 “입력이 어디서 검증되고, 핵심 연산이 어디서 일어나며, 부작용(I/O·네트워크·디스크)·동시성이 어디서 터지는가”를 한 장면으로 그리면 장애 분석이 빨라집니다.

처리 파이프라인(개념도)

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

경계에서의 지연·실패(시퀀스 관점)

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(프로세스·런타임·게이트웨이)
  participant D as 의존성(외부 API·DB·큐)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

알고리즘·프로토콜·리소스 관점 체크포인트

  • 불변 조건(Invariant): 각 단계가 만족해야 하는 조건(버퍼 경계, 프로토콜 상태, 트랜잭션 격리, 파일 디스크립터 상한)을 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
  • 결정성: 동일 입력에 동일 출력이 보장되는 순수 층과, 시간·네트워크·스레드 스케줄에 의해 달라질 수 있는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
  • 경계 비용: 직렬화/역직렬화, 문자 인코딩, syscall 횟수, 락 경합, GC·할당, 캐시 미스처럼 누적 비용을 의심 목록에 넣습니다.
  • 백프레셔: 생산자가 소비자보다 빠를 때(소켓 버퍼, 큐 깊이, 스트림) 어디서 어떤 신호로 속도를 줄일지 정의합니다.

프로덕션 운영 패턴

실서비스에서는 기능과 함께 관측·배포·보안·비용·규제가 동시에 요구됩니다.

영역운영 관점 질문
관측성요청 단위 상관 ID, 에러율/지연 분위수(p95/p99), 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능캐시 계층·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포롤백 룬북, 카나리/블루그린, 마이그레이션 호환성·플래그가 문서화되어 있는가
용량피크 트래픽·디스크·파일 디스크립터·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 가능한 한 프로덕션에 가깝게 맞추는 것이 재현율을 높입니다.

확장 예시: 엔드투엔드 미니 시나리오

「Nx 완벽 가이드 | 모노레포·빌드 시스템·캐싱·플러그인·실전 활용」을 실제 배포·운영 흐름으로 옮긴 체크리스트형 시나리오입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

  1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드 표를 API 또는 이벤트 경계에 둔다.
  2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 한 화면(로그+메트릭+트레이스)에서 추적한다.
  3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
  4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지(또는 피처 플래그) 확인한다.
  5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값이 기대 범위인지 본다.

의사코드 스케치(프레임워크 무관)

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)        // 경계에서 거절
  authorize(validated, ctx)                  // 권한·테넌트
  result = domainCore(validated)             // 순수에 가까운 규칙
  persistOrEmit(result, idempotentKey)       // I/O: 멱등·재시도 정책
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상가능 원인조치
간헐적 실패레이스, 타임아웃, 외부 의존성 불안정, DNS최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패환경 변수, 권한, 플랫폼 차이, lockfileCI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정이 로컬과 다름프로필·시크릿·기본값, 지역 리전단일 소스(예: 스키마 검증된 설정)와 배포 매트릭스 표준화
데이터 불일치비멱등 재시도, 부분 쓰기, 캐시 무효화 누락멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

자주 묻는 질문 (FAQ)

Q. Turborepo와 비교하면 어떤가요?

A. Nx가 더 많은 기능을 제공하고 플러그인이 풍부합니다. Turborepo는 더 간단합니다.

Q. Lerna와 비교하면 어떤가요?

A. Nx가 훨씬 빠르고 현대적입니다. Lerna는 더 이상 활발히 개발되지 않습니다.

Q. Nx Cloud가 필수인가요?

A. 아니요, 로컬 캐싱만으로도 충분히 빠릅니다. Nx Cloud는 팀 협업 시 유용합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, Google, Microsoft 등 대기업에서 사용하고 있습니다.