New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Create an Addon
React
Chapters
  • 소개
  • 설치
  • 상태 추적하기
  • 데코레이터
  • 프리셋
  • 카탈로그에 추가하세요
  • 결론

설치

애드온 키트로 시작해보세요

우리는 애드온(addon) 키트 를 사용하여 프로젝트를 부트스트랩 합니다. 스토리북(Storybook) 애드온을 구축하는 데 필요한 모든 것을 제공합니다.

  • 📝 개발 모드에서 실시간 편집
  • ⚛️ UI를 위한 React/JSX 지원
  • 📦 Babel을 사용한 트랜스파일링 및 번들링
  • 🏷 플러그인 메타데이터
  • 🚢 Auto를 사용하는 배포 관리

시작하기에 앞서, 애드온 키트 저장소에서 use thie template 버튼을 클릭하세요. 그러면 모든 애드온 키트가 포함된 새로운 저장소가 생성됩니다.

addon kit

다음으로, 저장소를 클론하고 의존성(dependency)을 설치합니다.

Copy
yarn

애드온 키트는 기본으로 타입스크립트를 사용합니다. 하지만 튜토리얼의 목적을 위해 eject 명령어를 사용해서 보일러플레이트 코드를 자바스크립트로 바꿔주세요.

Copy
yarn eject-ts

이 명령어는 모든 코드를 자바스크립트로 변환해줍니다. 이 작업은 파괴적인 과정이라, 다른 어느 코드를 작성 하기전에 이 명령어를 먼저 실행하는 것이 좋습니다.

마지막으로, 개발 모드를 시작합니다. 스토리북을 시작하고 Babel을 보기 모드에서 볼 수 있습니다.

Copy
yarn start

애드온 코드는 src 폴더에 있습니다. 포함된 보일러플레이트 코드는 세 개의 UI 패러다임을 비롯해 상태 관리나 스토리에 반응하기 등의 다른 개념들을 보여주고 있습니다. 다음 장에서는 이에 대해 더 자세히 살펴볼 것입니다.

Keep your code in sync with this chapter. View on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
상태 추적하기
애드온의 상태를 Manager와 Preview로 관리하기
✍️ Edit on GitHub – PRs welcome!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI