목차
Storybook 소개
Storybook은 자바스크립트 웹 컴포넌트 개발에 사용되는 오픈 소스 도구입니다. Storybook은 컴포넌트의 독립된 스토리를 만들어서 시각적으로 확인하고 문서화할 수 있게 해주는 도구입니다. 이를 통해 개발자는 컴포넌트를 더 쉽게 개발하고 테스트할 수 있습니다.
Storybook 설치
Storybook을 설치하기 위해서는 npm이 컴퓨터에 설치되어 있어야 합니다. 설치되어 있지 않은 경우 npm을 먼저 설치해야 합니다. npm이 설치되었다면 아래 명령어로 Storybook을 설치할 수 있습니다.
npm install -g @storybook/cli
Storybook 컴포넌트 작성
Storybook을 사용하여 웹 컴포넌트를 작성해보겠습니다. 프로젝트 폴더에서 아래 명령어로 Storybook을 초기화합니다.
npx sb init
초기화가 완료되면 .storybook 폴더와 src 폴더가 생성됩니다. 이제 src 폴더 내에 웹 컴포넌트 파일을 생성합니다. 예를 들어, Button.js 파일을 생성하여 다음과 같이 작성합니다.
import React from 'react';
const Button = ({ text }) => {
return <button>{text}</button>;
};
export default Button;
각 컴포넌트마다 해당 컴포넌트의 스토리를 생성해야 합니다. src 폴더 내에 Button.stories.js 파일을 생성하고 다음과 같이 작성합니다.
import React from 'react';
import Button from './Button';
export default {
title: 'Components/Button',
component: Button,
};
const Template = (args) => <Button {...args} />;
export const Primary = Template.bind({});
Primary.args = {
text: 'Primary Button',
};
export const Secondary = Template.bind({});
Secondary.args = {
text: 'Secondary Button',
};
각 스토리는 Template 함수와 args를 이용하여 표현됩니다. 여기서는 기본적인 Primary Button과 Secondary Button을 작성하였습니다. 추가로 필요한 스토리가 있다면 export 문을 이용하여 작성하면 됩니다.
Storybook 실행
이제 작성한 컴포넌트와 스토리를 Storybook에서 확인해보겠습니다. 터미널에서 아래 명령어를 입력하여 Storybook을 실행합니다.
npm run storybook
정상적으로 실행되면 브라우저에서 Storybook을 확인할 수 있습니다. 여기서 컴포넌트를 선택하고 각 스토리를 확인할 수 있습니다. 또한, 스토리북은 자동으로 갱신되므로 컴포넌트의 변경 사항이 있을 때마다 확인할 수 있습니다.
결론
Storybook은 자바스크립트 웹 컴포넌트 개발을 더욱 효율적이고 간편하게 만들어주는 도구입니다. 컴포넌트의 스토리를 시각적으로 확인하고 문서화하는 것은 개발자들에게 큰 도움이 됩니다. Storybook을 사용하여 웹 컴포넌트를 개발해보세요!