Component Driven Development (CDD)

컴포넌트 주도 개발, CDD 컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론입니다. 즉, 컴포넌트 수준에서 시작해 페이지나 화면 수준에서 끝나며, 점진적으로 결합해가는 상향적(bottom up) 방식으로 UI를 구축하는 과정을 말합니다. 

지난 몇년 동안 Airbnb, IBM, Hubspot과 같은 회사에서 이와 같은 접근법으로 개발 프로세스를 크게 가속화하고 개발자와 디자이너의 커뮤니케이션을 개선하며 지속적으로 높은 수준의 제품 품질을 달성할 수 있었다고 합니다.

 

컴포넌트란? 
상호 교환 가능하고 표준화된 UI 구성 요소입니다. UI조각의 모양, 기능을 캡슐화합니다.

 

CDD

CDD의 장점

1. Focus Development: 특정 상태에 집중해서 개발을 할 수 있습니다.

2. Increase UI coverage: 관련된 모든 상태를 나열해서 우리가 어떤 것도 빠뜨리지 않았다는 것을 확신하고, 컴포넌트가 모든 가능한 시나리오에서 작동하는 것을 테스트 할 수 있습니다.

3. Target feedback: 동료와 같이 작업을 할 때 새롭거나 변경된 컴포넌트를 리뷰하는 훨씬 더 쉬운 방법이 될 수 있습니다.

4. Build a component library: 컴포넌트의 재사용을 '극대화' 시킬 수 있습니다.

5. Parallelize development: 한번에 하나의 컴포넌트를 작업하면 페이지 단위의 개발에서는 불가능한 방식의 작업을 서로 다른 팀 구성원간에 공유할 수 있습니다.

6. Test visuallly: 컴포넌트 익스플로러가 '시각적'테스트를 하는것을 허용합니다. 특히, TDD와 같은 장점을 가지고 있지만 UI영역에서는 'Visual TDD'의 형태를 허용할 수 있습니다. (컴포넌트 익스플로러)

 

결론

제 개인적인 의견으로는 CDD가 강력한 이유는 레고를 조립하듯 하나 하나의 컴포넌트에 집중해서 개발하면 개발해야하는 부분을 명확히 파악할 수 있고(응집력 증가), 잘못된 부분은 그 컴포넌트를 갈아끼우는 식(재사용성 증가)으로 개발할 수 있기 때문에 좋은 개발 방법론이라고 생각합니다. 또한 CDD를 위하여 Storybook을 적용한다거나, atomic design pattern을 활용하는등 다양하고 재밌는 방법으로 개발 할 수 있다고 생각합니다.

 

 

참고

- https://www.chromatic.com/blog/component-driven-development/