React 및 TypeScript 컴포넌트 라이브러리, 5부: Storybook을 이용한 컴포넌트 문서화
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 및 TypeScript를 사용하는 개발자, Storybook으로 컴포넌트 문서화를 수행하는 프론트엔드 개발자
핵심 요약
- Storybook 설치:
npx storybook init
명령어로 초기 설정, Vite 기반으로 구성 - 컴포넌트 최적화:
Tag.tsx
및Text.tsx
에서textWeight
삭제,textFontWeight
로 대체 - 문서화 구조:
.stories.tsx
와.mdx
파일로 구성,StorybookContainer
컴포넌트로 문서화 요소 중앙 정렬 - 버전 정보: Storybook v8.6.12, Vite v6.3.5 사용
섹션별 세부 요약
1. Storybook 초기 설정
npx storybook init
명령어 실행으로 프로젝트 의존성 확인 및 설정vite
옵션 선택 (Rollup 지원 없음)- 문서화 목적으로
storybook
설정 - 생성된 종속성:
@storybook/react
,@storybook/builder-vite
등 package.json
에storybook
및build-storybook
스크립트 추가
2. 컴포넌트 최적화
Tag.tsx
에서textWeight
제거,textFontWeight
로 대체TagProps
및StyledTagProps
인터페이스 수정 (기본format
값semiRounded
로 변경)StyledTag
스타일 정의에size
,format
,padding
조건 분기 추가Text.tsx
에서color
,fontSize
등 기본 props 정의 및StyledText
스타일 조건 분기 수정
3. 테스트 파일 업데이트
Tag.test.tsx
에서textWeight
관련 테스트 제거expect
문으로 기본backgroundColor
,borderRadius
,padding
값 검증
4. 문서화 구조 생성
StorybookContainer
컴포넌트 생성: 문서화 요소 중앙 정렬 및 간격 조정Tag.stories.tsx
파일 생성:Default
및Predefined
스토리 정의.mdx
파일로 문서 내용 작성 및.stories.tsx
시나리오 포함
결론
- Storybook 설치 및 컴포넌트 최적화: Vite 기반으로 구성,
textFontWeight
등 props 조정 필수 - 문서화 구조:
.stories.tsx
와.mdx
파일 병행,StorybookContainer
으로 문서화 요소 중앙 정렬 - 실무 팁:
vite
설정 시@storybook/builder-vite
추가,Tag
및Text
컴포넌트의 props/스타일 조건 분기 체크 필수