매뉴얼 설치

패키지 설치

React 프로젝트에 @storybook/react 패키지를 설치합니다.

npm i -D @storybook/react # 설치 오류가 발생할 경우 --legacy-peer-deps 옵션 설정 후 실행

스크립트 명령 추가

NPM 스크립트 storybook 을 추가 등록합니다.

package.json

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

.storybook 구성

Storybook 구성 파일을 프로젝트 루트 위치의 .storybook 디렉토리 안에 생성합니다.

.storybook/config.js

import { configure } from '@storybook/react';

// Story 파일 불러오기
function loadStories() {
  // stories 디렉토리 (하위 디렉토리 포함) 내부의 *.stories.js 파일 모두 탐색
  // components 디렉토리로 변경하고자 한다면? ../components로 수정
  const req = require.context('../stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

// Story 구성
configure(loadStories, module);

require.contenxt() 함수를 사용하면 자신 만의 컨텍스트를 만들 수 있습니다. 검색 할 디렉토리, 하위 디렉토리도 검색해야 하는지 여부를 나타내는 플래그, 파일과 일치시킬 정규 식을 전달할 수 있습니다.

Storybook 구동

storybook 명령을 실행해 Storybook 개발 환경을 구동합니다.

npm run storybook

> manual-storybook@1.0.0 storybook
> start-storybook

info @storybook/react v6.1.21
info 
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./.storybook"
(node:69406) DeprecationWarning: Configuration files such as "config", "presets" and "addons" are deprecated and will be removed in Storybook 7.0.
Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#to-mainjs-configuration
info => Using default Webpack setup
webpack built 8e91993a1a556f746393 in 8102ms
╭────────────────────────────────────────────────────────╮
│                                                   │
│   Storybook 5.2.1 started                         │
│   9.99 s for manager and 9.48 s for preview       │
│                                                   │
│   Local:            http://localhost:55480/       │
│   On your network:  http://192.168.254.100:55480/ │
│                                                   │
╰────────────────────────────────────────────────────────╯