Storybook 설치 / 구성

Storybook 설치

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

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

# Storybook 설치/초기화
npx sb init
npx sb@next upgrade

Storybook 업그레이드 명령

upgrade 명령을 사용해 추후 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 구동
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"
  }
}

Storybook 가이드 파일

생성된 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