[javascript] Storybook을 사용한 자바스크립트 모바일 앱 UI 개발 방법

27 Nov 2023

javascript

Storybook은 자바스크립트 기반의 모바일 앱 UI 개발에 유용한 도구입니다. 이를 통해 개발자는 앱의 다양한 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있습니다. 이 글에서는 Storybook의 기본 개념과 사용법에 대해 알아보겠습니다.

Storybook이란?

Storybook은 UI 컴포넌트를 개발, 테스트 및 문서화하기 위한 개발 도구입니다. 개발자는 Storybook을 사용하여 컴포넌트의 다양한 상태를 시각적으로 확인할 수 있고, 사용자 인터랙션을 시뮬레이션할 수도 있습니다. 또한 코드의 재사용성을 높일 수 있으며, 다른 개발자와의 협업을 용이하게 합니다.

Storybook 설치

Storybook을 사용하기 위해서는 먼저 프로젝트에 Storybook을 설치해야 합니다. 아래의 명령어를 사용하여 설치할 수 있습니다.

npm install -g @storybook/cli

Storybook 설정

Storybook을 프로젝트에 설정하기 위해 다음과 같은 단계를 수행해야 합니다.

프로젝트 디렉토리에서 아래의 명령어를 실행하여 Storybook을 초기화합니다.
```
npx sb init
```
생성된 .storybook 디렉토리 내의 main.js 파일을 열어 아래와 같이 설정합니다.
```
module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [],
};
```

src 디렉토리 내에 component.stories.js 파일을 생성하여 Storybook 컴포넌트를 작성합니다. 예를 들어, 아래와 같이 작성할 수 있습니다.

   
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';

storiesOf('Button', module)
  .add('default', () => <Button>Hello Storybook</Button>)
  .add('with styles', () => (
    <Button style={{ color: 'red', fontWeight: 'bold' }}>Styled Button</Button>
  ));
  

생성된 component.stories.js 파일을 main.js 파일에 추가합니다.

module.exports = {
  stories: ['../src/**/*.stories.js', '../src/component.stories.js'],
  addons: [],
};

Storybook을 실행하기 위해 아래의 명령어를 실행합니다.
```
npm run storybook
```
Storybook이 성공적으로 실행되면 웹 브라우저에서 확인할 수 있습니다.

Storybook 사용하기

Storybook을 사용하면 다양한 상태와 스타일을 가진 컴포넌트를 테스트할 수 있습니다. Storybook은 컴포넌트의 개별적인 상태를 스토리라고 부르며, 이를 사용하여 컴포넌트를 시각적으로 확인할 수 있습니다.

Storybook을 사용하여 컴포넌트를 테스트하는 예시를 살펴보겠습니다. 아래의 코드는 Button 컴포넌트의 다양한 상태를 보여주는 Storybook 스토리입니다.

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';

storiesOf('Button', module)
  .add('default', () => <Button>Hello Storybook</Button>)
  .add('with styles', () => (
    <Button style={{ color: 'red', fontWeight: 'bold' }}>Styled Button</Button>
  ));

위의 스토리를 실행하면 Button 컴포넌트를 다양한 상태로 확인할 수 있습니다. 예를 들어, default 스토리에서는 기본적인 버튼을 확인할 수 있고, with styles 스토리에서는 스타일이 적용된 버튼을 확인할 수 있습니다.

결론

Storybook은 자바스크립트 기반의 모바일 앱 UI 개발을 위한 강력한 도구입니다. 이를 통해 컴포넌트의 다양한 상태를 시각적으로 확인하고 테스트할 수 있으며, 개발자 간의 협업을 원활하게 할 수 있습니다. Storybook을 사용하여 개발 효율성을 높이고, 유지보수를 용이하게 하세요!

참고자료: