npm i -D @storybook/react # 설치 오류가 발생할 경우 --legacy-peer-deps 옵션 설정 후 실행
스크립트 명령 추가
NPM 스크립트 storybook 을 추가 등록합니다.
{
"scripts": {
"storybook": "start-storybook"
}
}
.storybook 구성
Storybook 구성 파일을 프로젝트 루트 위치의 .storybook 디렉토리 안에 생성합니다.
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/ │
│ │
╰────────────────────────────────────────────────────────╯
