[Methodology] CDD(Component Driven Development) - 테스트(2/2)

Intro

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

Repo

Storybook-test : vue-admin-template with storybook. test for storybook.

결론

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

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

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으로 컴파일하지 않아도 확인할 방법은 얼마든지 있음.

2023

Flutter 맛보기 1

3 분 소요

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

2022

D3.js 차트 개발 Hands on lab

5 분 소요

직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다

직방이 사용자 행동 로그를 관리하는 방법. ZAMS

최대 1 분 소요

직방에서 작성했던 블로그 글을 공유합니다.

2019

[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

1 분 소요

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...

[Scaffold] Scaffold Module 개발

최대 1 분 소요

도입 이유

[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

2 분 소요

작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...

[Git] Git Command 정리

3 분 소요

Git 시스템 이해하기

[Design Pattern] Monorepo 공부

2 분 소요

결론