Vue 프로젝트에서 Storybook을 사용하기 위한 4가지 팁

Scalingo에서 우리는 PaaS(Platform as a Service)이며 최근 모든 고객이 사용하는 대시보드를 개편했습니다.
덕분에 개발 프로세스를 가속화할 수 있었습니다.

오늘 저는 Vue 프로젝트에서 Storybook을 사용하기 위한 최고의 팁과 요령을 공유하겠습니다.

이 기사는 처음에 Scalingo.com에 게시되었습니다. 전체 기사here를 찾을 수 있습니다.

팁 1: mdx가 아닌 js 형식 사용

Storybook은 js 및 mdx (mdx는 js 섹션을 가질 수 있는 md 파일임)의 두 가지 스토리 형식을 제공합니다. 처음에는 향상된 문서 기능을 위해 mdx 형식을 선택했습니다. 그것은 나쁜 생각이었습니다.

실제로 우리는 mdx 추가 기능을 사용하지 않았으며 mdx를 사용한 유지 관리는 특히 더 어렵습니다.

우리가 문서화하고 싶은 몇 가지 사항에 대해 별도의 md 파일을 갖고 "보다 표준적인"js 형식을 사용하는 것이 더 낫습니다. 그 이유는 특히 Vue.js를 사용하면 js 형식으로 온라인에서 버그가 적고 문서가 더 많기 때문입니다.

팁 2: Storybook의 VueDevTools(빠른 해킹)

VueDevTools 은 캔버스 모드에서 작동하지 않지만 캔버스가 새 탭(왼쪽 상단 두 번째 아이콘)에서 열려 있는 경우에는 작동합니다.

팁 3: 구성 요소(컨트롤러/뷰...)에 대한 관심 분리

우리는 구성 요소의 관심사를 분리하기로 선택했습니다.

구체적으로 컨트롤러, 뷰, 디자인 시스템의 세 가지 구성 요소 유형이 있습니다. 컨트롤러 구성 요소는 모델(서비스, 상점)과 상호 작용하도록 승인된 유일한 구성 요소입니다. 결과적으로 이를 통해 다른 모든 구성 요소를 "순수한"시각적 구성 요소로 가질 수 있으며 "멍청한"소품을 통해서만 조종할 수 있습니다.

단순 플랫 json 파일을 통해 복잡한 보기 구성 요소를 쉽게 생성/업데이트할 수 있습니다.

import Projects from "@/components/views/Projects";
import currentUser from "@/stories/data/currentUser.json";
import props from "./props.json";
export default {
  title: "Views/Main/Apps",
  component: Projects,
};
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Projects },
  template: `<Projects v-bind="$props">`,
});
export const Default = Template.bind({});
Default.args = {
  user: currentUser,
  ...props,
};

구성 요소가 브라우저에서 이미 작동하는 경우 VueDevTools/component 탭을 사용하여 소품을 복사하고 json 파일에 붙여넣을 수 있습니다.

팁 4: 스토리 주변에 StoriesWrapper 추가

스토리 주변에 래퍼를 추가해야 하는 이유는 적어도 두 가지입니다.

우리의 경우 중첩된 라우팅을 사용합니다. 따라서 최종 뷰 구성 요소는 실제 앱에서 N 구성 요소를 감싸고 있습니다. 라우터가 있는 경우 보기는 최소한 App 구성 요소에 래핑됩니다. 스토리 래퍼는 이 "래핑된"환경을 재현하기 위해 여기에 있습니다.

두 번째 이유는 래퍼가 캔버스 매개변수를 미세하게 제어하는 ​​데 도움이 될 수도 있기 때문입니다.

여기에 두 개의 추가 도구 모음 메뉴 "i18n"및 "theme"이 있는 preview.js 구성이 있습니다.

// config/storybook/preview.js
export const globalTypes = {
  language: {
    name: "i18n",
    description: "i18n selector",
    defaultValue: "en",
    toolbar: {
      items: ["en", "fr"],
    },
  },
  theme: {
    name: "theme",
    description: "theme selector",
    defaultValue: "light",
    toolbar: {
      items: ["light", "dark"],
    },
  },
};
const appSbProvider = (Story, context) => ({
  template: "<story/>",
  data() {
    return { theme: context.globals.theme, language: context.globals.language };
  },
});
export const decorators = [appSbProvider];

그리고 우리의 모든 이야기에서 래퍼라고 불리는 우리 아이에게 그것을 사용하는 방법

// src/components/others/storybook/AppSb.vue
export default {
  name: "AppSb",
  ...
  created() {
    this.changeLanguage(this.$root.$children[0].language);
    this.changeTheme(this.$root.$children[0].theme);
  },
  ...
};

많은 노력을 기울이지 않고도 "앱과 같은"뷰 스토리를 마운트할 수 있습니다. 그리고 Storybook 툴바를 통해 제어할 수 있습니다.

// The Storybook wrapper
import WelcomeSb from "@/components/others/storybook/WelcomeSb";
// The component we want to storify
import Projects from "@/components/views/Projects";
// Flat Props in json files
import currentUser from "@/stories/data/currentUser.json";
import props from "./props.json";
export default {
  title: "Views/Main/Apps",
  component: Projects,
};
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Projects, WelcomeSb },
  template: `<WelcomeSb selectedRoute="Projects"><Projects v-bind="$props"></Projects></WelcomeSb>`,
});
export const Default = Template.bind({});
Default.args = {
  user: currentUser,
  ...props,
};

결론

Storybook을 많이 사용하는 Scalingo의 4가지 팁을 소개합니다!

블로그의 Vue.js 프로젝트 또는 이 블로그 게시물의 첫 부분에서 전체guide about Storybook를 확인하십시오.

그리고 서버를 다루지 않고 호스팅이 필요하다면 언제든지 저희를 확인하세요!