# 설치/구성

## 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/learning-react-app/tip-and-references/storybook-for-react/install-configure-storybook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.