Storbook Test by vue-admin-template

Introduction

vue-admin-template with storybook. test for storybook. : 회사 프로젝트가 어드민 페이지를 Element UI 기반으로 만들기로 했다. 연습삼아 몇개의 컴포넌트, 뷰를 storybook으로 엮어보며 효용성을 확인해보았다.

Clone from vue-element-admin

• Preview

• Documentation

• Gitter

• Donate

• Wiki

• Gitee 国内用户可访问该地址在线预览

• Base template recommends using: vue-admin-template

• Desktop: electron-vue-admin

• Typescript: vue-typescript-admin-template (Credits: @Armour)

• awesome-project

결론

페이지 단위 개발이 아닌 컴포넌트 단위 개발을 css 커스텀부터 깊게 들어가는 환경이라면 좋을 것 같다. 하지만 나처럼 css 프레임워크가 이미 있는 단계라면 오버 엔지니어링이 될 것 같다. 차다리 커스텀 UI 컴포넌트들만 Bit같은 컴포넌트 공유 플랫폼에 등록하여 관리하는 것이 더 좋을 듯 하다.

• 디자이너와의 협업 : 굳이 Storybook을 디자이너와 협업용으로 쓸 필요는 많이 없을 것 같다. 외부 css 프레임워크를 쓰고 있다면 오버 엔지니어링일 수 있다.
• UI 단위 테스트 : 사용해보지는 않았지만 화면 크기 단위로 시각테스트를 해볼 수 있음. jest같은 툴도 적용하기 좋게 되어 있음.

Setting for local

$ yarn
$ yarn serve

Tip for Storybook

: 기본적으로 다 문서에 나오는 얘기들. 그중 삽질 안하는 Tip

• Storybook으로 띄우는 로컬은 루트 프로젝트와는 asset 설정(외부 라이브러리 css&js..), 웹팩 설정등이 별도이다. 프로젝트를 루트와 동일하게 띄우려면 .storybook/plugin.js의 ElementUi 처럼 가져와야함.
• .storbook 폴더안에 webpack.config.js 설정을 root의 웹팩 설정(여기선 vue.config.js) 와 동일하게 해주어야함.
  • 예를들어 '@' 경로라던지, vue-loader, css-loader 등의 컴파일 설정이라든지.

알게된 점

UI 컴포넌트

• Element-ui 처럼 css 프레임워크가 있는 경우, Storybook은 css 프레임워크가 제공하지 않는 커스텀한 UI 컴퍼넌트를 대상으로만 해야함.(ex - Toast UI의 다양한 컴포넌트들, Datepicker)
• 이외의 기초적인 UI 컴퍼넌트(버튼, 모달 등)들은 커스텀이 많지 않을 경우 오버 엔지니어링일 수 있음.
• 컬러같은 디테일들은 확인들은 제플린 같은 툴로 확인하는게 더 나아보임.

스태틱 뷰(404에러, 스태틱페이지들)

• 오버 엔지니어링 : 페이지를 쉽게 확인할 수 있지만 꼭 Storybook으로 컴파일하지 않아도 확인할 방법은 얼마든지 있음.

참고문서

• Storybook for Vue tutorial
• Storybook document