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가지의 솔루션
- Makes it easy to build components in isolation, outside of your app.
- Increases developer awareness of existing components.
- Serves as a living style guide and documentation.
- 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.
로딩 상태나 주어지는 데이터에 따라서 렌더된 모습이 다른 복잡한 형태의 컴포넌트가 존재할 수 있다. 이 때 스토리북을 통해서 시각적으로 테스트할 수 있다.
