- 디자인과 개발 단계에서 재사용할 수 있는 UI 컴포넌트를 먼저 만든다면, 재사용성과 효율성이 극대화 될 수 있다.
- CDD는 부품단위로 UI 컴포넌트를 만들어 나가는 개방 방법이다.
CDD를 지원하는 도구인 Component Explorer가 있다.
- component explorer에는 많은 UI 개발 도구가 있는데, 그 중 많이 쓰이는 것이 storybook이다.
- storybook는 react등 다양한 프레임워크를 지원한다.
- storybook를 통해서 각각의 컴포넌트를 따로 볼 수 있고, 이를 통해서 컴포넌트를 문서화, 시각화하여 시뮬레이션할 수 있다.
- storybook를 통해서 각 컴포넌트를 테스트해 상태를 확인할 수 있다.
☕ 버그를 사전에 방지하고 테스트 및 개발 속도를 향상시킨다.
🥛 또한, API 의존성을 걱정하지 않고 빌드할 수 있다.
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarn- 위와 같은 코드로 stroybook을 설치할 수 있다.
# Run the test runner (Jest) in a terminal:
yarn test --watchAll
# Start the component explorer on port 6006:
yarn storybook
# Run the frontend app proper on port 3000:
yarn start- 위의 코드로 storybook을 실행하거나 테스트할 수 있다.
출처 (공식문서) : https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/
storybook은 독립적인 개발환경을 제공하여 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있게 해준다.
storybook에서 지원하는 주요 기능은 다음과 같다.
- UI 컴포넌트들을 카탈로그화
- 컴포넌트 변화를 Stories로 저장
- 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공
- 리액트를 포함한 다양한 뷰 레이어 지원
import React from "react";
import { Button } from "@storybook/react/demo";
export default {
title: "Button",
component: Button
};
export const Primary = () => (
<Button>Hello Button</Button>
);
export const Secondary = () => (
<Button>Bye Button</Button>
);- 위와 같은 코드로 스토리북을 사용할 수 있다.
(src/stories 에 파일 존재)
참고 자료 : 코드 스테이츠
🙌🙌🙌🙌