UI 컴포넌트 라이브러리를 구축하는 과정을 설명합니다. 모노레포 구조를 통해 여러 패키지를 하나의 저장소에서 관리하면서 코드 공유와 버전 관리를 효율적으로 할 수 있습니다.
먼저 새로운 프로젝트 디렉토리를 생성하고 npm을 초기화합니다:
# 프로젝트 디렉토리 생성
mkdir nest-ui
cd nest-ui
# npm 초기화
npm init -y
글로벌 패키지 설치
# scss
npx install -g sass
# nx
npm add --global nx
NX와 React 관련 패키지를 설치합니다:
# NX 및 React 관련 의존성 설치
npm install -D nx @nx/react
NX 워크스페이스를 초기화합니다:
# NX 워크스페이스 초기화
npx nx init
초기화 과정에서 guided 옵션을 선택하면 NX가 단계별로 설정 과정을 안내해줍니다.
NX를 사용하여 UI 라이브러리를 생성합니다:
# UI 라이브러리 생성
npx nx g @nx/react:library ui --directory=packages/ui --importPath=@nest-ui/ui
이 명령어는 packages/ui 디렉토리에 UI 라이브러리를 생성하고, @nest-ui/ui로 임포트할 수 있도록 설정합니다.
스타일시트 포맷을 선택하는 단계에서는 scss를 선택했습니다.
UI 라이브러리에 버튼 컴포넌트를 추가합니다:
# 버튼 컴포넌트 생성
npx nx g @nx/react:component button --project=ui --directory=lib/components/button --export
이 명령어는 다음 파일들을 생성합니다:
packages/ui/src/lib/components/button/button.tsx (컴포넌트 코드)packages/ui/src/lib/components/button/button.module.scss (스타일)packages/ui/src/lib/components/button/button.spec.tsx (테스트 코드)--export 옵션을 통해 이 컴포넌트는 자동으로 라이브러리의 index.ts에 추가되어 외부에서 import할 수 있게 됩니다.현재 프로젝트의 구조는 다음과 같습니다:
nest-ui/
├─ packages/
│ ├─ ui/
│ │ ├─ src/
│ │ │ ├─ lib/
│ │ │ │ ├─ components/
│ │ │ │ │ ├─ button/
│ │ │ │ │ │ ├─ button.tsx
│ │ │ │ │ │ ├─ button.module.scss
│ │ │ │ │ │ └─ button.spec.tsx
│ │ │ │ ├─ ui.tsx
│ │ │ │ └─ ui.module.scss
│ │ │ └─ index.ts
│ │ ├─ .babelrc
│ │ ├─ eslint.config.mjs
│ │ ├─ jest.config.ts
│ │ ├─ project.json
│ │ ├─ README.md
│ │ ├─ tsconfig.json
│ │ ├─ tsconfig.lib.json
│ │ ├─ tsconfig.spec.json
│ │ └─ vite.config.ts
├─ .eslintrc.js
├─ .gitignore
├─ .prettierrc
├─ nx.json
├─ package.json
├─ tsconfig.base.json
└─ package-lock.json
UI 라이브러리를 빌드하려면:
npx nx build ui
테스트를 실행하려면:
npx nx test ui
이제 기본적인 모노레포 UI 라이브러리가 구축되었습니다. 다음 단계로는: