NX 모노레포 적용 시리즈 [NodeJS, NextJS, Yarn] (1)

2024-07-30 | dev / tools | Nx, Monorepo, Yarn, Nodejs, Nextjs, Github

NX 모노레포의 9가지 강력한 이점과 그 예시를 코드로 나타낸 포스팅

NX 모노레포의 9가지 강력한 이점

NX 모노레포는 현대적인 웹 개발에서 점점 더 중요해지고 있습니다. 이 강력한 도구가 제공하는 주요 이점을 먼저 살펴보고 이를 실제로 제 개인 프로젝트에 적용해보는 포스팅 입니다. 최대한 쉽게 설명하기 위해 노력하겠습니다.

1. 🔄 코드 재사용성 향상

• 공통 컴포넌트와 유틸리티를 쉽게 공유
• 중복 코드 감소 및 일관성 유지

// libs/shared/ui/src/lib/button.tsx
import React from 'react';

export const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

// apps/web/src/app/page.tsx
import { Button } from '@myorg/shared/ui';

export default function Home() {
  return (
    <Button onClick={() => console.log('Clicked!')}>Click me</Button>
  );
}

2. 🛠 일관된 개발 환경

• 모든 프로젝트에 동일한 린팅 및 포맷팅 규칙 적용
• 통합된 CI/CD 파이프라인으로 일관된 프로세스 유지

// .eslintrc.json
{
  "root": true,
  "extends": ["plugin:@nx/react", "plugin:@nx/typescript"],
  "rules": {
    "no-console": "warn"
  }
}

3. 📦 의존성 관리 간소화

• 루트 레벨에서 의존성 중앙 관리
• 내부 패키지 간 의존성 관리 용이

// package.json
{
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@nx/react": "16.3.2",
    "@types/react": "18.0.38"
  }
}

4. ⚡ 빌드 및 테스트 최적화

• 변경된 부분만 선택적으로 빌드 및 테스트
• 캐싱을 통한 빌드 시간 대폭 감소

nx affected:build
nx affected:test

5. 📈 스케일링 용이성

• nx generate 명령어로 새 프로젝트 쉽게 추가
• 일관된 구조로 신규 팀원 온보딩 간소화

nx g @nx/react:lib my-new-lib
nx g @nx/next:app my-new-app

6. 👥 협업 개선

• 단일 저장소로 코드 리뷰 및 변경 사항 추적 용이
• 프로젝트 간 관계 시각화로 아키텍처 이해도 향상

nx graph

7. 🏷 버전 관리 및 릴리스 프로세스

• 모든 프로젝트 버전 일괄 관리
• Lerna 등 도구로 릴리스 프로세스 자동화

// package.json
{
  "scripts": {
    "version": "nx affected --target=version",
    "publish": "nx affected --target=publish"
  }
}

8. 🚀 성능 최적화

• 계산 캐싱으로 반복 작업 시간 단축
• 증분 빌드로 전체 빌드 시간 감소

// nx.json
{
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  }
}

9. 🖥 마이크로 프론트엔드 지원

• 마이크로 프론트엔드 아키텍처 쉽게 구현
• 독립적인 프로젝트 관리와 동시에 코드 공유 가능

// apps/host/src/app/app.tsx
import { loadRemoteModule } from '@nx/react/mf';
import React from 'react';

const RemoteApp = React.lazy(() => loadRemoteModule('remote', './App'));

export function App() {
  return (
    <React.Suspense fallback="Loading...">
      <RemoteApp />
    </React.Suspense>
  );
}

---

NX 모노레포는 복잡한 프로젝트나 여러 관련 프로젝트를 효율적으로 관리하고자 하는 팀에게 강력한 해결책을 제공합니다. 이러한 이점들은 프로젝트의 규모가 커질수록 더욱 빛을 발하며, 개발 생산성과 코드 품질을 크게 향상시킬 수 있습니다.