설치/구성

Storybook 설치

Create React App으로 설치/구성 된 React 프로젝트에 Storybook을 설치/구성합니다.

패키지 설치 → 초기화

# React 앱 프로젝트 설치/초기화
npx create-react-app <프로젝트>
cd <프로젝트>

# Storybook 설치/초기화
npx sb init

최신 버전 Storybook 업그레이드

npx sb@next upgrade

설치 오류 해결 방법

Storybook 설치 & 초기화 실행 시 오류가 발생할 수도 있습니다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

오류가 발생한 경우, 아래 명령을 입력해 문제를 해결할 수 있습니다.

npx --legacy-peer-deps sb init

Storybook을 "직접 설치"하고자 한다면 매뉴얼 설치 방법을 참고하세요.

Storybook 실행

Storybook을 실행하는 명령은 2가지입니다. (설치 후, package.json 파일에 실행 명령이 추가 됩니다.)

Storybook 실행 명령

# Storybook 구동
npm run storybook

# Storybook 빌드
npm run build-storybook

Storybook 구성

프로젝트에 설치된 Storybook 패키지 구성은 main.js, preview.js, package.json 파일을 참고합니다.

.storybook/main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

package.json

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.1.20",
    "@storybook/addon-essentials": "^6.1.20",
    "@storybook/addon-links": "^6.1.20",
    "@storybook/node-logger": "^6.1.20",
    "@storybook/preset-create-react-app": "^3.1.6",
    "@storybook/react": "^6.1.20"
  }
}

생성된 "src/stories" 디렉토리 안에는 Storybook에서 제공하는 예제 파일이 포함됩니다.

src/stories/
 ├── assets/
 │   ├── code-brackets.svg
 │   ├── colors.svg
 │   ├── comments.svg
 │   ├── direction.svg
 │   ├── flow.svg
 │   ├── plugin.svg
 │   ├── repo.svg
 │   └── stackalt.svg
 ├── Button.js
 ├── Button.stories.js
 ├── Header.js
 ├── Header.stories.js
 ├── Introduction.stories.mdx
 ├── Page.js
 ├── Page.stories.js
 ├── button.css
 ├── header.css
 └── page.css