> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/storybook-for-react/install-configure-storybook.md).

# 설치/구성

## Storybook 설치 <a href="#install-storybook" id="install-storybook"></a>

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

{% tabs %}
{% tab title="패키지 설치 → 초기화" %}

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

# Storybook 설치/초기화
npx sb init
```

{% endtab %}

{% tab title="최신 버전 Storybook 업그레이드" %}

```bash
npx sb@next upgrade
```

{% endtab %}
{% endtabs %}

{% hint style="danger" %}
**설치 오류 해결 방법**

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

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

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

```bash
npx --legacy-peer-deps sb init
```

{% endhint %}

{% hint style="info" %}
Storybook을 "직접 설치"하고자 한다면 [매뉴얼 설치](/learning-react-app/tip-and-references/storybook-for-react/manual-install-storybook.md) 방법을 참고하세요.
{% endhint %}

## Storybook 실행 <a href="#run-storybook" id="run-storybook"></a>

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

{% tabs %}
{% tab title="Storybook 실행 명령" %}

```bash
# Storybook 구동
npm run storybook

# Storybook 빌드
npm run build-storybook
```

{% endtab %}
{% endtabs %}

## Storybook 구성 <a href="#configure-storybook" id="configure-storybook"></a>

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

{% tabs %}
{% tab title=".storybook/main.js" %}

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

{% endtab %}

{% tab title=".storybook/preview\.js" %}

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

{% endtab %}

{% tab title="package.json" %}

```javascript
{
  "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"
  }
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
생성된 "**src/stories**" 디렉토리 안에는 Storybook에서 제공하는 예제 파일이 포함됩니다.

```bash
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
```

{% endhint %}