Component Driven Development
- CDD ?
컴포넌트 주도개발 (CDD) 은 컴포넌트 주위에 개발프로세스를 고정하는 개발 방법론이다.
자세히 말하자면, 컴포넌트 수준에서 시작하여 화면수준에서 끝나는것으로,
" 바닥부터 끝까지 " UI를 구축하는 과정을 말한다. (Bottom - up)
개발 프로세스를 크게 가속화하고 개발자와 디자이너의 커뮤니케이션을 개선하며
지속적으로 높은 수준의 제품 품질을 달성할 수 있다.
컴포넌트란?
상호 교환 가능하고 표준화 된 UI 구성 요소. 마치 레고처럼 조각조각이 모여 자동차, 비행기, 우주선을 만들듯이
컴포넌트라는 조각들을 조합하여 하나의 화면을 제공할 수 있다.
- CDD 의 단계
1. 한번에 하나의 컴포넌트 빌드
각 컴포넌트를 독립적으로 빌드하고 관련상태를 정의한다,
어떠한 제품을 이루는 작은 부품 하나를 만든다고 생각하면 쉬울 듯 하다.
2. 컴포넌트 결합
컴포넌트를 결합하여 점차적으로 컴포넌트의 복잡성을 증가시키면서
새로운 기능들을 추가한다.
3. 페이지 조립
컴파운드 컴포넌트를 결합하여 페이지를 구성한다.
목 (Mock) 데이터를 사용하여 상태의 변경, 발생하는 문제 등 페이지를 시뮬레이션 한다.
4. 프로젝트에 페이지 통합
데이터를 연결하고 비즈니스 로직을 호출해 페이지를 앱에 추가한다.
UI가 백엔드 API 를 사용해 서비스한다.
- 왜 컴포넌트를 사용하는가?
오늘 날 사용자 인터페이스 ( UI ) 는 그 어느 때보다도 복잡하다.
그리고 사람들은 다양한 디바이스에서 제공되는 보다 매력적이고 개인화 된 경험(UX)을 기대하게 된다.
즉, 프론트 엔드 개발자와 디자이너는 UI에 보다 많은 로직을 포함해야 한다는 의미가 된다.
하지만 UI는 애플리케이션 규모가 커짐에 따라 점점 다루기 어려워진다,
규모가 큰 UI는 깨지기 쉽고 디버깅이 어려울 뿐더러 제작에도 많은 시간이 필요하다.
그렇기에 UI를 모듈 식으로 세분화하여 견고하면서도 유연한 컴포넌트를 구성하여
이러한 문제를 해결할 수 있게 되는것이다. 컴포넌트는 애플리케이션 비즈니스 로직 (opens new window)
에서 상태를 분리하여 상호 교환(interchangeability (opens new window))을 가능하게 한다.
이렇게 하면 복잡한 화면을 간단한 컴포넌트로 분해 할 수 있다.
각 컴포넌트에는 잘 정의된 API와 목(mock (opens new window)) 구성된
일련의 상태(정적)가 있다. 이를 통해 컴포넌트를 분리하고 재구성하여 다른 UI를 구축 할 수 있다.
- CDD 의 장점
1. 품질 (Quality)
독립적으로 컴포넌트를 분리하여 관련상태를 정의하여 UI가 다양한 시나리오에서 작동하는지 확인이 가능.
2. 내구성 (Durability)
컴포넌트 수준에서 테스트하여 세부사항까지 버그를 정확하게 찾아낼 수 있다.
테스트보다 작업량이 적다.
3. 속도 (Speed)
컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있다.
4. 효율성 (Efficiency)
UI를 개별 컴포넌트로 분해 한 다음 서로 다른 팀 구성원간에 공유하여 개발 및 디자인을 병렬 처리 한다.
