들어가며)
컴포넌트 주도 개발을 할 때 보통 결과물을 실시간으로 확인해가며 컴포넌트를 구현합니다. 실시간으로 결과물을 보며 상황에 따른 조건들과 해당 결과를 만들어가는 것은 꽤나 번거롭습니다.
- 초대 코드를 통해 상대를 초대하고 뜨는 모달창
- 포인트 사용 이력 등
그러나 이런 상황에서 독립적인 환경에서 UI를 그려볼 수 있다면 개발에 있어 고려할 것이 매우 축소될 것입니다.
이런 개발을 도와주는 컴포넌트 단위의 UI개발 도구인 storybook의 소개글들 작성해보려고 합니다.
1) CDD(컴포넌트 주도 개발)란 무엇인가요?
CDD(Component-Driven Development)는 컴포넌트 단위 중심으로 개발하는 개발 방법론 입니다.
화면을 구성할 때, 일일히 다른 UI를 사용하는 것이 아닌, 재사용가능한 UI 컴포넌트를 미리 디자인 하고 개발에 이용하면 훨씬 빠른 진행이 가능합니다.
간단하게 요약하자면, 컴포넌트를 마치 레고의 한 부품처럼 사용하는 방법론입니다.
2) 스토리북이 뭔가요?
스토리북이란 전체 UI를 한눈에 보면서 개발을 할 수 있으며 CDD를 지원하는 도구 중 하나입니다.
‘스토리’라는 컴포넌트 미리보기를 작성해두어 결과물을 즉시 확인 가능합니다.
이것은 개발자 뿐만이 아닌 코드 리뷰를 하거나 해당 파트를 수정하는 다른 개발자 나아가 디자이너 또한 쉽게 확인 가능합니다.
[버튼]을 가정해봅시다.
그렇다면 마이페이지 안에서만 쓰이는 버튼을 만드는 것이 아닌 어디서든 쓰일 수 있는 버튼 즉, 버튼이라는 컴포넌트를 만들게 될 것입니다.
재활용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션이 가능합니다.
따라서 다양한 상태확인이 가능합니다.
3) 스토리 북을 쓰면 무엇을 얻을 수 있죠?
- UI 컴포넌트들을 카탈로그화
- 컴포넌트 변화를 Stories로 저장
- 핫 모듈 재 로딩과 같은 개발 툴 경험 제공
- 리액트를 포함한 다양한 뷰 레이어 지원
스토리 작성은 결과물을 쉽고 빠르게 확인할 수 있다는 장점 뿐만 아닌, 좀 더 나은 컴포넌트 설계를 고민하게 된다는 점입니다.
한 컴포넌트를 재사용하려 할 때 초기에 진행했던 설계에서 문제점을 발견해 재사용시 의존성 제거 등을 위해 수정을 거쳤던 기억이 있습니다.
그러나 스토리북을 활용하며, 스토리를 작성하는 과정에서 설계 및 구조의 결함을 많이 발견 할 수 있습니다.
이는 환경 혹은 주변의 컴포넌트와의 의존성이 낮아야 독립적으로 그리는 것이 가능하기 때문입니다.
또한 재사용이 쉽게 개발이 진행되어야하기에 스토리 작성이라는 과정에서 계속해서 구조에 대해 고민하는 리팩토링 효과를 부수적으로 얻을 수 있습니다.
활용 예시)
- 사용한 모습
