Nx Monorepo 가이드: React & Node Fullstack 앱 개발
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: 다중 프로젝트 관리가 필요한 프론트엔드/백엔드 개발자 및 DevOps 엔지니어
- 난이도: 중급~고급 (Monorepo 개념과 Nx CLI 사용 경험 필요)
핵심 요약
- Nx는 Monorepo의 핵심 도구로,
smart task orchestration
과computation caching
을 통해 빌드/테스트 속도를 극대화** - Nx CLI는
nx generate
,nx build
,nx test
등으로 프로젝트 생성, 빌드, 테스트를 1-click으로 자동화** - Monorepo 구조에서
nx.json
,tsconfig.json
등 구성 파일 관리와affected:build
명령어로 변경된 프로젝트만 빌드
섹션별 세부 요약
1. Monorepo의 문제점과 Nx의 필요성
- 문제점: 다중 프로젝트 관리 시 버전 제어 복잡성, 공유 코드 중복, 빌드/테스트 효율성 저하
- Nx의 역할: 공유 라이브러리 직접 import, 코드 생성기, CI/CD 최적화
2. Nx vs. Lerna, Turborepo, npm Workspaces
- Lerna: 패키지 출판 중심, Nx는 빌드 시스템 포함
- Turborepo: 성능 우수, Nx는 코드 생성/플러그인 생태계 제공
- npm Workspaces: 기초 기능 제공, Nx는 빌드 오케스트레이션 및 캐싱 추가
3. Nx 워크스페이스 설정
- 명령어:
npx create-nx-workspace@latest my-awesome-nx-repo
npx
: 전역 설치 없이 생성기 실행my-awesome-nx-repo
: 워크스페이스 폴더명- 설치 후 구성 파일:
nx.json
: 프로젝트 관계 정의 및 캐싱 전략 설정tsconfig.base.json
: 모든 프로젝트의 TypeScript 공통 설정
4. Nx CLI 명령어
- 프로젝트 생성:
nx generate @nx/react:app my-app
- 서버 실행:
nx serve my-react-app
- 빌드/테스트:
nx build
,nx test
- 변경된 프로젝트만 실행:
nx affected:build
5. Node.js 백엔드 추가
- 명령어:
npx nx generate @nx/node:app packages/my-backend --framework=express
- 생성 구조:
src/
: Express.js 기본 폴더 구조tsconfig.json
:packages/my-backend
경로 추가
결론
- Nx는 Monorepo에서의 효율성과 확장성을 극대화하는 도구로,
affected:build
명령어를 통해 CI/CD 파이프라인 최적화 - 프로젝트 생성, 빌드, 테스트, 라이브러리 공유 등 Nx CLI와 구성 파일 관리가 핵심
- VS Code 확장 프로그램 Nx Console 사용으로 개발 생산성 향상