Storybook(스토리북)

Storybook 이란?

Storybook은 UI 개발을위한 도구입니다. 구성 요소를 분리하여 개발을 더 빠르고 쉽게 만듭니다. 이렇게하면 한 번에 하나의 구성 요소에서 작업 할 수 있습니다. 복잡한 개발 스택을 시작하거나 특정 데이터를 데이터베이스에 강제로 넣거나 애플리케이션을 탐색하지 않고도 전체 UI를 개발할 수 있습니다.

 

Storybook을 사용하여 웹 응용 프로그램에서 작은 원자 구성 요소와 복잡한 페이지를 만듭니다. UI라면 Storybook으로 만들 수 있습니다.

Storybook은 재사용을 위해 구성 요소를 문서화 하고 버그를 방지하기 위해 구성 요소를 자동으로 시각적으로 테스트하는 데 도움이 됩니다.

 

맨 아래의 [참고 문서]의 react용 스토리북 튜토리얼을 보고 작성하였으며, 작성 도중 예기치 않은 오류로 인한 부분이 있었는데, 그 부분의 대해 언급하고 튜토리얼 대로 연습하시면 됩니다.

 

(오류 부분)

튜토리얼대로 하다보면 Copy and paste this compiled CSS into the src/index.css 라고 써있다. 말 그대로 github에 있는 index.css를 복사해서 붙여놨다.

 

그리고 다음장 Simple component 부분에서 아래와 같은 부분이 있었다. 그대로 해보자.
//.storybook/preview.js
import '../src/index.css';

// Configures Storybook to log the actions(onArchiveTask and onPinTask) in the UI.
export const parameters = {
      actions: { argTypesRegex: '^on[A-Z].*' },
};

하고나면 에러가 머라고 출력되는데 요컨대 index.css에 복사한 @font-face부분이 문제이다.

해결방법은 아래와 같다.

(해결 방안)

[참고 1] 오류 해결방안

 1. public이 src 외부 경로에 있었는데, create-react-app으로 만든 CRA는 외부 public을 인식 못하는 문제가 있으므로 src 안으로 폴더를 이동해주었다.

2. package.json의 public 경로를 src/public으로 변경해주었다.

 

[참고 2] 결과 화면1

 

[참고 3] 결과 화면2

[참고 4] 결과 화면3

 

[참고 5] 결과 화면4

[참고 6] 결과 화면5

[참고 7] 결과 화면6

 

[참고 8] 결과 화면7

---

 

반응형으로도 만들 수 있다!! [참고 문서] 반응형 addon 참고

---

 

[참고 문서]

storybook 개념 및 간단한 설명

storybook.js.org/docs/react/writing-stories/decorators

Decorators

react용 스토리북 튜토리얼 (앵귤러, 뷰, 리액트, svelte 등)

www.learnstorybook.com/intro-to-storybook/react/en/get-started/

Storybook for React tutorial

github.com/chromaui/learnstorybook-code

chromaui/learnstorybook-code

 

반응형 addon

github.com/storybookjs/storybook/tree/master/addons/viewport

storybookjs/storybook