# 매뉴얼 설치

## 패키지 설치 <a href="#install-storybook-react" id="install-storybook-react"></a>

React 프로젝트에 [@storybook/react](https://www.npmjs.com/package/@storybook/react) 패키지를 설치합니다.

```bash
npm i -D @storybook/react # 설치 오류가 발생할 경우 --legacy-peer-deps 옵션 설정 후 실행
```

## 스크립트 명령 추가 <a href="#add-script-command" id="add-script-command"></a>

NPM 스크립트 `storybook` 을 추가 등록합니다.

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

```javascript
{
  "scripts": {
    "storybook": "start-storybook"
  }
}
```

{% endtab %}
{% endtabs %}

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

Storybook 구성 파일을 프로젝트 루트 위치의 `.storybook` 디렉토리 안에 생성합니다.

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

```javascript
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);
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
[require.contenxt()](https://webpack.js.org/guides/dependency-management/#requirecontext) 함수를 사용하면 자신 만의 컨텍스트를 만들 수 있습니다. 검색 할 디렉토리, 하위 디렉토리도 검색해야 하는지 여부를 나타내는 플래그, 파일과 일치시킬 정규 식을 전달할 수 있습니다.
{% endhint %}

## Storybook 구동 <a href="#run-storybook" id="run-storybook"></a>

`storybook` 명령을 실행해 Storybook 개발 환경을 구동합니다.&#x20;

```bash
npm run storybook
```

```bash
> 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/ │
│                                                   │
╰────────────────────────────────────────────────────────╯
```

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MVW54WfV24X9qZoFWVp%2F-MVW5S4TOLyj14t5bkSi%2Fimage.png?alt=media\&token=e7c0ef0f-1756-43f4-b00a-ddfb4a480951)


---

# 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/manual-install-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.