Nx 모노레포의 TypeScript 구성이 진짜 복잡할까?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

• Nx 모노레포를 사용하는 TypeScript 개발자
• 다중 프로젝트 환경에서 코드 공유 및 빌드 최적화를 고려하는 중간 이상 개발자
• tsconfig.json 구성의 복잡성을 이해하고자 하는 모든 개발자

핵심 요약

• tsconfig.base.json은 모든 프로젝트가 상속받는 전역 설정의 핵심이며, @my-org/my-lib과 같은 경로 별칭을 정의할 수 있음
• Nx는 jest.config.ts나 .eslintrc.json과 같은 도구별 설정 파일을 감지해 test, lint 타겟을 자동 생성
• nx.json은 작업 순서, 캐싱, 플러그인 설정 등 작업 공간의 운영적 설정을 관리

섹션별 세부 요약

1. Nx 모노레포의 TypeScript 구성 복잡성

• Nx는 50개 이상의 tsconfig 파일을 관리하며, 전역 설정과 프로젝트별 설정 간 상호작용을 처리해야 함
• tsconfig.base.json에서 설정한 경로 별칭(@my-org/my-lib)이 모든 프로젝트에 적용되며, 프로젝트별 tsconfig.app.json/tsconfig.lib.json이 확장 가능
• tsconfig.spec.json은 테스트 환경 전용 설정을 제공 (예: Jest 테스트에 맞춘 모듈 시스템 구성)

2. Nx의 자동 타겟 인프런스

• jest.config.ts 또는 .eslintrc.json 파일이 존재할 경우, Nx는 자동으로 test/lint 타겟을 생성
• project.json 또는 package.json의 "nx": {} 속성을 통해 타겟을 명시적으로 정의할 수 있음
• 복잡한 설정이 필요할 때만 수동으로 타겟을 정의하며, 일반적으로 자동 인프런스를 활용

3. `nx.json`의 역할

• nx.json은 작업 순서(build → test), 캐싱 설정, 플러그인(@nrwl/react 등) 관리
• nx.json에서 정의한 작업 의존성은 Nx CLI가 자동으로 실행 순서를 조절
• nx.json은 tsconfig.base.json과 별개로 운영적 설정을 관리 (예: defaultProject, cacheable 태스크)

결론

• tsconfig.base.json을 통해 전역 설정을 중앙화하고, 프로젝트별 tsconfig.app.json/tsconfig.lib.json을 사용해 확장
• Nx의 자동 타겟 인프런스 기능을 활용해 project.json의 복잡성을 줄이고, jest.config.ts 등 도구별 설정 파일을 명시적으로 관리
• nx.json에서 작업 의존성과 캐싱 설정을 명확히 정의해 빌드 시간 최적화 및 개발 흐름 일관성을 유지하세요.