storybook

KO | EN

gitlite — search

#python #hacktoberfest #typescript #llm #go #machine-learning #docker #macos #nodejs #kubernetes #awesome-list #ios #openai #open-source

(★ 90,858)

Storybook은 독립된 환경에서 UI 컴포넌트를 빌드, 문서화, 테스트하기 위한 업계 표준 워크숍입니다.

storybook 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

더욱 안정적인 UI 컴포넌트를 빠르게 빌드하세요

Storybook은 독립된 환경에서 UI 컴포넌트와 페이지를 빌드하기 위한 프론트엔드 워크숍입니다. 수천 개의 팀이 UI 개발, 테스트, 문서화를 위해 이 도구를 사용하고 있습니다. 자세한 내용은 <a href="https://storybook.js.org/?ref=readme">storybook.js.org</a>에서 확인해 보세요!

다음 버전의 README 보기: 
 <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/react/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=66BF3C" /></a>
 <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/react/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=1EA7FD" /></a>

## 목차

- 🚀 [시작하기](#getting-started)
- 📒 [프로젝트](#projects)
  - 🛠 [지원하는 프레임워크 및 예제](#supported-frameworks)
  - 🔗[애드온](#addons)
- 🏅 [배지 및 프레젠테이션 자료](#badges--presentation-materials)
- 👥 [커뮤니티](#community)
- 👏 [기여하기](#contributing)
  - 👨‍💻 [개발 스크립트](#development-scripts)
  - 💸 [스폰서](#sponsors)
  - 💵 [후원자](#backers)
- :memo: [라이선스](#license)

## 시작하기

Storybook에 대한 자세한 정보 확인과 시작을 위해 [Storybook 웹사이트](https://storybook.js.org/?ref=readme)를 방문하세요.

### 문서

문서는 [Storybook 문서 사이트](https://storybook.js.org/docs?ref=readme)에서 확인할 수 있습니다.

### 예제

주요 팀들이 Storybook을 어떻게 사용하는지 [컴포넌트 백과사전(Component Encyclopedia)](https://storybook.js.org/showcase?ref=readme)에서 확인해 보세요.

[storybook.new](https://storybook.new)를 사용하여 Stackblitz에서 예제 프로젝트를 빠르게 생성할 수 있습니다.

Storybook은 컴포넌트 디자인, 문서화, 테스트, 상호작용 등을 위한 다양한 [애드온](https://storybook.js.org/docs/configure/user-interface/storybook-addons?ref=readme)을 제공합니다. Storybook의 API를 사용하면 다양한 방식으로 설정하고 확장할 수 있습니다. 심지어 모바일 환경인 React Native, Android, iOS, Flutter 개발까지 지원하도록 확장되었습니다.

### 커뮤니티

추가적인 도움이 필요하다면 [저장소의 GitHub Discussions](https://github.com/storybookjs/storybook/discussions/new?category=help)에 이슈를 공유해 주세요.

## 프로젝트

### 지원하는 프레임워크

| 렌더러                                                         | 데모                                                                                                                                                                         |                                                                                                                                                       |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/renderers/react)                                          |
| [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/frameworks/angular/)                                  |
| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)           | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/renderers/vue3/)                                           |
| [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/renderers/web-components)                       |
| [React Native](https://github.com/storybookjs/react-native)    | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](https://raw.githubusercontent.com/storybookjs/storybook/next/)                                                                     | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
| [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/)           | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/renderers/html)                                             |
| [Ember](code/frameworks/ember/)                                | [![](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://raw.githubusercontent.com/storybookjs/storybook/next/)                                                                            | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/frameworks/ember/)                                        |
| [Svelte](code/renderers/svelte)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/)         | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/renderers/svelte)                                       |
| [Preact](code/renderers/preact)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/)         | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](https://raw.githubusercontent.com/storybookjs/storybook/next/code/renderers/preact)                                       |
| [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](https://raw.githubusercontent.com/storybookjs/storybook/next/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
| [SolidJS](https://github.com/solidjs-community/storybook)      | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](https://raw.githubusercontent.com/storybookjs/storybook/next/)                                                                      | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook)        |
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://raw.githubusercontent.com/storybookjs/storybook/next/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |

### 애드온

| 애드온                                                                    | 설명                                                                       |
| ------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| [a11y](code/addons/a11y/)                                                 | Storybook에서 사용자의 웹 접근성을 위한 컴포넌트 테스트                    |
| [actions](code/core/src/actions/)                                         | Storybook UI에서 사용자가 컴포넌트와 상호작용할 때 액션 로그 기록          |
| [backgrounds](code/core/src/backgrounds)                                  | Storybook UI에서 사용자가 배경을 선택할 수 있도록 지원                     |
| [cssresources](https://github.com/storybookjs/addon-cssresources)         | 컴포넌트 아이프레임에 동적으로 CSS 리소스 추가/제거                        |
| [design assets](https://github.com/storybookjs/addon-design-assets)       | 스토리와 함께 이미지, 비디오, 웹 링크 확인                                 |
| [docs](code/addons/docs/)                                                 | 컴포넌트에 고품질 문서 추가                                                |
| [events](https://github.com/storybookjs/addon-events)                     | EventEmitter에 응답하는 컴포넌트에 인터랙티브하게 이벤트 발생              |
| [google-analytics](https://github.com/storybookjs/addon-google-analytics) | 스토리에 대한 구글 애널리틱스 리포트                                       |
| [graphql](https://github.com/storybookjs/addon-graphql)                   | Storybook 스토리 내에서 GraphQL 서버에 쿼리 실행                           |
| [jest](https://github.com/storybookjs/addon-jest)                         | Storybook에서 컴포넌트의 유닛 테스트 결과 확인                             |
| [links](code/addons/links/)                                               | 스토리 간 링크 생성                                                        |
| [measure](code/core/src/measure/)                                         | Storybook UI 내에서 레이아웃과 박스 모델을 시각적으로 검사                 |
| [outline](code/core/src/outline/)                                         | Storybook UI 내에서 CSS 레이아웃과 정렬을 시각적으로 디버그                |
| [query params](https://github.com/storybookjs/addon-queryparams)          | 쿼리 파라미터 모킹                                                         |
| [viewport](code/core/src/viewport/)                                       | Storybook을 사용하여 반응형 컴포넌트의 디스플레이 크기 및 레이아웃 변경    |

[애드온 / 프레임워크 지원 표](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)를 참고하세요.

사용자 경험을 지속적으로 개선하기 위해, 새롭고 더 나은 도구들을 위해 특정 애드온을 점진적으로 지원 중단(deprecate)하거나 제거할 수 있습니다.

info/notes를 사용 중이시라면 [docs](code/addons/docs/)로 마이그레이션하는 것을 강력히 권장하며, 도움이 필요하신 분들은 [가이드](code/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons)를 참고해 주세요.

contexts를 사용 중이시라면 [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars)로 마이그레이션하는 것을 강력히 권장하며, 도움이 필요하신 분들은 [가이드](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts)를 참고해 주세요.

addon-storyshots을 사용 중이시라면 Storybook [test-runner](https://github.com/storybookjs/test-runner)로 마이그레이션하는 것을 강력히 권장하며, 도움이 필요하신 분들은 [가이드](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide?ref=readme)를 참고해 주세요.

## 배지 및 프레젠테이션 자료

배지가 준비되어 있습니다! 라이브 Storybook 예제에 연결해 보세요.

![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)

```md
[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://raw.githubusercontent.com/storybookjs/storybook/next/link to site)
```

로고, 비디오 자료, 사용 중인 색상 등 Storybook 프레젠테이션에 사용할 자료를 찾고 계시다면 [브랜드 저장소](https://github.com/storybookjs/brand)에서 모두 확인하실 수 있습니다.

## 커뮤니티

- 트윗 소식: [@storybookjs](https://x.com/storybookjs)
- 블로그 글: [storybook.js.org 블로그](https://storybook.js.org/blog/?ref=readme) 및 [Medium](https://medium.com/storybookjs)
- 실시간 대화: [Discord](https://discord.gg/storybook)
- 비디오 및 스트림: [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)

## 기여하기

Storybook에 대한 기여는 언제나 환영합니다!

- 📥 풀 리퀘스트(Pull request)와 🌟 스타(Star)는 언제나 환영입니다.
- 시작하려면 [기여 가이드(contributing guide)](CONTRIBUTING.md)를 읽어보시거나 [Discord](https://discord.gg/storybook)에서 저희를 찾아주세요. 친절히 안내해 드리겠습니다.

어떤 이슈부터 해결해야 할지 고민되시나요?

- 코드베이스나 오픈소스에 처음 참여하시는 분들에게 적합하다고 판단되는 이슈에는 [![Good First Issue](https://img.shields.io/github/issues/storybookjs/storybook/good%20first%20issue.svg)](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) 라벨을 붙여두고 있습니다.
- [저희에게 연락해 주시면](https://discord.gg/storybook) 보유하신 기술과 학습 관심사에 딱 맞는 작업을 찾아드립니다.

### 개발 스크립트

Storybook은 모노레포(monorepo)로 구성되어 있습니다. 유용한 스크립트는 다음과 같습니다:

#### `yarn start`

> 테스트 스토리가 포함된 샌드박스 템플릿 Storybook을 실행합니다.

#### `yarn task`

> 위와 유사하지만, 샌드박스를 커스텀할 수 있는 옵션(예: 다른 프레임워크 선택)을 제공합니다.

#### `yarn lint`

> 코드가 린트 규칙을 준수하는지 부울(boolean) 값으로 확인합니다 - remark 및 eslint 사용

- `yarn lint:js` - js 파일을 검사합니다.
- `yarn lint:md` - 마크다운 및 코드 샘플을 검사합니다.
- `yarn lint:js --fix` - js 파일의 문제를 자동으로 수정합니다.

#### `yarn test`

> 유닛 테스트가 모두 통과하는지 부울(boolean) 값으로 확인합니다 - jest 사용

- `yarn run test --core --watch` - 감시(watch) 모드로 코어 테스트를 실행합니다.

### 스폰서

스폰서가 되어 Github의 README에 로고와 웹사이트 URL을 올려보세요. \[[스폰서 되기](https://opencollective.com/storybook#sponsor)]

### 후원자

정기 후원을 통해 저희와 저희의 작업을 지원해 주세요. \[[후원자 되기](https://opencollective.com/storybook#backer)]

## 라이선스

[MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)

-the end-

storybook

storybook 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

storybook

storybook 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README