MDX Express

1인 개발자를 위한 Nx 완벽 가이드

프로젝트가 커질수록 복잡해지는 개발 환경을 Nx로 체계적으로 관리하는 방법을 알아보세요

1인 개발자를 위한 Nx 완벽 가이드

혼자서 여러 프로젝트를 관리하다 보면 언젠가는 이런 고민이 시작됩니다. "공통으로 사용하는 코드를 어떻게 관리할까?", "라이브러리 버전 업데이트가 너무 번거로워", "빌드와 테스트를 효율적으로 하는 방법이 없을까?"

Nx는 이런 고민들을 해결해주는 강력한 도구입니다. 단순히 monorepo 관리 도구를 넘어서, 개발 워크플로우 전체를 혁신적으로 개선할 수 있습니다.

Nx란?

Nx는 확장 가능한 개발 도구로, monorepo와 polyrepo 모두를 지원합니다. 코드 생성, 의존성 그래프, 캐싱된 빌드 등을 통해 개발 경험을 크게 향상시킵니다.

왜 1인 개발자에게 Nx가 필요할까?

현실적인 문제들

1인 개발을 하다 보면 자연스럽게 마주치는 상황들이 있습니다:

  • 여러 프로젝트의 공통 로직: 인증, API 클라이언트, 유틸리티 함수들이 프로젝트마다 복사되어 있음
  • 라이브러리 버전 관리: 각 프로젝트마다 다른 버전의 React, TypeScript를 사용하고 있어 혼란
  • 빌드 시간: 프로젝트가 커질수록 빌드 시간이 기하급수적으로 증가
  • 코드 품질: 각 프로젝트마다 다른 ESLint, Prettier 설정으로 일관성 부족

Nx가 제공하는 해결책

라이브러리 중앙화: 공통 코드를 라이브러리로 분리하고, 여러 앱에서 import하여 사용할 수 있습니다. 버전 관리도 한 곳에서 처리됩니다.

Nx 시작하기

1

새 워크스페이스 만들기

Nx 워크스페이스를 생성하는 것부터 시작해보겠습니다.

bash
npx create-nx-workspace@latest myworkspace

프롬프트에서 다음과 같이 선택하세요:

  • Which stack do you want to use? → React (또는 원하는 스택)
  • What framework would you like to use? → Next.js (또는 선호하는 프레임워크)
  • Integrated monorepo, package-based, or standalone? → integrated
2

프로젝트 구조 이해하기

생성된 워크스페이스 구조를 살펴보겠습니다.

bash
myworkspace/
├── apps/          # 애플리케이션들
│   └── my-app/    # 메인 앱
├── libs/          # 공유 라이브러리들
├── tools/         # 커스텀 도구들
├── nx.json        # Nx 설정
└── package.json   # 워크스페이스 의존성
구조의 의미

apps 폴더에는 배포 가능한 애플리케이션들이, libs 폴더에는 재사용 가능한 라이브러리들이 들어갑니다.

3

공유 라이브러리 만들기

여러 앱에서 사용할 공통 라이브러리를 생성해보겠습니다.

bash
nx g @nx/react:library ui-components
nx g @nx/js:library utils
nx g @nx/js:library api-client

이렇게 하면 UI 컴포넌트, 유틸리티, API 클라이언트 라이브러리가 생성됩니다.

실제 사용 시나리오

시나리오 1: 여러 프론트엔드 앱 관리

블로그, 관리자 대시보드, 랜딩 페이지를 모두 관리한다고 가정해보겠습니다.

bash
# 블로그 앱
nx g @nx/next:app blog

# 관리자 대시보드
nx g @nx/next:app admin-dashboard

# 랜딩 페이지
nx g @nx/react:app landing-page

모든 앱이 같은 UI 컴포넌트와 API 클라이언트를 공유할 수 있습니다:

typescript
// apps/blog/src/pages/index.tsx
import { Button } from '@myworkspace/ui-components';
import { apiClient } from '@myworkspace/api-client';

export default function BlogHome() {
  return (
    <div>
      <Button onClick={() => apiClient.getPosts()}>
        블로그 포스트 가져오기
      </Button>
    </div>
  );
}

시나리오 2: 효율적인 빌드와 테스트

캐싱 효과를 직접 체험해보겠습니다.

bash
# 처음 빌드 (모든 것이 빌드됨)
nx run-many -t build

# 코드 변경 없이 다시 빌드 (캐시에서 가져옴)
nx run-many -t build
# → 거의 즉시 완료!

변경된 부분만 다시 빌드되기 때문에 개발 속도가 크게 향상됩니다.

고급 기능들

의존성 그래프 시각화

프로젝트 관계 파악하기

Nx는 프로젝트 간의 의존성을 시각적으로 보여주는 기능을 제공합니다.

bash
nx graph

이 명령어를 실행하면 브라우저에서 프로젝트 간의 관계를 한눈에 볼 수 있습니다. 순환 의존성이 있는지, 어떤 라이브러리가 어떤 앱에서 사용되는지 명확하게 파악할 수 있습니다.

원격 캐시 설정

Nx Cloud

팀원들과 빌드 캐시를 공유하여 더욱 빠른 개발이 가능합니다.

1인 개발자라도 여러 컴퓨터에서 작업할 때 원격 캐시가 유용합니다. 회사 컴퓨터에서 빌드한 결과를 집에서도 활용할 수 있습니다.

bash
nx connect-to-nx-cloud

자동화된 코드 생성

일관된 코드 스타일을 유지하기 위해 제너레이터를 활용할 수 있습니다.

bash
# UI 컴포넌트 생성
nx g @nx/react:component Button --project=ui-components

# API 엔드포인트 생성  
nx g @nx/js:library feature-auth
nx g @nx/react:component LoginForm --project=feature-auth

마이그레이션 전략

기존 프로젝트를 Nx로 이전하기

이미 여러 개의 separate 프로젝트가 있다면 점진적으로 마이그레이션할 수 있습니다.

1

새 Nx 워크스페이스 생성

bash
npx create-nx-workspace@latest migration-workspace --preset=npm
2

기존 프로젝트를 앱으로 추가

bash
# 기존 Next.js 프로젝트 추가
nx g @nx/next:app existing-blog --directory=apps/existing-blog

# 기존 코드를 복사
cp -r ../old-blog/src apps/existing-blog/src
cp -r ../old-blog/public apps/existing-blog/public
3

공통 코드 분리

중복된 코드를 찾아서 라이브러리로 분리합니다.

bash
nx g @nx/react:library shared-components
nx g @nx/js:library shared-utils

성능 최적화 팁

1. 프로젝트 경계 설정

의존성 규칙 설정

라이브러리 간의 의존성 규칙을 명확히 하여 아키텍처를 깔끔하게 유지하세요.

json
{
  "namedInputs": {
    "default": ["{projectRoot}/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts"]
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    }
  }
}

2. 빌드 최적화

bash
# CPU 코어 수만큼 병렬로 빌드
nx run-many -t build --parallel=4

# 영향받은 프로젝트만 빌드
nx affected -t build

실전 사례: 개인 프로젝트 구성

실제로 제가 관리하는 프로젝트 구조를 예시로 들어보겠습니다:

bash
my-projects/
├── apps/
│   ├── portfolio/          # 포트폴리오 사이트 (Next.js)
│   ├── blog/              # 개인 블로그 (Next.js)
│   ├── admin/             # 콘텐츠 관리 (React)
│   └── mobile-app/        # 모바일 앱 (React Native)
├── libs/
│   ├── ui/                # 공통 UI 컴포넌트
│   ├── api/               # API 클라이언트
│   ├── auth/              # 인증 로직
│   ├── database/          # 데이터베이스 스키마
│   └── utils/             # 유틸리티 함수
└── tools/
    └── deployment/        # 배포 스크립트

이 구조의 장점:

  • 코드 재사용: UI 컴포넌트와 비즈니스 로직을 모든 앱에서 공유
  • 일관성: 같은 디자인 시스템과 API 인터페이스 사용
  • 효율성: 한 번의 명령어로 모든 프로젝트 빌드/테스트

트러블슈팅

자주 발생하는 문제들

순환 의존성 문제

라이브러리 A가 B를 import하고, B가 A를 import하는 상황이 발생할 수 있습니다.

해결 방법: 의존성 그래프를 확인하고 공통 기능을 별도 라이브러리로 분리하세요.

bash
nx graph --focus=affected

빌드 속도가 느린 경우

  1. 캐시 상태 확인
bash
nx reset  # 캐시 초기화
nx run-many -t build --verbose  # 상세 로그 확인
  1. 병렬 처리 활용
bash
nx run-many -t build --parallel=max

결론

Nx는 1인 개발자에게 enterprise급 개발 도구를 제공합니다. 초기 설정은 다소 복잡할 수 있지만, 프로젝트 규모가 커질수록 그 가치를 확실히 느낄 수 있습니다.

특히 다음과 같은 상황이라면 Nx 도입을 강력히 추천합니다:

추천 여러 프론트엔드 프로젝트 관리 추천 공통 라이브러리 중앙화 필요 추천 빌드 시간 단축이 중요 추천 코드 품질 일관성 유지

시작하는 팁

작은 프로젝트부터 시작해서 점진적으로 확장해보세요. Nx의 진가는 프로젝트가 복잡해질수록 더욱 빛납니다.

참고자료

Nx 공식 문서

Nx의 모든 기능과 가이드를 제공하는 공식 문서입니다.

Nrwl Team

Nx GitHub Repository

Nx의 소스 코드와 예제를 확인할 수 있습니다.

Nx Cloud

원격 캐싱과 분산 태스크 실행을 위한 서비스입니다.