피드로 돌아가기
Dev.toFrontend
원문 읽기
Story 파일 제거 및 TS Compiler API 기반 Angular-Native 컴포넌트 쇼케이스 구현
Why I Built ng-prism — An Angular-Native Storybook Alternative With Zero Story Files
AI 요약
Context
Storybook의 React 중심 설계로 인한 Angular 지원 미흡 및 CSF 포맷의 부자연스러운 사용 경험 발생. 별도의 .stories.ts 파일 관리로 인한 코드 동기화 비용 증가와 iframe 렌더링 방식에 따른 MatDialog 및 CDK Overlay 작동 오류가 주요 병목 지점으로 작용.
Technical Solution
- TypeScript Compiler API를 활용하여 빌드 타임에 @Showcase 데코레이터가 적용된 컴포넌트를 자동 탐색하는 스캔 파이프라인 설계
- AST 분석을 통해 input() 및 output() Signal 선언을 읽어 타입과 기본값을 추론하는 Component Manifest 자동 생성 구조 채택
- JSON 직렬화나 런타임 리플렉션 대신 실제 컴포넌트 클래스를 가리키는 TS 파일을 생성하여 런타임 오버헤드 제거
- @angular-devkit/architect에 위임한 Angular Dev Server 통합으로 HMR 및 Source Map 등 프레임워크 표준 개발 환경 유지
- iframe을 제거하고 단일 문서 컨텍스트에서 렌더링함으로써 부모 테마의 CSS Custom Properties 상속 및 포털 기반 UI 정상 작동 보장
- Vite 스타일의 플러그인 모델을 도입하여 빌드 타임의 데이터 보강과 런타임 UI 패널 확장이 가능한 확장형 아키텍처 구축
실천 포인트
- 컴포넌트 명세와 문서를 코드 내에 통합하여 동기화 비용을 최소화하는 Single Source of Truth 전략 검토 - 프레임워크의 Compiler API를 활용해 정적 분석 단계에서 메타데이터를 추출하고 빌드 아티팩트로 변환하는 자동화 파이프라인 적용 - Iframe 기반 격리보다 실제 런타임 컨텍스트를 공유하는 렌더링 방식이 복잡한 UI 라이브러리 검증에 유리함을 인지 - 최신 프레임워크 기능(Angular Signals)에 최적화된 도구 설계를 통해 레거시 지원 비용을 줄이고 개발 생산성 향상