React 및 TypeScript 컴포넌트 라이브러리 문서화: Storybook 사용 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 및 TypeScript를 사용하는 개발자 (중급~고급), 컴포넌트 라이브러리 문서화 필요성 있는 팀

핵심 요약

• Storybook v8.6.12 사용 시 @storybook/builder-vite 및 vite 6.3.5 추가 필요
• Tag.tsx 컴포넌트에서 textWeight 제거, textFontWeight로 대체 및 format 기본값 semiRounded 설정
• package.json에 storybook 및 build-storybook 스크립트 자동 추가
• .storybook 폴더 생성 및 main.ts, preview.ts 구성 파일 생성
• stories 폴더는 문서화 예제를 위해 생성되지만 사용하지 않음

섹션별 세부 요약

1. Storybook 설치 및 초기 설정

• npx storybook init 명령어로 초기 설정

- storybook 버전 선택, webpack/vite 선택, 문서화/테스트 목적 선택

- 프로젝트가 rollup 기반이라 vite 선택

• 자동 추가된 라이브러리:

```bash

"@storybook/addon-essentials": "^8.6.12",

"@storybook/react-vite": "^8.6.12",

"storybook": "^8.6.12"

```

• package.json 스크립트 추가:

```json

"scripts": {

"storybook": "storybook dev -p 6006",

"build-storybook": "storybook build"

}

```

2. Rollup 호환성 확보

• rollup 기반 프로젝트에서 vite 호환을 위해 추가 라이브러리 설치:

```bash

yarn add vite @storybook/builder-vite --dev

```

• 설치된 버전:

```bash

"@storybook/builder-vite": "^8.6.12",

"vite": "^6.3.5"

```

3. 컴포넌트 속성 정의 수정

• Tag.tsx에서 textWeight 속성 제거

- textFontWeight로 대체 (기본값: 600)

• format 속성의 기본값 semiRounded 설정
• textColor, backgroundColor 등 추가 속성 정의

4. 문서화 폴더 구조 설정

• .storybook 폴더 생성: main.ts, preview.ts 구성 파일 포함
• stories 폴더 생성 (문서화 예제용)

- 사용하지 않을 경우 삭제

결론

• Storybook을 사용한 문서화는 vite 기반으로 구성된 프로젝트에 적합하며, rollup 호환을 위해 @storybook/builder-vite 설치 필수
• 컴포넌트 속성 정의를 명확히 하여 문서화 편의성 확보
• storybook dev 명령어로 라이브 문서화 확인, build-storybook으로 정적 파일 생성 가능