Storybook은 웹 개발자들이 컴포넌트 기반의 UI 개발에 효과적인 도구입니다. 이를 통해 개발자는 각각의 컴포넌트를 독립적으로 테스트하고 시각화할 수 있습니다. 이 글에서는 Storybook을 구축하기 위한 환경 설정 방법을 알아보겠습니다.

1. 프로젝트 폴더 생성

먼저, Storybook을 구축하기 위한 프로젝트 폴더를 생성해야 합니다. 아래의 명령어를 사용하여 새로운 폴더를 만들어주세요.

mkdir mystorybook
cd mystorybook

2. NPM 초기화

다음으로, npm을 초기화하여 프로젝트에 필요한 의존성을 관리할 수 있도록 합니다. 아래 명령어를 입력해주세요.

npm init -y

3. Storybook 설치

Storybook을 설치하기 위해 아래 명령어를 실행합니다.

npx sb init

위 명령어를 실행하면 기본적인 설정 파일과 예제 컴포넌트가 생성됩니다. 이제 프로젝트 폴더 내에 .storybook 폴더와 stories 폴더가 생성된 것을 확인할 수 있습니다.

4. Story 작성

stories 폴더 내에는 컴포넌트에 대한 Story를 작성할 수 있는 파일들이 있습니다. 예시로 Button.stories.js 파일을 생성해보겠습니다.

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
};

export const BasicButton = () => <Button onClick={action('clicked')}>Click me!</Button>;
export const DisabledButton = () => <Button disabled onClick={action('clicked')}>I'm disabled</Button>;

위의 예시에서는 Button 컴포넌트에 대한 두 가지 다른 Story를 작성하였습니다.

5. Storybook 실행

모든 설정을 마쳤으니 이제 Storybook을 실행해보겠습니다. 아래 명령어를 입력해주세요.

npm run storybook

명령어 실행 후 브라우저에서 http://localhost:6006에 접속하면 Storybook이 정상적으로 실행되는 것을 확인할 수 있습니다.

마무리

이제 Storybook을 구축하는데 필요한 환경 설정을 완료하였습니다. 이제 개발자는 각각의 컴포넌트를 독립적으로 테스트하고 시각화하여 개발의 생산성을 높일 수 있습니다.

참고: Storybook 공식 문서

이상으로 Storybook을 구축하기 위한 환경 설정 방법에 대해 알아보았습니다.