Monorepo Architecture

Monorepo 구성 방식

J Design System은 모노레포 방식으로 구성되어 있습니다. 이는 여러 개의 독립적인 UI 컴포넌트가 동일한 저장소를 사용한다는 것을 의미합니다. 이 방식을 채택한 이유는 패키지 간에 공통으로 사용하는 코드와 각 컴포넌트 패키지마다 프로젝트 환경을 일관성 있게 유지할 수 있기 때문입니다. 모노레포를 도입하며 디자인 시스템 개발에서, UI 컴포넌트라는 동일한 도메인 개발 아래 의존성 변화를 쉽게 파악할 수 있었고 동일한 DevOps를 사용할 수 있습니다.

Yarn Workspaces

yarn workspaces는 yarn에서 제공해주는 하위 패키지들에 대한 의존성 관리 기능 입니다. 이를 이용해서 모노레포 구조를 구축할 수 있었습니다. foreach, list등 하위 패키지 접근에 대한 효율적인 명령어도 제공해주고 있습니다.

Configure

최상위 package.json에 아래와 같이 하위 패키지 경로를 설정하고, 편의상 각 패키지들을 별개로 설치할 수 있도록 지원하고자 하기 때문에 private 옵션은 설정하지 않았습니다.

{
    "name": "jdesignlab",
    "packageManager": "yarn@3.3.1",
    "workspaces": [
        "packages/*"
    ]

}

최종적으로 아래와 같이 패키지 구조를 구성하였습니다. 각 패키지마다 공통적으로 필요한 stroybook, jest, tsconfig 구성 파일은 최상위에 위치시키고, 하위 컴포넌트에서 확장하여 사용하고 있습니다.

📂JDesignSystem
├── packages
├── storybook-static
├── README.md
├── jest.config.ts
├── package.json
|     ├── box
|     ├── button
|     ├── card
|     ├── checkbox
|     ├── drawer
|     ├── dropdown
|     ├── flex
|     ├── icons
|     ├── input
|     ├── j-provider
|     ├── modal
|     ├── popover
|     ├── radio
|     ├── react
|     ├── react-utils
|     ├── select
|     ├── stack
|     ├── tabs
|     ├── test
|     ├── text
|     ├── textarea
|     ├── theme
|     ├── tooltip
|     └── utils
├── setup-jest.ts
├── tsconfig.json
├── tsupconfig.ts
└── yarn.lock