Storybook (UI component)

Why Storybook?

문제점

웹의 보편성은 프론트엔드에 더 많은 복잡성을 부여하고 있다. 이는 반응형 웹 디자인에서 시작되었으며 시강니 지나면서 기기, 브라우저, 접근성, 성능, 비동기 상태 등의 추가 요구 사항들이 더해졌다. 컴포넌트 기반 도구들은 복잡한 UI를 간단한 컴포넌트들로 분해하는 것에 도움을 주지만 만능 해결책은 아니다. 프론트엔드가 성장함에 따라 컴포넌트 수는 급증한다. 성숙한 프로젝트는 수백 개의 컴포넌트를 포함할 수 있으며 이는 수천 개의 개별 변형을 만들어낸다.이러한 UI들이 비즈니스 로직, 상호작용 상태, 앱 컨텍스트와 얽혀 있어 디버깅을 어렵게한다. 

해결책

UI를 독립적으로 빌드하기

스토리북에서 모든 UI 조각은 컴포넌트이다. 컴포넌트의 강점은 전체 앱을 실행하지 않고도 렌더링 결과를 확인할 수 있다는 점이다.

Storybook is packaged as a small, development-only, workshop that lives alongside your app. It provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases. (앱 비즈니스 로직과 컨텍스트의 방해 없이 컴포넌트를 독립된 iframe에서 렌더링할 수 있게 한다.. 이를 통해 컴포넌트의 각 변형, 특히 도달하기 어려운 엣지 케이스의 개발에 집중할 수 있다..)

 

 

Component Driven User Interfaces

The development and design practice of building user interfaces with modular components. UIs are built from the “bottom up” starting with basic components then progressively combined to assemble screens.

Components enable interchangeablity by isolating state from application business logic. That way you can decompose complex screens into simple components. Each component has a well-defined API and fiexed series of states that are mocked. This allows components to be taken apart and recomposed to build different UIs.

 

What's a story?

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.