monorepo 기반 공통 UI 라이브러리 패키지

개요

MonoRepo의 PoC 를 목적으로한 개인 오픈 소스 라이브러리입니다.

TailwindCSS 기반 UI 라이브러리 중 가볍고 간편하게 사용할 수 있는 목적으로 shadcn/ui 의 기능을 확장해 모노레포로 전환했습니다.

Tech Spec

Build Tool	Vite(라이브러리 모드)
Monorepo	pnpm workspaces+Turbo
TypeScript	5.0+
Bundling	Rollup(Vite 내장)
Unit Testing	Vitest,React Testing Library
Visual Regression Testing	Chromatic(시각 회귀 테스트)
Document	Storybook(디자인시스템 문서)
Code Quality	ESLint + Prettier
CI/CD	Github Actions,Github

역할

•

모노레포 scratch

•

CI/ CD 구축  (changesets, github actions) 

•

GitHub Actions을 통해 NPM 배포 자동화, ReactTestingLibrary + Vite + Chromatic 컴포넌트 테스트 자동화 환경 구축하고 CI에 통합 

•

Storybook 컴포넌트 문서화 

•

번들사이즈 최적화

기술적 과제 및 성과

단순한 패키지 번들 크기 증가에 대한 트러블 슈팅 및 최적화

•

shadcn의 typography 컴포넌트들을  polymorphic 한 추상화한 @hensley-ui/react-heading  컴포넌트 라이브러리는 단순패키지임에도 번들크기가 92.4KB 으로 2000줄을 차지하고 있었으며, 원인으로는 동일 의존성 중복으로 인한 성능 저하(ISSUE#28 문제점)가 있었음

•

rollup-plugin-visualizer를 활용해 성능 요소를 분석하고, 중복 의존성을 제거하는 번들링 최적화

•

코드라인 : 2015→ 총 147 lines (-93%)

•

번들 크기 최적화 unpacked 92.4kb → 13.5kb(-85%) (PR #29-패키지 번들링 최적화)

번들 크기 원인분석 및 대응 (자세한 내용 PR  이미지첨부)  

monolithic 단일 패키지에서 → 패키지 분리 monorepo구조 전환

•

기존 단일패키지 구조 개발 환경에서 사소한 수정에도 불필요한 시간이 소요되는 반복적인 수동 작업

•

pnpm workspace의 중앙 집중식 관리와 안정적인 로컬 심볼릭 링크를 통해 npm link의 단점들을 해결했습니다. 이를 통해 pnpm과 같은 최신 패키지 매니저의 이해와 의존성관리로 프론트엔드 개발 환경을 최적화하는 역량을 키울 수 있었음

CI/CD 개선

•

UI Kit내 개별 컴포넌트의 배포 및 버전 관리가 수동으로 이루어져 릴리즈 작업에 높은 오버헤드가 발생했고, 잦은 업데이트를 어렵게 만들어 비효율적인 배포 프로세스

•

Changeset과 Turborepo를 도입해 개발자가 변경 사항을 기록하면 자동으로 변경된 패키지만 버전 관리가 이루어지고 릴리즈 노트를 생성해 버전 관리 및 패키지 관리의 오버헤드를 줄이고 릴리즈 프로세스를 자동화를 통해 CI/CD 파이프라인 실행 시간 75% 단축 (예: 4분 → 1분대)