개발 어떤 방식으로 하세요? _ CDD : 컴포넌트 주도개발

 

안녕하세요 YB 김고은입니다. 

오늘은 CDD에 대해서 글 작성해보겠습니다! 

 

컴포넌트 주도 개발(CDD) 이란? 

CDD (Component Driven Development) 는 컴포넌트를 중심으로 UI 를 만들어가는 개발 방법론
기본적인 컴포넌트 단위를 기반으로, 사용자 View 를 구성하기 위해 점진적으로 컴포넌트를 결합해 가는 상향적(bottom-up) 접근이다.

 

 컴포넌트를 모듈 단위로 개발하자는 방법론으로 재사용성과 유지보수성을 강화하는데에 초점을 둔 방식이다. 

이때 컴포넌트란, 상호 교환이 가능하고 표준화된 UI 구성요소로

User Inferace의 조각인 동시에, 기능을 캡슐화하고 있다. 각 컴포넌트는 상호 독립적이다. 

마치 레고 벽돌과 같이 컴포넌트들을 합쳐, 레고 성을 만들어가는 과정과 유사하다! 

(레고 대신! 버튼, 카드, 모달 등이 이에 해당 함 )

 

또한, 이는 전통적인 페이지 단위의 설계인 top-down 방식과 대비되는, 개별 컴포넌트 설계인 bottom-up 접근이다.

---

컴포넌트 주도 개발 프로세스

 

 

그림과 같이 컴포넌트 주도 개발은 아래의 순서로 진행된다. 

하나의 컴포넌트 빌드 -> 컴포넌트간의 결합 -> 페이지 조립 -> 프로젝트 페이지 통합 

 

컴포넌트 빌드 

버튼, 입력창 등 가장 작은 단위의 컴포넌트들을 설계하고 구현하는 단계 

 

컴포넌트간의 결합

앞서 만든 작은 컴포넌트를 결합하여 점차적으로 컴포넌트의 복잡성을 증가시키면서 새로운 기능을 추가 

(ex. Form / Header / List / Table )

 

페이지 조립 

복합 컴포넌트를 결합하여 페이지를 구성 

이때 mock 데이터를 사용하여 상태변경 및 발생 가능 문제 등 페이지를 시뮬레이션 

(ex. Home Page / Profile Page / Login Page )

 

프로젝트에 페이지 통합 

데이터를 연결하고 비즈니스 로직을 호출해 페이지를 앱에 추가 

이때 UI가 백엔드 API 를 사용해 동작 

(Web App)

 

 

---

컴포넌트 주도 개발의 장점 

1️⃣ 품질 && 내구성 

독립적인 컴포넌트의 분리를 기반으로 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는지 확인이 가능하다. 

분리된 접근을 통해, 특정 조건이나 사용자 상태 상호작용에 따른 예외 상황 및 예러 검증이 더 철저하게 이루어질 수 있어 

결과적으로 버그 발생 가능성이 줄어들고, 안정적인 UI를 제공하게 된다.

 

2️⃣ 속도 && 협업의 효율성 

컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 빠르게 조립 가능하다. 

특히, 재사용성을 극대화하는데 중점을 두기 때문에 일관성 유지와 더불어 새롭게 컴포넌트를 만들 필요가 없어 속도 향상에 기여한다! 

 

또한, UI를 개별 컴포넌트로 분해한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인하기 떄문에 병렬 작업이 가능하다. 디자이너와 개발자가 동일한 컴포넌트를 기반으로 각각 작업이 있어 협업의 효율성이 좋은데, 특히 스토리북 (storybook)과 같은 도구를 활용하여 디자이너는 원하는 UI를 쉽게 공유하고, 개발자는 구현한 스토리북을 확인하여 디자이너의 피드백을 즉시 반영할 수 있다. 이처럼 스토리북을 통해 격리된 환경에서 컴포넌트를 시각적으로 개발, 테스트, 문서화할 수 있는 도구를 통해 개발적 이점을 더욱 높일 수 있다!!