nx 파일 구조

NX의 파일 구조와 설정 파일들의 역할을 상세히 설명하겠습니다.

1. 기본 파일 구조

my-nx-workspace/
├── apps/                     # 애플리케이션들이 위치
│   ├── app1/
│   │   ├── src/
│   │   ├── project.json     # 앱별 빌드 설정
│   │   └── tsconfig.json    # 앱별 TypeScript 설정
├── libs/                     # 공유 라이브러리들이 위치
│   ├── lib1/
│   │   ├── src/
│   │   ├── project.json
│   │   └── tsconfig.json
├── tools/                    # 커스텀 스크립트, 도구들
├── nx.json                   # NX 워크스페이스 설정
├── package.json             
└── tsconfig.base.json       # 기본 TypeScript 설정

2. 주요 설정 파일들의 역할과 실행 순서

A. package.json

{
  "name": "my-nx-workspace",
  "version": "0.0.0",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "dependencies": {
    "@nx/angular": "^latest",
    "@nx/nest": "^latest"
  }
}

• 역할: 프로젝트의 메타데이터, 의존성, 스크립트 정의
• 실행 시점: npm/yarn 명령어 실행 시 최초 참조
• 목적: 워크스페이스 전체의 패키지 관리와 스크립트 실행 정의

B. nx.json

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "test", "lint"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    }
  }
}

• 역할: NX 워크스페이스 전체 설정 관리
• 실행 시점: NX 명령어 실행 시 초기 로드
• 목적: 캐싱, 태스크 실행, 의존성 관리 등 NX 핵심 기능 설정

C. tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@my-org/lib1": ["libs/lib1/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

• 역할: 전체 프로젝트의 기본 TypeScript 설정
• 실행 시점: 모든 TypeScript 컴파일 작업 전 참조
• 목적: 공통 TypeScript 설정과 경로 별칭(path aliases) 정의

D. apps/[app-name]/tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../../dist/apps/[app-name]",
    "types": ["node", "jest"]
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

• 역할: 개별 앱의 TypeScript 설정
• 실행 시점: 앱 빌드/실행 시 참조
• 목적: 앱별 특화된 TypeScript 설정 정의

E. apps/[app-name]/tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/apps/[app-name]",
    "module": "commonjs",
    "types": ["node"]
  },
  "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"],
  "include": ["**/*.ts"]
}

• 역할: 앱의 실제 빌드를 위한 TypeScript 설정
• 실행 시점: 앱 빌드 시 참조
• 목적: 프로덕션 빌드를 위한 구체적인 설정 정의

F. apps/[app-name]/project.json

{
  "name": "app-name",
  "projectType": "application",
  "sourceRoot": "apps/app-name/src",
  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/app-name",
        "main": "apps/app-name/src/main.ts",
        "tsConfig": "apps/app-name/tsconfig.app.json"
      },
      "configurations": {
        "production": {
          "optimization": true,
          "extractLicenses": true
        },
        "development": {
          "optimization": false,
          "extractLicenses": false
        }
      }
    },
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "buildTarget": "app-name:build"
      }
    }
  }
}

• 역할: 앱별 빌드, 실행, 테스트 등의 설정
• 실행 시점: nx build/serve/test 등 명령어 실행 시
• 목적: 앱의 빌드/실행 프로세스 정의

3. 실행 순서와 타이밍

1) 프로젝트 초기화 시:

• package.json → nx.json → tsconfig.base.json 순으로 로드
• 워크스페이스 전체 설정 구성

2) 앱 빌드/실행 시:

nx serve my-app 실행 →
↓
project.json 로드 (빌드 설정 확인)
↓
tsconfig.json 로드 (기본 설정)
↓
tsconfig.app.json 로드 (빌드별 설정)
↓
tsconfig.base.json 참조 (공통 설정)
↓
빌드 프로세스 시작

3) 라이브러리 참조 시:

• tsconfig.base.json의 paths 설정 참조
• 라이브러리의 project.json 설정 확인
• 의존성 체크 및 빌드 순서 결정

4) 개발 서버 실행 시:

• project.json의 serve 설정 참조
• webpack 설정 로드 (있는 경우)
• 개발 서버 시작

5) 프로덕션 빌드 시:

• project.json의 build:production 설정 참조
• 최적화, 번들링 등 프로덕션 설정 적용
• 결과물 생성

이러한 구조와 설정들은 모듈성, 재사용성, 확장성을 극대화하면서도 일관된 개발 환경을 제공하는 것이 목적입니다.