컴포넌트 주도 개발(CDD) 란?
- 컴포넌트 중심으로 UI 개발하는 방법론
컴포넌트 주도 개발의 탄생
- 소프트웨어 엔지니어 Tom ColeMan 이 컴포넌트 아키텍처 및 프로세스 UI의 개발 변화를 설명하기 위해 Component Driven Development를 소개 (2017) 했다.
컴포넌트 주도 개발 (CDD)
- 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론이다. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띈다.
컴포넌트란?
- 상호 교환 가능하고 표준화 된 UI 구성 요소이다. UI 조각의 모양, 기능을 캡슐화한다. LEGO 벽돌을 떠올려보자.
- 컴포넌트란 데이터와 화면을 하나로 묶어둔 덩어리
CDD는 UI를 구축할 때 직면하게 되는 앱 규모의 복잡성을 해결한다.
- 컴포넌트(components)
- 컨테이너(containers, 2개 이상 컴포넌트 조합)
- 페이지(pages, 2개 이상 컨테이너 조합)
왜 컴포넌트인가?
- 오늘 날 사용자 인터페이스는 그 어느 때보다도 복잡하다. 사람들은 다양한 기기에서 제공되는 매력적이고 보다 개인화 된 경험(UX)을 기대한다. 즉, 프론트 엔드 개발자와 디자이너는 UI에 보다 많은 로직을 포함해야 한다는 의미이다.
하지만 UI는 애플리케이션 규모가 커짐에 따라 다루기 어려워진다. 규모가 큰 UI는 깨지기 쉽고 디버깅이 어려울 뿐더러 제작에도 많은 시간이 필요하다. UI를 모듈 식으로 세분화하여 견고하면서도 유연한 컴포넌트를 구성하면 이러한 문제를 해결할 수 있다. 컴포넌트는 애플리케이션 비즈니스 로직 (opens new window)에서 상태를 분리하여 상호 교환(interchangeability (opens new window))을 가능하게 한다.
이렇게 하면 복잡한 화면을 간단한 컴포넌트로 분해 할 수 있다. 각 컴포넌트에는 잘 정의된 API와 목(mock (opens new window)) 구성된 일련의 상태(정적)가 있다. 이를 통해 컴포넌트를 분리하고 재구성하여 다른 UI를 구축 할 수 있다.
CDD 장점
품질 - 독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는 지 확인 가능하다.
내구성 - 컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있다. 테스트 보다 작업량이 적다.
속도 - 컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용 하여 UI를 보다 빠르게 조립할 수 있다.
효율성 - UI를 개별 컴포넌트로 분해 한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬 처리한다.
CDD가 아닌 UI 개발
다음의 경우 CDD의 UI가 아니다.
- 페이지 기반
웹 사이트를 페이지 모음 정도로 취급하는 개발 및 디자인 프로세스이다.
페이지에서 공통 요소를 재사용하기 위해 많은 노력을 기울이지 않는다.
- 페이지용으로 설계 된 도구
Wordpress 또는 Drupal은 문서를 화면에 렌더링 하는 데 중점을 둔 도구이다.
Rails, Django 및 PHP와 같은 백엔드 프레임 워크는 UI 재사용을 사후 고려사항으로 간주하고 광 범위한 컴포넌트 재사용을 방지한다.
