DO 해커톤 로그 #2

개발자 여러분, 안녕하세요.

hackaton 프로젝트에서 가장 최근에 추진한 작업은 Storybook을 구현하고 프런트 엔드 패키지에 모든 UI 구성 요소를 만드는 것이었습니다.

스토리북

Storybook이 무엇인지 모른다면 심각한 기회를 놓치고 있는 것입니다! 애플리케이션의 모든 구성 요소를 '스토리'로 구성할 수 있는 도구입니다. 구성 요소의 각 스토리는 사용할 수 있는 방법이므로 예를 들어 버튼 구성 요소의 다양한 변형을 가질 수 있습니다. 또한 핫 리로딩을 구현하고 작업을 위해 구성 요소를 더미 페이지에 배치하는 것에 대해 걱정할 필요가 없기 때문에 구성 요소에서 작업하기에 좋은 장소입니다.



페이지 오른쪽에 표시되는 컨트롤은 모두 TypeScript 인터페이스에서 추론하여 자동으로 빌드됩니다. '색상' 라디오 버튼은 color: 'primary' | 'secondary'에서 가져오고 토글은 모두 부울 속성입니다. 문서도 생성합니다.



Typescript로 React 구성 요소를 작성하는 경우 Storybook은 추가 구성 없이 자체적으로 모든 작업을 수행합니다.

여러분이 해야 할 일은 스토리를 작성하는 것이지만 매우 쉽습니다. 여기 내 버튼 구성 요소에 대한 스토리 파일이 있습니다.

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';

import Button, { Props as ButtonProps } from './index';

export default {
  title: 'Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
} as Meta;

const Template: Story<ButtonProps> = args => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  color: 'primary',
  children: 'Im a button!',
};

export const Disabled = Template.bind({});
Disabled.args = {
  color: 'primary',
  disabled: true,
  children: 'Im a button!',
};

export const Secondary = Template.bind({});
Secondary.args = {
  color: 'secondary',
  children: 'Im a button!',
};

export const Small = Template.bind({});
Small.args = {
  color: 'primary',
  small: true,
  children: 'Im a button!',
};

export const Loading = Template.bind({});
Loading.args = {
  color: 'primary',
  loading: true,
  children: 'Im a button!',
};

요점은 다음과 같습니다. 이 파일의 기본 내보내기는 이 구성 요소와 관련된 모든 스토리에 대한 메타데이터가 포함된 개체입니다. 여기에서 구성 요소의 표시 이름, 스토리북이 화면에 표시하는 방법 및 (많은 , 훨씬 더. 그런 다음 템플릿을 정의합니다. 이것은 모든 스토리를 렌더링하는 데 사용되는 기능입니다. 그런 다음 우리가 해야 할 일은 'args' 개체에 해당 스토리의 소품이 무엇인지 설명하여 스토리 자체를 내보내는 것입니다.

Storybook의 일부 기능에는 테스트를 위한 모의 버전, 데코레이터, 문서 작성을 위한 MDX 페이지 및 전체 확장을 위한 애드온 API로 구성 요소 가져오기를 대체하는 기능이 포함됩니다.

Storybook은 React만을 위한 것이 아니라 예상할 수 있는 3대 프레임워크와 기타 여러 프레임워크를 포함하여 긴 목록의 프레임워크와 라이브러리를 지원합니다. 프론트 엔드 작업에 많은 도움이 되었기 때문에 앞으로 시도해 보시기 바랍니다.

UI 구성요소

지금까지 만든 UI 구성 요소는 상당히 지루한 항목, 버튼, 입력 및 스피너입니다. 확인하려면 저장소를 복제하고 다음을 실행할 수 있습니다.

yarn
yarn workspace @dbug/web storybook

이브스너브 / 디버그

dbug를 사용하여 좋아하는 통신 플랫폼을 사용하여 프로그램을 페어링할 사람을 찾으십시오.

즐거운 해커톤 되세요!