Intro to Storybook
  • 시작하기
  • 간단한 컴포넌트
  • 복합적 컴포넌트
  • 데이터
  • 화면
  • 배포하기
  • 테스트
  • 애드온(Addon)
  • 마무리
  • 기여하기
Framework:
ReactReact NativeVueAngularSvelteEmber

리액트(React)를 위한 스토리북(Storybook) 튜토리얼

스토리북(Storybook)을 개발 환경에 설치해보세요
This community translation has not been updated to the latest version of Storybook yet. Help us update it by applying the changes in the English guide to this translation. Pull requests are welcome.

스토리북(Storybook)은 개발 모드에서 앱과 함께 실행됩니다. 스토리북은 비즈니스 로직과 맥락(context)으로부터 분리된 UI 컴포넌트를 만들 수 있도록 도와줍니다. 현재 문서는 리액트(React)를 위해 작성되었습니다. 그 밖의 React Native, Vue, Angular SvelteEmber에 대한 다른 문서도 존재합니다.

스토리북과 여러분의 앱

리액트 스토리북 설정

우리의 개발 환경에 빌드(build) 프로세스를 설정하려면 몇 가지 단계를 따라야 합니다. 우선 우리는 degit을 사용하여 빌드 시스템을 설정하려고 합니다. 이 패키지를 사용해 "템플릿"(일부 기본 구성으로 부분적으로 구축된 애플리케이션)을 다운로드해 개발 작업 흐름(workflow)을 빠르게 파악할 수 있습니다.

다음 명령을 실행해주세요:

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn
💡 템플릿에는 이 튜토리얼 버전에 필요한 스타일, assets 및 기본 구성이 포함되어 있습니다.

이제 다양한 환경에서 애플리케이션이 올바르게 작동하는지 아래 명령어를 통해 빠르게 확인할 수 있습니다:

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start
💡 --watchAll 명령어를 포함하여 모든 테스트가 실행되도록 합니다. 이 튜토리얼을 진행하는 동안 다양한 테스트 시나리오가 소개될 것 입니다. 이에 따라 package.json의 scripts를 수정하는 것을 고려해 보는 것이 좋을 것 입니다.

프런트엔드 앱의 세 가지 양식: 자동화된 테스트(Jest), 컴포넌트 개발(Storybook), 앱 자체 개발이 있습니다.

3가지 양식

여러분이 앱(응용 프로그램)의 어떤 부분에 따라 작업하고 있는지에 따라, 이것들 중 하나 이상을 동시에 실행하고 싶을 수 있습니다. 하지만 지금 우리의 초점은 단일 UI 구성 요소를 만드는 것이므로 스토리북을 실행하는데 집중할 것입니다.

변경 사항 커밋(commit)

이 단계에서는 파일을 로컬 저장소(local repository)에 추가하는 것이 안전합니다. 다음 명령을 실행하여 로컬 저장소를 초기화하고 지금까지 수행한 변경 사항(내용)을 추가 및 commit하세요.

$ git init

뒤이어:

$ git add .

그 다음에:

$ git commit -m "first commit"

그리고 마지막으로:

$ git branch -M main

그럼 이제 우리의 첫 번째 컴포넌트를 만들어봅시다!

Keep your code in sync with this chapter. View 9245261 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
간단한 컴포넌트
간단한 컴포넌트를 독립적으로 만들어봅시다
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify