Why use Storybook

Storybook은 UI 구성 요소를 위한 사용자 인터페이스 개발 환경으로, 
개발자가 독립적으로 구성 요소를 만들고 격리된 개발 환경에서 인터랙티브하게 구성 요소를 보여준다.

Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use.

 

4가지의 솔루션

 

1. Makes it easy to build components in isolation, outside of your app.
2. Increases developer awareness of existing components.
3. Serves as a living style guide and documentation.
4. Makes it easy to visually test edge cases.

---

Makes it easy to build components in isolation, outside of your app.

실제 앱의 실행과 독립적으로 실행할 수 있는 개발 툴이기 때문에, 해당 페이지나 백엔드 API 엔드포인트 등이

준비되지 않은 상태에서도 UI 개발 작업을 할 수 있다.  

 

stories 라는 것을 생성할 수 있는데, 예를 들어 아래와 같은 버튼 컴포넌트를 만든다면,

스타일을 가지고 있는 각 버튼의 종류가 곧 하나의 스토리인 셈이다. 

ex) Outline, Underline...Long Text With No spaces

 

 

Increases developer awareness of existing components.

코드를 처음 보는 개발자(새로 입사한) 입장에서, 문서화의 결핍으로 인해 어떤 컴포넌트 가 실제 존재하는지 파악하기가 어렵다.

동료 개발자에게 질문할 수 있지만 이는 업무효율이 높지않다. 이 때 가능한 한 모든 컴포넌트들을 스토리북을 통해 문서화할 수 있다.

즉, 스토리북을 통해 실존하는 컴포넌트와 스토리들을 한 눈에 파악할 수 있기 때문에 불필요하게 중복된 컴포넌트를 만들 일이 없어진다.

 

 

Serves as a living style guide and documentation.

대부분의 회사들은 폰트, 브랜드 색상, 아이콘 등 개발자나 디자이너가 지킬 스타일 가이드가 있다. 

스토리북에서 볼 수 있는 UI 예제(컴포넌트) 들은 곧 실제로 작성한 코드이기 때문에 그 자체로서 스타일 가이드 역할을 한다.

 

Makes it easy to visually test edge cases.

로딩 상태나 주어지는 데이터에 따라서 렌더된 모습이 다른 복잡한 형태의 컴포넌트가 존재할 수 있다. 이 때 스토리북을 통해서 시각적으로 테스트할 수 있다.