Storybook

• Storybook이란?
  • Storybook은 컴포넌트를 시각적으로 문서화하고 테스트할 수 있는 도구
  • React, Vue 등 다양한 프레임워크를 지원
  • UI 컴포넌트를 기능 단위로 관리, 테스트, 공유하기 좋다.

• 왜 사용하는가?
  1. 컴포넌트 단위 개발에 집중
     • 기존에는 페이지 전체에서만 컴포넌트를 확인할 수 있었지만, Storybook을 사용하면 해당 컴포넌트만 떼어내서 테스트하거나 스타일을 조정할 수 있다.
  2. 디자이너와 협업에 유리
     • 우리가 백엔드 개발자에게 스웨거 문서를 전달받아 작업하는 것과 같이, 프론트엔드 개발자가 디자이너에게 실제로 구현된 컴포넌트를 시각적으로 보여줄 수 있다.
     • 컴포넌트마다 다양한 상태(hover, error, loading 등)을 한눈에 확인할 수 있어 의사소통이 원활해진다.

• 어떤 기능들이 있는가?

• 설치 및 설정
  • 모든 컴포넌트 스토리는 .stories.tsx 또는 .stories.mdx 형태로 작성
  • ex) Button.stories.tsx

// 설치
npx storybook init

// 실행
npm run storybook