Create an Addon
  • 소개
  • 설치
  • 상태 추적하기
  • 데코레이터
  • 프리셋
  • 카탈로그에 추가하세요
  • 결론
Framework:
React

프리셋

모든 스토리에 아웃라인을 보여줄 수 있습니다.

이제 데코레이터 부분이 끝났으니, 프리셋(preset) 기능을 사용해 모든 스토리(story)를 감싸 봅시다.

프리셋을 사용하면 다양한 스토리북의 설정 값들을 결합할 수 있고, 한번에 적용할 수 있습니다. 일부 애드온(addon)은 단순히 스토리북(Storybook)의 구성만 담당하고, UI가 존재하지 않습니다. 예를 들어, preset-create-react-apppreset-nuxt가 그렇습니다. 이러한 요소를 프리셋 애드온이라고 합니다.

프리셋은 두 가지로 분류할 수 있습니다:

  1. 애드온 등록을 위한 manager.js
  2. 글로벌 데코레이터를 명시하기 위한 preview.js

모든 스토리를 자동으로 감싸주는 withGlobals 데코레이터를 사용해 디자인 미리보기를 업데이트 해주세요.

src/preset/preview.js
import { withGlobals } from '../withGlobals';

export const decorators = [withGlobals];
💡 애드온 키트의 withRoundTrip 데코레이터는 애드온과 스토리 간 양방향 소통을 위한 예시입니다. 하지만 애드온에 꼭 필요한 것은 아니며 삭제할 수 있습니다.

도구를 껐다 켰다 하면 아웃라인이 나타납니다

최상위 단계 프리셋

카탈로그에 애드온을 추가하기 앞서, 짚고 넘어갈만한 항목이 하나 있습니다. 각각의 스토리북의 애드온에는 사용자의 추가 환경설정 없이 애드온을 등록하기 위해 최상위 단계 프리셋이 포함되어 있어야 합니다. 운좋게도 이것은 우리가 셋업(Set up)장에서 레포지토리를 클론할 때 설정되어 있습니다. 최상위 폴더에서 preset.js파일을 열면 다음과 같은 내용을 확인할 수 있습니다:

preview.js
function config(entry = []) {
  return [...entry, require.resolve("./dist/esm/preset/preview")];
}

function managerEntries(entry = []) {
  return [...entry, require.resolve("./dist/esm/preset/manager")];
}

module.exports = {
  managerEntries,
  config,
};
💡 프리셋에 대해 더 자세히 알고 싶다면 스토리북 공식문서를 읽어보세요.

성공했습니다! 이제 로컬 저장소의 스토리북에 완전한 기능을 하는 애드온이 생겼습니다. 마지막 장에서는, 카탈로그에 애드온을 나열하는 법을 배워볼 것입니다. 그렇게 하면 팀과 스토리북 커뮤니티와 공유할 수 있게 됩니다.

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