StoryBook을 활용해보자

스토리북 공식문서와 함께합니다...

리액트를 위한 StoryBook 소개

스토리북은 UI개발을 위한 도구입니다. 컴포넌트를 분리하고 더 빠르고 쉽게 개발할 수 있습니다.
이렇게 하면 한 번에 하나의 컴포넌트에 대해 작업할 수 있습니다. 복잡한 개발 스택을 시작하거나 특정 데이터를 데이터베이스로 강제이동하거나 애플리케이션을 탐색할 필요 없이 전체 UI를 개발할 수 있습니다.

스토리북을 사용해서 웹 애플리케이션에서 작은 아토믹 컴포넌트와 복잡한 페이지를 만들 수 있습니다. UI라면 스토리북과 함께 만들 수 있습니다.

스토리북은 재사용을 위해 컴포넌트를 문서화하고 버그를 방지하기 위해 컴포넌트를 자동으로 시작적으로 테스트할 수 있게 도와줍니다. 응답할 수 있는 레이아웃을 미세하게 조정하거나 접근성을 확인하는 등의 작업을 수행하는 데 도움이 되는 추가 기능의 에코시스템을 통해 스토리북을 확장하세요.

스토리북은 가장 인기 있는 자바스크립트 UI 프레임워크와 통합되며 (실험적으로) Ruby on Rails와 같은 렌더링 컴포넌트 프레임워크를 지원합니다.

학습자료

스토리북이 지원하는 컴포넌트 중심 접근방식에 대해 자세히 알아보기 위해서는 공식문서를 활용하는 것이 좋습니다. 프레임워크와 언어로 된 스토리북을 사용해서 간단한 애플리케이션을 구축하는 방법을 통해 안내된 자습서를 원한다면 자습서를 참고하면 좋습니다.

StoryBook 설치하기

스토리북 CLI를 사용해서 단일명령어로 설치합니다.

npx storybook init

스토리북은 이미 프레임워크로 설정된 프로젝트에서 설치되어야 하기 때문에 빈 프로젝트에서는 작동되지 않습니다. 다음과 같은 프레임워크에서 사용이 가능합니다.

• Create an Angular Workspace
• Create React App
• Vue CLI
• Ember CLI
• etc

명령어를 통해 설치가 완료되면 다음과 같은 변화가 생깁니다.

📦 필요한 종속성을 설치합니다.
🛠 Storybook을 실행하고 구축하는 데 필요한 스크립트를 설정합니다.
🛠 기본 스토리북 구성을 추가합니다.
📝 몇 가지 간단한 이야기를 추가하여 시작하십시오.
📡 Storybook을 개선하는 데 도움이 되는 원격 측정 시스템을 설정합니다. 자세한 내용은 여기를 참조하십시오.

프레임워크에 따라 먼저 앱을 빌드한 다음 명령어를 실행해서 작동되는지 확인합니다.

npm run storybook

스토리북을 로컬로 시작하고 주소를 출력합니다. 시스템 구성에 따라 새 브라우저 탭에서 주소가 자동으로 열리고 시작 화면이 나타납니다.

• 원하는대로 사용할 수 있는, 보다 심층적인 구성 및 사용자 지정 옵션을 위한 유용한 링크 모음입니다.
• 스토리북의 지식을 넓히고 지속적으로 성장하는 스토리북 커뮤니티에 참여할 수 있는 두 번째 링크입니다.
• 시작하기 위한 몇 가지 예시가 있습니다.

설치문제

다음은 가장 일반적인 설치 문제와 해결방안입니다.

설치 명령에 --type react 플래그를 추가해서 스토리북을 수동으로 설정합니다.

npx storybook init --type react

스토리북의 CLI는 Yarn과 npm 패키지 관리자를 모두 지원합니다. 환경에 Yarn이 설치되어있지만 기본 패키지 관리자로 npm을 사용하려면 설치 명령어에 --use-npm 플래그를 추가하세요.

npx storybook init --use-npm

스토리북은 웹팩5를 지원합니다. 이전 버전에서 업그레이드 하는경우 다음 명령을 실행해서 해당 버전을 사용하도록 설정합니다. 웹팩5를 설정하는 방법에 대한 자세한 내용은 마이그레이션 안내서를 참조하면 됩니다.

npx storybook@next automigrate

Story란?

스토리는 UI 컴포넌트의 렌더링된 상태를 캡쳐합니다. 개발자는 컴포넌트별로 컴포넌트가 지원할 수 있는 모든 "흥미로운" 상태를 설명하는 여러 스토리들로 작성합니다.

CLI는 스토리북으로 구축할 수 있는 컴포넌트의 Button, Header, Page처럼 유형을 보여주는 컴포넌트예시들을 만들었습니다.

각 컴포넌트 예시에는 지원되는 상태를 보여주는 스토리세트가 잇습니다. UI에서 스토리를 탐색하고 .story.js 또는 .stories.ts 로 끝나는 파일에서 스토리의 숨겨진 코드를 볼 수 있습니다. 스토리는 ES6 모듈 기반 표준인 CSF Component Story Format 으로 작성되어 컴포넌트 예시를 작성합니다.

Button 컴포넌트부터 시작하겠습니다. 스토리란, 해당 컴포넌트를 렌더링하는 방법을 설명하는 함수입니다.

아래 코드는 Button을 "기본" 상태로 렌더링하고 Primary라는 스토리를 내보내는 방식입니다.

// Button.stories.js|jsx

import React from 'react';

import { Button } from './Button';

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button primary>Button</Button>;

렌더링된 Button을 스토리북 사이드바에서 클릭해서 봅니다.

위의 스토리 정의는 스토리북의 "args" 개념을 활용하기 위해 더욱 개선될 수 있습니다. Args는 Button에 대한 인수를 컴퓨터가 읽을 수 있는 방식으로 설명합니다. 이러한 Args는 동적으로 arguments를 변경하고 구성하는 놀라운 능력입니다.

// Button.stories.js|jsx

import React from 'react';

import { Button } from './Button';

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
};

//👇 We create a “template” of how args map to rendering
const Template = (args) => <Button {...args} />;

//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
   primary: true,
   label: 'Button',
};

스토리북은 렌더링 중에 주어진 args 속성을 스토리 안에 공급하기 때문에 두 스토리예시는 동일한 내용을 렌더링하지만, Args를 사용하면 시간을 절약할 수 있습니다.

• Buttons 콜백은 Actions 탭에 기록됩니다.
• Buttons의 arguments는 컨트롤을 조절할 수 있도록 제어탭에서 동적으로 편집할 수 있습니다.

스토리 편집

스토리북을 사용하면 한 번에 하나의 상태(스토리)에서 하나의 컴포넌트를 쉽게 작업할 수 있습니다. Button 코드나 스토리를 편집하면 즉시 브라우저에서 스토리북이 리렌더링되기 때문에 수동으로 고칠 필요가 없습니다.

변경할 때 UI가 계속 올바르게 표시되는지 확인하는데에도 도움이 됩니다. Button 컴포넌트에는 각기 다른 사용 사례에서 이를 보여주는 4가지의 스토리가 있습니다.

개발 중에 컴포넌트의 내용을 확인하면 실수로 되돌아오는 것을 방지할 수 있습니다. 스토리북과 통합된 툴을 통해 이를 자동화할 수있습니다.

스토리의 기본 구조를 살펴봤으니 스토리북의 UI를 사용해서 스토리를 개발하는 방법을 살펴보겠습니다.

스토리 찾아보기

지금까지는 스토리가 각각의 컴포넌트 상태와 일치한다는 것을 알아봤는데, 이번부터는 스토리북으로 컴포넌트를 위해 작업하는 방법을 알아보겠습니다.

Sidebar and Canvas

*.stories.js 파일은 컴포넌트의 모든 스토리를 정의합니다. 각 스토리에는 해당 사이드바 항목이 있습니다. 스토리를 클릭하면 캔버스에서 분리된 미리보기 프레임으로 렌더링됩니다.

사이드바에서 스토리를 클릭해서 스토리 사이를 탐색합니다. 사이드바 검색을 통해 이름별로 스토리를 찾을 수 있고, 바로가기 키를 사용할 수도 있습니다. 이렇게 사용가능한 바로가기 목록을 보려면 스토리북의 메뉴를 클릭하면 됩니다.

Toolbar

스토리북에는 시간 절역 도구가 내장되어 있습니다. 도구 모음에는 캔버스에서 스토리가 렌더링되는 바식을 조정할 수 있는 도구가 있습니다.

• Zooming은 컴포넌트를 시각적으로 스케일링해서업그레이드하거나 뭔가 자세히 살펴본다거나 규모를 확장..정확한 의미를 못찾았습니다 상세내용을 확인할 수 있습니다.
• Background은 뒤에서 렌더링된 배경을 변경해서 컴포넌트가 다른 시작적인 context에서 렌더링되는 방식을 확인할 수 있습니다.
• Viewport는 컴포넌트를 다양한 치수와 방향으로 렌더링합니다. 컴포넌트의 응답성을 확인하는 데 이상적입니다.

Docs탭에는 컴포넌트에 대한 소스코드를 참조한 자동 생성 설명서가 표시됩니다. 사용문서는 설계 시스템 또는 컴포넌트 라이브러리처럼 재사용이 가능한 컴포넌트를 팀과 공유할 때 유용합니다.

도구모음을 사용자 정의할 수 있습니다. 글로벌을 사용해서 테마와 언어를 빠르게 전환할 수 있고 커뮤니티에서 스토리북 도구모음 추가기능을 설치해서 고급 workflow를 사용할 수있습니다.

• Controls을 사용하면 컴포넌트의 Arg(입력)와 동적으로 상호작용할 수 있습니다. 컴포넌트를 교차로 배치하며 테스트하면서 edge case 처리되는 데이터값이 일정한 범위를 벗어날 때 발생하는 문제 를 찾습니다.
• Actions을 사용하면 상호작용이 있는 콜백을 통해 올바른 출력이 생성되는지 확인할 수 있습니다. 예를 들어 Header 컴포넌트의 "Logged In" 스토리를 볼 때 "Logout" 버튼을 클릭하면 onLogout 콜백이 트리거되는지 확인할 수 있습니다. 이러한 콜백은 Header를 사용한 컴포넌트에 의해 제공됩니다.

스토리북은 확장할 수 있습니다. NAT의 풍부한 에드온 에코시스템은 고객의 사례를 테스트, 문서화 및 최적화할 수 있도록 지원합니다. workflow로 요구사항을 충족하는 추가 기능을 생성할 수도 있습니다.

이제 스토리북에서 컴포넌트를 렌더링해서 컴포넌트 개발을 강화할 수 있게 사용할 수 있습니다.