[javascript] Storybook과 자바스크립트 모바일 앱 개발의 연동성

27 Nov 2023

javascript

Storybook은 모바일 앱 개발 과정에서 매우 유용한 도구이다. Storybook을 사용하면 개발자는 컴포넌트를 개별적으로 테스트하고 문서화할 수 있다. 이는 개발자가 앱의 사용자 인터페이스를 더 쉽게 개발하고 유지 관리할 수 있게 해준다.

이제 자바스크립트 모바일 앱과 Storybook을 연동하는 방법에 대해 알아보자.

1. Storybook 설정

Storybook을 자바스크립트 모바일 앱에 추가해야한다. 아래는 webpack으로 설정된 자바스크립트 프로젝트의 webpack.config.js의 예시이다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

위 설정에서는 babel-loader를 사용하여 자바스크립트 파일을 빌드한다.

2. Storybook 테스트 스토리 작성

Storybook은 컴포넌트를 테스트할 수 있는 스토리를 작성하는 것으로 시작한다. 스토리는 아래와 같은 방식으로 작성할 수 있다.

// Button.stories.js

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

import Button from './Button';

export default {
  title: 'Button',
  component: Button,
  decorators: [(story) => <div style={{ padding: '1rem' }}>{story()}</div>],
};

export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;

export const emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

위 예시에서 text 스토리는 텍스트를 보여주는 버튼을, emoji 스토리는 이모티콘을 보여주는 버튼을 작성한다.

3. Storybook 실행

Storybook을 실행하기 위해 프로젝트 루트 디렉토리에서 아래 명령어를 실행한다.

npx start-storybook -p 6006

Storybook은 localhost:6006포트에서 실행된다.

4. 모바일 앱과 연동

Storybook은 개발자에게 사용자 인터페이스를 테스트하고 문서화하는 방법을 제공한다. 이를 자바스크립트 모바일 앱에 연동하기 위해 앱의 컴포넌트를 Storybook으로 가져와야 한다.

Storybook과 자바스크립트 모바일 앱의 연동 방법은 다양하지만 가장 간단한 방법은 Storybook UI를 웹뷰로 포함하는 것이다. 이러한 방식을 사용하면 앱 안에서 Storybook의 스토리를 확인할 수 있다.

5. Storybook UI 웹뷰 추가

Storybook UI 웹뷰는 앱에 추가해야한다. 이 웹뷰는 Storybook 서버에서 스토리를 가져와 보여준다.

import React from 'react';
import { WebView } from 'react-native-webview';

const StorybookWebView = () => {
  return <WebView source={{ uri: 'http://localhost:6006/' }} />;
};

export default StorybookWebView;

위 예시는 react-native-webview 패키지를 사용하여 Storybook 웹뷰를 추가하는 방법을 보여준다. uri 속성에 Storybook 서버의 URL을 설정하면 된다.

결론

Storybook은 자바스크립트 모바일 앱 개발에서 컴포넌트의 개별 테스트와 문서화 작업을 용이하게 해주는 강력한 도구이다. 자바스크립트 모바일 앱에 Storybook을 연동하여 개발자는 앱의 컴포넌트를 보다 효율적으로 테스트하고 관리할 수 있다.

참고 자료: Storybook 공식 문서