Vue.js 에서 Storybook 적용

Storybook 이란?

SPA 개념이 나오면서 페이지 단위가 아닌 컴포넌트 단위로 개발 방식이 바뀌었고

최근에 유행하는 Vue.js, React, Angular 등이 이런 개발을 용이하게 한다.

 

웹 화면의 모든 UI 구성 요소들을 컴포넌트로 보면 되는데

예를 들어 버튼 같은 컴포넌트 개발 시 만들어지는걸 view 내부에서 확인하면서 고쳐가기가 어렵다. (하면 할 순 있다)

 

그래서 이런 컴포넌트의 특성을 고려해서 개발할 수 있도록 지원하는 오픈소스 라이브러리가 Storybook 이다.

 

Vue.js 에서 적용하기

 

Dependency 추가하기

 

storybook 라이브러리와

vue 관련된 정보를 우아하게 보여주기 위한 라이브러리를 추가한다.

npm install @storybook/vue  npm install storybook-addon-vue-info

 

Storybook 디렉토리 추가

 

아래와 같이 프로젝트 최상위 위치 (package.json 과 같은 레벨) 에 .storybook 디렉토리 추가

여기에 storybook 관련된 config 파일 위치

 

npm script 등록

package.json 에서 관리되는 npm script 에 추가

"scripts": { "storybook": "start-storybook -p 9001 -c .storybook" },

 

Storybook config 추가

 

.storybook 디렉토리에 config.js 파일을 추가한다.

아래는 components의 custom 디렉토리에 있는 컴포넌트들을 추가하기 위한 코드다.

import {configure, addDecorator} from '@storybook/vue'; import {withInfo} from 'storybook-addon-vue-info'; function loadStories() { const load = req => req.keys().map(req);   load(require.context('../view/components/custom', true, /.story.js$/)); } addDecorator(withInfo); configure(loadStories, module);

 

addons.js 파일 추가

import 'storybook-addon-vue-info/lib/register'

 

webpack.config.js 파일 추가

webpack.config.js 파일에 storybook을 위한 웹팩 설정 필요

const path = require('path'); // your app's webpack.config.js const custom = require('../webpack.config.js'); module.exports = async ({ config, mode }) => { config.module.rules.push({ test: /\.vue$/, loader: 'vue-docgen-loader', options: { docgenOptions: { alias: config.resolve.alias } }, enforce: 'post' }); config.module.rules.push({ test: /\.js$/, resourceQuery: /components/, loader: 'vue-docgen-loader', enforce: 'post' }); config.module.rules.push({ test: /\.s[a|c]ss$/, loaders: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } }, require.resolve('sass-loader') ] }); config.module.rules.push({ test: /\.css$/, loaders: [ 'vue-style-loader', 'css-loader' ], }); config.module.rules.push({ test: /\.story\.jsx?$/, loaders: [require.resolve('@storybook/addon-storysource/loader')], enforce: 'pre' }); return { ...config, module: { ...config.module, rules: custom.module.rules } }; };

 

컴포넌트 모듈을 위한 story 파일 추가

 

가볍게 버튼을 추가해보자. 

props 에 color 와 버튼의 메시지를 받을 수 있게 해놓고 해당 컴포넌트를 story 에 추가해보자.

 

<template> <div> <button :class="[color]">{{message}}</button> </div> </template> <script> export default { name: 'Button', props: { message: { type: String, default: 'Default' }, color : { type: String, default: 'primary' }, } }; </script> <style scoped> button { position: relative; overflow: hidden; border: 0; border-radius: 2px; cursor: pointer; user-select: none; outline: none; -webkit-appearance: none; padding: 8px 15px; color: #FFF; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); } button:hover { opacity: .8; } button:active { outline: none; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); } .primary { background: #2D8CF0; } .dark-primary { background: #2B85E4; } .light-primary { background: #5CADFF; } .error { background: #ed3f14; } </style>

 

그리고 해당 컴포넌트가 있는 디렉토리에 custom.story.js 파일을 추가하자.

위 버튼에서 받는 props인 message와 color를 default 값과 다르게 주었다.

import {storiesOf} from '@storybook/vue';
import 'storybook-addon-vue-info/lib/register';
import Button from './Button';
 
storiesOf('Custom', module)
.add('Button', () => ({
    components: { CustomButton: Button },
    template: `<custom-button message='Hello' color='error'/> `,
  }),
  {
    info: {}
  });
 

 

아래와 같이 error 에 정의된 빨간색 컴포넌트로 바뀌는 걸 볼 수 있음.

위 template에서 컴포넌트 사용 코드를 집어 넣으면 view에 적용 전까지 컴포넌트 개발을 하기 용이하다.

 

그 아래 Info(Vue) 탭에는 소스 사용법과 props 등 개발에 필요한 정보들이 다 나와있다. (addon)

 

컴포넌트마다 위와 같이 template이나 각종 정보를 입력해야 하는 불편함이 있지만,

자신이 만든 컴포넌트를 어떻게 사용하는지 설명해주는 것 보단 공유 차원에선 생산성이 훨씬 더 좋다.

혼자가 아니고 협업 및 생산성을 고려해서 Storybook 적용을 권장해본다..

 

 

 

※ 아래 공식 가이드 참고

https://storybook.js.org/docs/guides/guide-vue/