Storybook - StorybookJS 란

스토리북(Storybook)

StoryBook JS 이란?

 

스토리북(Storybook)은 한 문장으로 정의가 어려울 정도로 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구입니다.

 

단순히 회사의 UI 라이브러리를 내부 개발자들을 위해 문서화(documentation)하기 위해서 사용할 수 있고,

외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있다.

 

스토리북(Storybook)을 기본 구성 단위는 스토리(Story)이며

하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 된다.

 

각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를

보여주는 하나의 예시라고 생각하시면 이해가 편하실 것 같다.

StoryBook JS의 큰 장점인 UI 재사용성을 높이기 위함이 가장 클 것이다.

UI 컴포넌트를 독립적인 환경에서 개발을 돕는 오픈소스 툴이다.

React, Vue, Angular에서도 지원하며 다양한 에드온(후킹 : 정상적인 동작을 가로채는 동작 )을 기반으로 

 

UI 컴포넌트를 쉽게 테스트 할 수 있도록 돕는다.

 

SPA(Single Page Application)개발을 하다보면 컴포넌트를 중심적으로 코드를 작성하게 되고,

프로젝트가 커지고 요구 사항이 복잡해짐에 따라 컴포넌트 간의 관계가 매우 복잡해지게 된다.

이런 상황 속에서 각 컴포넌트의 기능이 어디까지이고 속성에 따라 어떻게 변화하는지 알기가 어려워지는 경우가 많다.

 

컴포넌트 관리가 필요하지만 doc까지 하기는 어려운 상황에 Storybook을 이용한다면 적은 비용으로 유사한 혜택을 얻을 수 있다.

 

 

에드온 : http://www.xeschool.com/xe/addons_the_basis_of_addon