Storybook 기초

백동우·2023년 1월 12일

storybook 이란?

React, Vue 및 Angular와 같은 컴포넌트기반은 복잡한 UI를 간단한 컴포넌트로 분해하는 데 도움이 되지만, 해결은 될 수 없습니다(갯수가 너무 많아짐) 그래서 이를 해결하고자,
storybook은 UI 개발환경이며,UI를 컴포넌트 단위로 테스팅 해볼 수 있는 툴(구성 요소를 자동 으로 시각적으로 테스트가능)입니다.

🤷‍♂️ Storybook을 사용하는 이유 링크

내구성이 더 뛰어난 UI 개발

컴포넌트와 페이지를 분리하여 추적이 가능

적은 노력으로 플레이크 없이 UI 테스트

Storybook은 자동화를 위한 기본 제공 워크플로를 제공합니다

팀에서 재사용할 문서 UI

Storybook은 UI의 단일 정보 소스입니다. 스토리는 모든 구성 요소와 다양한 상태를 인덱싱하므로 팀에서 기존 UI 패턴을 쉽게 찾고 재사용할 수 있습니다. 스토리북도 자동 생성됩니다

UI가 실제로 어떻게 작동하는지 공유

이야기는 UI가 어떻게 작동해야 하는지에 대한 그림이 아니라 UI가 실제로 어떻게 작동하는지 보여줍니다. 이를 통해 모든 사람이 현재 생산 중인 항목에 맞춰 정렬됨

UI 워크플로 자동화

Storybook은 지속적 통합 워크플로와 호환이가능

storybook을 처음 테스트 해보기위해 프로젝트에 관련 파일 삭제를 진행하였으며, 오직 storybook을 위한 프로젝트를 만들었습니다

Step1 : Storybook 셋팅 및 실행

npm uninstall --save react-scripts
-> react-scripts 삭제 시 의존성으로 인해서 npm start 등이 되지않는다.
public 폴더 삭제

npm install --save-dev storybook-css-modules-preset
npm install --save prop-types (Typescript를 사용하지않고 js를 사용하므로 설치)
npm install --save @storybook/addon-postcss
npx sb init (스트리북 설치)

결과

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },

저는 테스트를 위해서 스크립트를 최대한 간단하게 수정하였습니다

  "scripts": {
    "start": "start-storybook -p 6006",
    "build": "react-scripts build"
  },

-> npm start 시 나오는 화면

export를 변경하여 새롭하게 추가되는것을 확인이 가능

JavaScript 기반으로 진행하여 prop-type를 설치했습니다

-> size 및 color등을 손 쉽게 추가 및 변경이 가능

-> button.css에 super를 지정해주면 적용이 된다.

.storybook-button--large {
  font-size: 16px;
  padding: 12px 24px;
}
.storybook-button--super {
  font-size: 120px;
  padding: 12px 24px;
}

참고 ENUM 해당 부분참고하여 radio가 아닌 select등으로 수정이가능

Step2 : 구성요소 추가하는법

story폴더 내부 삭제를 먼저 진행

-> main.js란?
가장 상단에 있는 .storybook 디렉토리에 존재하며 우리가 메인내부에서 활용하려는 구성이 포함되어있습니다.

-> 설치한 라이브러리 두개를 적용시킨다

App.js를 Storybook.js로 이름을 변경하였습니댜(script실행을 하지않기 위해서입니다)

...Storybook.js

export const StoryBookTest=()=>{
  return(<h1>StoryBookTest</h1>)
}

props를 해당 부분 처럼 입력

=> TypeScript의 경우는 필요하지않습니다

-> 결과 창

StoryBook이 엄청 신기하게도 초기color는 지정해주지만 변경은 엄청 간단하게 해주네요~~

StoryBook.stories.js 수정

import { StoryBookTest } from "../StoryBook";

export default {
  title: "Storybook - A Customizable React Table Component",
  component: StoryBookTest,
};

const Template = (args) => <StoryBookTest {...args} />;

export const Default = Template.bind({});

Default.args = {
  rows: [
    ["This", "is", "just", "a", "test"],
    ["This", "is", "also", "a", "test"],
    ["Just", "a", "little", "more", "data"],
    ["Row", "number", "four", "right", "here"],
  ],
  headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
};