모던 자바스크립트 모노레포 NX

모노레포(Monorepo) 관리를 위한 강력한 빌드 시스템이자 워크플로우 도구입니다.

여러 앱과 라이브러리를 하나의 저장소에서 관리하도록 설계된 툴입니다.

단순히 여러 프로젝트를 한곳에 모으는 것을 넘어, 규모가 커질 때 발생하는 복잡성을 제어하는 데 특화되어 있습니다.

왜 모노레포를 사용하는가?

모두가 자기 저장소에 프롲젝트간 코드 재사용이 어렵다.

시스템전체가 20개정도의 다른 저장소로 나눠져있다.

관련된 저장소를 함께 묶자 모노레포에 넣자

AI 에이전트가 좋은 결정을 하기위해서도 필요하다. 여러 저장소를 수정할 수 없다.

Nx 디렉토리 구조

Workspace
- : 모든 코드와 프로젝트가 담기는 최상위 루트 폴더입니다.
Apps
- : 실제 실행 가능한 애플리케이션이 위치
- 예: React, Angular, Next.js, NestJS 앱 등
- 각 앱은 독립적으로 빌드/서버 실행 가능
Libs
- 재사용 가능한 코드 모음
- 여러 앱에서 공통으로 사용하는 모듈
- 비즈니스 로직, UI 컴포넌트, 유틸 등

Apps, Libs는 Nx의 핵심 철학입니다.
코드는 최대한 Libs에 작성하고, Apps는 Libs를 의존합니다.

project.json (또는 workspace.json)
- 각 프로젝트의 빌드/테스트/린트 설정
- 최근 버전에서는 프로젝트별 project.json 분리 방식 사용
- ex) apps/web-app/project.json
- ex) libs/ui/project.json
tsconfig.baas.json
- TypeScript 경로 매핑 설정
- libs import 시 경로 단축 지원

Generators
- : 표준화된 구조의 앱이나 라이브러리를 명령어로 자동 생성합니다. (예: nx g @nx/react:lib my-lib)
Executors
- : 빌드, 테스트, 린트 같은 작업을 실행하는 추상화된 명령어입니다. (nx build my-app)

의존성 흐름: apps → feature libs → shared libs

Nx는 내부적으로 의존성 그래프를 관리를 합니다.

nx graph

프로젝트가 늘어나도 빌드속도가 느려지지 않게 하는 단계

Affected Commands (영향도 분석): 코드 변경 시 전체를 다시 빌드하지 않고, 수정된 부분과 그에 의존하는 프로젝트만 찾아내서 테스트/빌드합니다.
- 명령어: nx affected:build
Computation Caching (캐싱): 한 번 실행된 작업 결과물을 로컬에 저장합니다. 코드가 변하지 않았다면 다음 실행 시 0초 만에 결과를 불러옵니다.
Dependency Graph (의존성 그래프): 프로젝트 간에 누가 누구를 참조하는지 시각적으로 보여줍니다. 아키텍처가 꼬이는 것을 방지할 수 있습니다.
- 명령어: nx graph
Task Pipeline: 특정 작업(예: 빌드)을 수행하기 전 반드시 실행되어야 할 작업(예: 테스트)의 순서를 정의합니다.

출처

JetBrains Javascript day 2025 - victorsavkin

728x90

POLEVED