디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기
Redesigning a design component library to match actual usage
TL;DR AI
2분핵심 요약
Kitchen 라이브러리 초기에 컴포넌트를 UMD 방식으로 빌드하고 kitchen-core는 CommonJS로 제공했다 초기에는 개별 컴포넌트를 UMD로, 핵심은 CommonJS로 빌드함.
번들 포함 사용 여부와 관계없이 Kitchen 전체 코드가 소비자 번들에 포함되었다 re-export 구조와 혼합 빌드 포맷 때문.
빌드 참조 방식 컴포넌트가 개발 중에 다른 컴포넌트를 빌드 산출물 기준으로 참조했다 컴포넌트 간 참조를 빌드 산출물 기준으로 수행함.
Storybook 빌드 산출물 기준 참조로 인해 Storybook에서 propTypes 자동 추론이 동작하지 않았다 컴포넌트 소스 직접 참조가 이루어지지 않음.
배포 포맷 변경 배포 포맷을 ESM 전용으로 전환하고 exports 필드를 명시했다 번들러가 import 문만으로 의존성을 추적하도록 하기 위해.
