✏️Achievement Goals

✅ 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
✅ 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.

📝summary

Component Driven Development(CDD)

레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발

페이지가 완성된 다음 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다
이때 이전 페이지에서 사용했던 버튼을 똑같이 사용하도록 요청받았다면 여러 프로젝트, 팀간에 같은 UI 컴포넌트를 공유한다면 새로 만들어야 하나? 라는 고민을 하지 않아도 된다

디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있고
고민 해결을 위해 등장한 개발 방법이 바로 Component Driven Development (CDD) 이다
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다

Storybook

Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했고
Component Explorer에는 많은 UI 개발도구중 하나가 Storybook 이다

Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다
이를 통해 버그를 사전에 방지할 수 있도록 도와주고 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다