Nx 프로젝트 진행하기(1)

목표

react-monorepo라는 이름의 최상단 디렉토리를 만들고 그 안에 libs 디렉토리와 여러 하위 디렉토리(assets, components, data, page, store, styles)를 생성하려면, Nx 명령어와 일반적인 디렉토리 생성 명령어를 조합해 사용할 수 있습니다. 여기서는 먼저 Nx 작업 공간을 생성하고, 그 안에서 필요한 라이브러리와 폴더 구조를 설정하는 방법을 설명하겠습니다.

Nx 작업 공간 생성

최상단에 react-monorepo라는 Nx 작업 공간을 생성합니다. Nx CLI를 사용하여 이 작업을 수행할 수 있습니다. 터미널에서 다음 명령어를 실행하세요:

npx create-nx-workspace react-monorepo --preset=empty

이 명령은 react-monorepo라는 폴더를 생성하고, Nx 작업 공간을 초기화합니다. --preset=empty 옵션은 초기 프로젝트나 설정을 추가하지 않고 빈 작업 공간을 생성합니다.

libs 내부의 라이브러리 생성

Nx CLI를 사용하여 libs 디렉토리 내에 필요한 라이브러리들을 생성할 수 있습니다. 예를 들어, components 라이브러리를 생성하려면 다음과 같은 명령어를 사용합니다:

nx generate @nrwl/js:lib components --directory=libs

이 명령은 libs/components 위치에 라이브러리를 생성합니다. 여기서 @nrwl/js:lib는 JavaScript 라이브러리를 생성하기 위한 Nx의 스키마를 나타냅니다. React 컴포넌트 라이브러리를 만들기 위해서는 @nrwl/react:lib를 사용할 수 있습니다. --directory=libs 옵션은 생성될 라이브러리의 위치를 지정합니다.

나머지 디렉토리 구조 생성

assets, data, page, store, styles와 같은 나머지 폴더들은 특정 Nx 스키마에 속하지 않는 일반 디렉토리입니다. 이 폴더들은 직접 생성할 수 있습니다. Nx 프로젝트 내에서 특별한 빌드 프로세스나 의존성 관리가 필요하지 않은 경우, 터미널에서 일반적인 디렉토리 생성 명령어(mkdir)를 사용하여 이들 폴더를 생성할 수 있습니다.

react-monorepo 디렉토리로 이동한 후, 다음 명령어를 실행하여 필요한 폴더들을 생성할 수 있습니다:

cd react-monorepo
mkdir -p libs/assets libs/data libs/page libs/store libs/styles

위의 단계를 통해 원하는 디렉토리 구조를 Nx 모노레포 내에 성공적으로 구성할 수 있습니다. 이 구조를 바탕으로 공용 컴포넌트, 스타일, 데이터 등을 효율적으로 관리하고 재사용할 수 있게 됩니다.

스키마란?

nx generate @nrwl/js:lib 또는 nx generate @nrwl/react:lib와 같은 명령어를 사용하여 libs 디렉토리 내에 라이브러리를 생성할 때, @nrwl/js:lib 또는 @nrwl/react:lib와 같은 표현을 "스키마(Schema)"라고 부릅니다. 스키마는 Nx 또는 Angular CLI에서 제공하는, 프로젝트 또는 라이브러리 생성, 구성 변경 등을 위한 미리 정의된 명령어 세트 또는 템플릿을 의미합니다. 스키마를 사용하면 특정 유형의 프로젝트 또는 라이브러리에 필요한 기본 파일, 설정, 디렉토리 구조 등을 자동으로 생성하고 구성할 수 있습니다.

스키마를 사용하는 경우의 장점

• 일관성: 스키마를 사용하면 프로젝트나 라이브러리가 Nx의 모범 사례와 일관된 방식으로 생성됩니다. 이는 코드베이스 전체의 일관성을 유지하는 데 도움이 됩니다.
• 시간 절약: 기본 구조, 설정 파일, 의존성 등을 수동으로 생성하고 구성하는 대신, 스키마를 사용하여 이 모든 작업을 몇 초 안에 완료할 수 있습니다.
• 오류 감소: 스키마를 사용하면 사람이 수동으로 설정을 잘못 구성하는 실수를 줄일 수 있습니다.

직접 디렉토리와 파일을 생성하는 경우

• 유연성: 특정한 Nx 스키마에 속하지 않는 자산(예: assets, data 디렉토리 등)의 경우, 필요에 따라 직접 디렉토리와 파일을 생성하여 더 큰 유연성을 가질 수 있습니다.
• 특수한 요구사항 처리: 프로젝트의 특수한 요구사항이나 구조적인 예외 상황이 있을 경우, 수동 생성을 통해 이러한 요구사항을 더 정확히 충족시킬 수 있습니다.

스키마와 수동 생성의 차이

• 스키마 사용: 미리 정의된 템플릿과 설정을 통해 자동으로 프로젝트 구조와 파일을 생성합니다. 이 방법은 효율적이며 Nx의 모범 사례를 따르는 데 도움이 됩니다.
• 수동 생성: 사용자가 직접 디렉토리와 파일을 만들고 설정을 구성합니다. 이 방법은 더 유연하며, 특수한 요구사항이나 프로젝트 구조에 대해 더 많은 제어를 할 수 있습니다.

따라서, 프로젝트의 특정 부분(예: 공용 컴포넌트 라이브러리)에 대해 Nx의 자동화된 도구와 모범 사례를 활용하고자 한다면 스키마를 사용하는 것이 좋습니다. 반면, 특별한 빌드 프로세스나 설정이 필요하지 않은 자산이나, 프로젝트의 특수한 구조를 구성하고자 한다면 직접 디렉토리와 파일을 생성하는 방법을 선택할 수 있습니다.

공용 폴더 설치

nx generate @nrwl/js:lib components --directory=libs --verbose

명령어를 실행할 때, 아래와 같은 번들러 선택 옵션이 제공됩니다:

 NX  Generating @nrwl/js:library

✔ Which unit test runner would you like to use? · jest
? Which bundler would you like to use to build the library? Choose 'none' to skip build setup.
- swc
- tsc
- rollup
- vite
- esbuild
- none

Create React App (CRA)와 JavaScript를 기반으로 하고 있다면, 여러분의 프로젝트에 가장 적합한 라이브러리 번들러를 선택하는 것이 중요합니다. 주어진 옵션 중에서, CRA와 JavaScript 환경에 가장 잘 맞는 번들러는 다음과 같은 이유로 swc 또는 tsc (TypeScript Compiler)를 추천합니다:

swc

• SWC는 매우 빠른 JavaScript 컴파일러 및 번들러로, 최근에 많은 주목을 받고 있습니다.
• Rust로 작성되었으며, Babel보다 훨씬 빠른 성능을 제공합니다.
• CRA 프로젝트에서 JavaScript를 사용할 때, 특히 변환 속도나 빌드 시간을 단축시키고 싶다면 SWC가 좋은 선택일 수 있습니다.
• JavaScript 및 TypeScript 프로젝트 모두에 사용할 수 있으며, 최신 JavaScript 기능을 지원합니다.

tsc (TypeScript Compiler)

• TSC는 TypeScript 코드를 JavaScript로 컴파일하는 공식 TypeScript 컴파일러입니다.
• TypeScript를 사용하지 않더라도, tsc는 JavaScript 파일을 처리할 수 있으며, jsconfig.json을 통해 프로젝트 설정을 제공할 수 있습니다.
• JavaScript 프로젝트에서 TypeScript의 타입 체크나 최신 JavaScript 기능을 사용하고 싶다면, tsc를 선택하는 것도 좋은 방법입니다.
• 단, tsc를 사용할 때는 번들링, 코드 분할, 미니파잉 등의 추가적인 빌드 단계를 다른 도구(예: Rollup, Webpack)와 함께 사용해야 할 수도 있습니다.

선택 기준

• 속도와 최신 기능 지원을 우선시한다면 swc를 선택하세요.
• 타입스크립트로의 전환을 염두에 두고 있거나, JavaScript 프로젝트에서 TypeScript의 일부 기능을 활용하고 싶다면 tsc를 선택하는 것이 좋습니다.

결정

• CRA와 JavaScript 기반 프로젝트의 경우, swc를 추천합니다. 이는 최신 JavaScript 기능과 빠른 빌드 속도를 제공하기 때문입니다. 향후 TypeScript로의 전환을 고려하지 않는다면, swc가 현재 요구사항에 더 잘 부합할 수 있습니다.

명령어를 실행할 때 swc를 선택하기 위해서는 번들러 선택 단계에서 swc를 선택하면 됩니다.

디렉토리 구조 선택

라이브러리 생성 과정에서 마주친 선택지에 대해:

❯ As provided:
    Name: components
    Root: libs
  Derived:
    Name: components
    Root: libs/components

여기서는 두 옵션 사이에 별다른 차이가 없습니다. Nx가 제안하는 구조(As provided vs Derived)는 실제로 같은 위치를 가리키고 있습니다. libs 폴더 내에 components라는 이름으로 라이브러리를 생성하겠다는 것입니다.

선택해야 할 옵션:

• 여기서는 어떤 옵션을 선택하더라도 결과는 동일합니다. 즉, libs/components 아래에 components라는 이름의 라이브러리가 생성됩니다.
• 일반적으로, Nx가 제공하는 기본 옵션(As provided)을 선택해도 좋습니다. 이 경우, 명령어에 명시한 대로 libs 디렉토리 아래에 components 라이브러리가 생성됩니다.

이 과정을 통해 components라는 이름의 라이브러리가 성공적으로 libs 디렉토리 안에 생성되며, 설정한 jest 테스트 러너와 swc 번들러를 사용하여 설정됩니다. 이렇게 Nx CLI를 사용하는 방법은 프로젝트 내에서 여러 라이브러리를 일관되게 관리할 수 있도록 도와줍니다.