📖 스토리북이란
스토리북이란 UI 구성 요소(컴포넌트)를 독립적으로 개발/테스트/문서화하기 위한 도구입니다.
전체 애플리케이션을 실행하지 않고도, 각각의 컴포넌트가 특정 상태나 실행 시나리오별로 어떻게 렌더링 되는지 테스트할 수 있습니다.
애플리케이션에 오류가 발생해 UI를 확인할 수 없는 상황이어도,
기존 웹 사이트에 영향을 주지 않고 독립적인 포트 번호를 가진 스토리북 웹 사이트에서 컴포넌트를 체험할 수 있습니다.
스토리북에는 각 컴포넌트별로 '스토리(story)'라는 단위가 있습니다.
예를 들어, 버튼 컴포넌트에는 작은 사이즈/큰 사이즈/활성화된/비활성화된 버튼 등의 다양한 종류의 버튼이 존재합니다.
이때 컴포넌트의 각 버전이 하나의 스토리가 되는 것입니다.
따라서 위와 같은 스토리를 모아 관리하는 도구가 바로 스토리북입니다.
스토리북은 리액트, Vue, Angular 등 다양한 프레임워크에서 사용할 수 있습니다.
📖 사용하는 이유
- 컴포넌트 중심 개발: 개발 중인 컴포넌트를 특정한 페이지나 전체 애플리케이션에 통합하지 않고도, 각 컴포넌트를 독립적으로 개발 및 테스트할 수 있기 때문에 애플리케이션의 다른 부분과 상관없이 개별 컴포넌트의 기능과 동작을 검증할 수 있습니다.
- 독립적인 테스트 및 유지보수: 컴포넌트를 중심으로 한 개발이 가능하기 때문에 컴포넌트의 재사용성을 높이고 유지보수를 쉽게 합니다.
- 문서화에 유용: 각 컴포넌트의 사용 방법과 다양한 상태(props, event) 및 미리보기를 제공함으로써 일관성 있는 디자인 시스템을 구축하고, 팀원들의 소통을 원활하게 해줍니다.
- 컴포넌트 상태 관리: 특정 컴포넌트가 다양한 상태를 가질 수 있는 경우, 스토리북을 통해 여러 가지 상태를 쉽게 발생시키고 그에 따른 결과를 확인할 수 있습니다.
- 다양한 추가 기능: '애드온(addon)'을 활용하여 스토리북의 기능을 확장하고 개발 환경을 개선할 수 있습니다. 애드온에는 UI 상태 제어, 접근성 테스트, 인터랙션 테스트, 성능 모니터링, 뷰포트 시뮬레이션 등의 추가 기능이 존재합니다.
더 자세한 내용은 공식 문서와 튜토리얼(한국어 지원)을 참고해주세요
읽어주셔서 감사합니다:)
