storybook

개요

- UI 컴포넌트를 직접 보면서 개발을 할 수 있는 환경을 제공하는 툴이다.
  스토리북은 프로젝트 내에서 독립된 환경으로 실행 되기 때문에,
  앱의 특정한 의존성에서 벗어나서 순수 UI 개발에 집중할 수 있도록 한다.

고려해야할 점

• 단일 컴포넌트 스토리의 경우

 - 아주 작은 단위의 컴포넌트로 스토리를 작성할 경우
   실제 어플리케이션의 컴포넌트 조합을 검증할 수 없다.
 - 부모 컴포넌트의 내부 구현 변경 시 깨지기가 쉽다.

• 복합 컴포넌트 스토리의 경우

 - 개별 컴포넌트의 엣지 케이스를 검증하기 힘들다.
 - 컴포넌트의 입력값을 제공하기가 어렵다.
 - 컴포넌트의 단위가 높아질수록 라우팅을 처리하거나
   API 서버에 요청을 보내 데이터를 받아오는 역할을 하는
   컴포넌트가 포함되어 있을 확률이 높아지기 때문에,
   외부 환경에 대한 의존성이 증가한다.

설치

• 모듈 설치

npm install -g @storybook/cli

• storybook 환경설정
  • 프로젝트 내부에서 실행

     getstorybook
  

실행

npm run storybook

사용법

적용결과

• 소스코드

• 화면

참고

• https://storybook.js.org/docs/basics/introduction/
• https://meetup.toast.com/posts/178