Build an Ui Library?! (feat.신입 개발자)

seonja kim·2020년 8월 23일

Ui Library를 만들어라 (혼.자.서)

프론트엔드 개발자로 발을 들인지 많이 쳐봐야 5개월이 되지 않았다.. 부트캠프 3개월 수료하고 + 취준 1개월 + 회사에 프론트엔드 개발자로 입사한지 이제 일주일이 겨우 넘은 시점에서, 프론트엔드가 나 혼자인 상태에서(!), 회사 프로젝트에 사용할 Ui 컴포넌트들을 Material-Ui와 같은 라이브러리로 다큐먼트까지 완.벽.히 완성하는 것이 숙제! 문제는 현재 시급한 프로젝트가 있는데 그것도 함께 하면서!

이게 과연 가능한 것인가?

Library를 만드려면 어떤 지식이 필요?

Ui library를 쉽게 만들기 위한 library는 무엇이 있을까?

bit vs mondorepo vs react-styleguidist vs catalog vs @storybook/react

우선 사용 현황으로는 storybook이 압도적인 우승

대표적으로 많이 검색되는 bit, storybook, react-styleguidist의 차이점을 알아보면서 선택 기준을 정해보도록 하자.

Bit vs Storybook

bit은 Ui 컴포넌트 하나하나를 분리하여 host해주는 platform으로 install, update, 테스트 등 모두 각 컴포넌트 개별적으로 적용되며 하나의 컴포넌트를 만들어내는 과정이 거의 자동화되어 있다.

반면에 storybook은 해당 컴포넌트들을 하나의 갤러리처럼 저장하고 있으며 내 프로젝트 내에서만 사용하거나 배포, 테스트하는 과정을 자유롭게 만질 수 있다.

How to integrate it?

local develop 단계에서 visualize를 위해 storybook을 사용하고, bit은 실제 개별적인 컴포넌트로 나눠 그것이 다른 앱에서도 reusable한 것인지 시험해보는 형태로 두 개의 장점 모두를 경험해 볼 수 있다.

Storybook vs Styleguidist

예시가 잘 나와있는 블로그글

styleguidist는 md파일로 각 컴포넌트를 관리하는 만큼 각 컴포넌트에 대한 markdown을 생성하고, 정의를 내려놓는 것에 가깝다고 볼 수 있다. 반면에 storybook은 비슷한 기능을 하지만 각 컴포넌트의 props, state, context를 추적할 수 있으며 이미 크게 형성되어 있는 개발자 커뮤니티의 힘도 이용할 수 있다.

react-styleguidist vs storybook

나름의 정리

styleguidist는 하나의 컴포넌트를 md파일로 문서화하는 작업에 가깝고 bit은 하나의 컴포넌트를 프로젝트에서 완전히 분리하여 배포, 테스팅할 수 있다는 점에서 의미가 있을 수 있다. storybook은 이름 그대로 하나의 컴포넌트의 props, state를 마음대로 다루어 해당 컴포넌트에 대한 여러 예시들을 만들어놓을 수 있으며 이미 크게 형성된 커뮤니티의 도움으로 다양하게 활용할 수 있다.

내게 필요한 라이브러리는 무엇일까?

현재 내가 참여하고 있는 프로젝트 상 각 컴포넌트들은 하나의 형태만 가지고 있다. 그러므로 여러 props와 state를 추적하는 storybook보다 styleguidist가 더 어울릴 것 같다는 생각이 들고 이후 배포하여 사용할 수 있는지 테스트해볼 때 bit을 활용해볼 수 있지만 하나의 component 개별적으로 해봐야 한다는 것에서 시간이 걸리거나 인력이 많이 필요할 수 있을 것으로 예상한다.