NX와 함께하는 모노레포 알아가기

여러분은 모노레포 사용하시나요?

최근 모노레포라는 개념이 주목받고 있습니다. 

그렇다면 대체 모노레포는 무엇이길래 최근 주목받고 있는 것일까요?

모노레포란?

먼저 모노레포가 무엇인지 알아야 앞으로의 이야기를 잘 풀어갈 수 있을 것 같은데요,
모노레포란 여러 개의 프로젝트/ 기능을 하나의 저장소에서 관리하는 개발 전략입니다. 단일 저장소에서 독립적인 프로젝트를 보관하고 관리함으로써 공유와 협업을 간소화시켜 줍니다.

사용 이유

이러한 모노레포를 사용하는 이유는 정말이지 명확한데요.

먼저 코드 구조를 한 번에 파악하기 쉽습니다. 코드를 한 번에 볼 수 있으며, 여러 사람들의 변경사항을 한번에 체크 가능합니다. 또한 여러 프로젝트에 있는 어떠한 로직 또는 페이지를 업데이트 해야하는 일들이 있다면 놓치지않고 한번에 파악이 가능합니다. 

 

그리고 코드 공유가 말도 안 되게 간단합니다. 그저 같은 모노레포 안에 있다는 이유만으로 프로젝트 간에 코드를 공유하고 재사용이 가능해집니다. 이는 성격이 비슷한 프로젝트가 있다면 너무나도 좋은 장점입니다.

 

마지막으로 프로젝트 간에 일관성 유지가 간단합니다. lint, prettier를 모노레포에서 설정한다면 모노레포 안에 있는 프로젝트는 모두 같은 규칙이 적용되기 때문에 일관성 유지가 간단해집니다.

쉽게 풀어쓴다면, 여러 프로젝트를 진행하다 보면 반복적으로 기본 세팅이나 라이브러리 설치에 시간을 많이 사용하게 되는데, 모노레포를 사용한다면 이러한 시간 낭비를 줄이고, 동일한 기본 세팅과 라이브러리를 공유하면서 여러 프로젝트를 효율적으로 관리할 수 있습니다. 또한 성격이 비슷한 프로젝트 간에 코드를 공유하고 재상요 이 가능하여 생산성이 매우 높아집니다.

 

NX란?

모노레포를 사용하다 보면 필연적으로 NX라는 용어를 들어보게 되는데요. 그렇다면 NX는 무엇일까요?
NX는 모노레포를 위한 빌드 시스템이자 개발 도구입니다. 멀티 프로젝트 관리를 위한 다양한 기능을 제공합니다.

 

이러한 NX는 다양한 기능을 가지고 있습니다.

모노레포 관리

모노레포 내의 여러 앱(apps/)과 라이브러리(libs/)를 한 저장소에서 효율적으로 관리합니다.
공통 라이브러리,, 유틸, UI 컴포넌트를 여러 프로젝트에서 재사용이 가능합니다.
예를 들어 libs/ui는 web, admin 앱 모두에서 사용 가능합니다.

코드 생성

반복되는 코드, 설정, 모듈을 명령어를 통해 자동으로 생성시켜 줍니다.
이러한 기능은 일관성 있는 프로젝트 구조를 유지시키는데 매우 큰 도움이 되며, 생산성이 증가합니다.

npx nx g @nx/next:app web   # Next.js 앱 생성
npx nx g @nx/react:lib ui   # React 라이브러리 생성

 

빌드/테스트 최적화

프로젝트 내에서 변경된 코드만 빌드와 테스트를 진행합니다.
이러한 기능은 시간을 절약시키는데 매우 큰 도움을 줍고, CI/CD의 속도가 향상됩니다. 이러한 기능은 아래 명령어로 사용 가능합니다.

nx affected:build
nx affected:test

버전 관리 & 마이그레이션

NX는 프로젝트 의존성 버전 업데이트가 자동화되어 있습니다. 아래 명령어를 사용하여 추천 패키지 버전 업과 코드 구조 자동 변경이 가능합니다. 

nx migrate latest

통합 스크립트

NX는 모든 앱과 라이브러리를 한 곳에서 관리가 가능합니다. 또한 테스트, 린팅, 빌드, 배포 스크립트를 통합해서 관리합니다.

npx nx test web
npx nx lint web
npx nx build web

 

이처럼 NX는 많은 기능을 가지고 있습니다. 그렇다면 NX는 어떻게 설치하고, 설치 시 기본 구조는 어떻게 되어있을까요?

NX 설치

먼저 NX 모노레포를 설치하는 방법에 대해 알아봅시다. 명령어는 크게 3가지로 구성되어 있고, 저는 NX + Next.js로 설정했습니다.

NX 워크페이스 생성

npx create-nx-workspace@latest your-monorepo-name

이 명령어는 새로운 NX 모노레포 프로젝트를 생성하는 명령어입니다.
your-monorepo-name에 당신의 모노레포 이름을 기입하고 실행시키면 앱/패키지 관리 방식, 스타일시트, 테스트 러너 등을 선택하게 됩니다.
그것들을 모두 선택한 후엔 당신의 모노레포가 아래와 같은 구조로 설치됩니다.

your-monorepo-name/
  apps/
  libs/
  nx.json
  package.json
  ...

@nx/next 설치

npm install -D @nx/next

이 명령어는 NX에서 Next.js 앱을 생성할 수 있도록 지원하는 플러그인을 설치하는 명령어입니다.
여기서 -D가 뜻하는 것은 devDependencies로 설치한다는 뜻으로, 개발용 모듈로 설치한다는 뜻과 같습니다.

-D를 빼고 설치한다면?
배포 시 불필요한 라이브러리까지 설치해야 하므로 꼭 붙이는 것을 추천합니다.

NX 17 이후에는 @nx/next 플러그인을 기본 제공합니다.

Next.js 앱 생성

npx nx g @nx/next:app web

위 명령어는 NX Generator(g)를 이용하여 Next.js 앱을 생성한다는 의미입니다.

앱/프로젝트 이름은 web입니다. 이 명령어를 실행하면 apps/ 안에 새로운 앱/프로젝트가 생성됩니다.

apps/
  web/
    pages/
    public/
    styles/
    ...

 

프로젝트 기본 구조 분석

이런 식으로 설치를 완료하고 나면 모노레포의 기본적인 구조가 완성되는데요. 그 구조는 아래와 같습니다.

my-workspace/
├─ apps/
│  ├─ web/
│  │  ├─ pages/
│  │  ├─ public/
│  │  ├─ styles/
│  │  ├─ next.config.js
│  │  ├─ tsconfig.json
│  │  └─ package.json
│  └─ admin/      <- 다른 앱
├─ libs/
│  ├─ ui/
│  │  ├─ Button.tsx
│  │  ├─ Input.tsx
│  │  └─ index.ts
│  ├─ utils/
│  │  └─ format.ts
│  └─ types/
│     └─ index.ts
├─ nx.json
├─ package.json
├─ tsconfig.base.json
└─ workspace.json

이제 기본 구조 요소를 한번 알아봅시다.

apps/

이 요소는 실제로 배포 가능한 애플리케이션을 담는 폴더입니다. 
apps/ 안에는 우리가 설정한 앱/프로젝트가 위치하며, 각각 독립적인 설정을 부여할 수 있습니다.

또한 각 앱/프로젝트를 독립적으로 빌드하고 테스트 가능합니다.

libs/

이 요소는 여러 앱에서 재사용 가능한 코드를 담는 곳입니다.

앱/프로젝트와는 독립적으로 개발과 테스트가 가능합니다.

nx.json

이 요소 안에는 NX 워크스페이스 전반의 설정 파일이 위치합니다. 아래와 같이 말이죠.

{
  "npmScope": "my-workspace",
  "implicitDependencies": {
    "package.json": "*",
    "tsconfig.base.json": "*"
  },
  "projects": {
    "web": { "tags": [] },
    "api": { "tags": [] },
    "ui": { "tags": [] }
  }
}

tsconfig.base.json

이 요소안에는 TS 공통 설정 파일이 존재합니다.

workspace.json (또는 project.json)

이 요소는 각 앱/프로젝트의 빌드, 테스트, 실행, lint 등의 설정이 위치하고 있습니다.

{
  "version": 2,
  "projects": {
    "web": {
      "root": "apps/web",
      "sourceRoot": "apps/web/src",
      "projectType": "application",
      "targets": {
        "build": { "executor": "@nrwl/next:build" },
        "serve": { "executor": "@nrwl/next:server" },
        "lint": { "executor": "@nrwl/linter:eslint" }
      }
    }
  }
}

  package.json

이 요소는 모두에게 익숙한 요소일 텐데요. 원래의 역할과 비슷합니다.

전체 워크스페이스 의존성과 스크립트 관리의 역할을 가지고 있습니다.

이 요소는 각 앱/프로젝트마다 별도로 하나씩 가지고 있습니다.