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

이번에 취업을 하고 새로운 서비스의 관리자 콘솔을 구축하기 위해 CDD를 채택해서 개발해보려 한다!

그럼 CDD는 뭘까?

 

컴포넌트 주도 개발 (Component-Driven Development) 는 모듈화된 컴포넌트로 사용자 인터페이스를 구축하는 개발 및 디자인 방식이다.

여기서 '모듈' 과 '컴포넌트' 라는 단어가 나오는데 얼핏 보면 비슷해보이지만 다른 의미를 가지고 있다.

 

먼저 컴포넌트와 모듈 두 가지의 개념을 알아보자면

 

 

컴포넌트

사용자 인터페이스의 가장 작은 단위로 과업에 상관없이 일관성 있게 사용되는 공통 요소

 

현대의 사용자 인터페이스는 복잡하다. 사람들은 여러 기기에서 개인화된 경험을 기대하고 이는 프론트엔드 개발자와 디자이너가 UI에 더 복잡한 로직을 포함시켜야 한다는 의미이다. 

 

컴포넌트는 상태를 비즈니스 로직에서 분리한다. 이렇게 하면 복잡한 화면을 간단한 컴포넌트로 분해할 수 있다. 간단하게 생각하면 각각 다른 기능을 하는 똑같이 생긴 100개의 버튼이 있는 웹 화면을 생각해보자. 이를 하나하나 구현하려면 굉장히 오랜 시간이 걸리며 효율성이 떨어진다. 하지만 Button 이라는 컴포넌트 하나를 만들고 각 버튼이 수행할 기능만 전달한다면 훨씬 간단하게 구현할 수 있다.

 

컴포넌트의 주요 특징으로는 

• 독립성 : 다른 컴포넌트와 분리되어 독립적으로 작동하며, 자체 로직을 가질 수 있다.
• 재사용성 : 한 번 만들어진 컴포넌트를 여러 곳에서 가져다 쓸 수 있어 효율적이다.
• 캡슐화 : 특정 기능이나 UI 요소를 하나로 묶어 관리한다.
• 조합 : 여러 컴포넌트를 조합하여 복잡한 화면을 구성한다.

우리가 웹 화면에서 보는 작은 버튼, Input, Avatar 등을 컴포넌트로 구축하고 이를 점진적으로 결합하여 복잡성을 높인다.

 

 

모듈

프로그램에서 독립적이고 재사용 가능한 작은 단위

 

큰 시스템을 여러 개의 작은 블록으로 나누어 관리하기 편리하게 만든 것이며, 각 모듈은 자체적으로 완성된 기능을 가지면서 다른 모듈과 연결된다. 

 

이런 모듈들은 다른 부분과의 의존성을 최소화하고 필요한 곳에서 쉽게 가져다 쓰거나 기능을 추가 / 교체할 수 있게 만들어 시스템의 개발, 유지보수, 확장을 용이하게 된다.

 

모듈의 주요 특징으로는

• 독립성 : 특정 기능과 관련된 코드를 하나의 파일이나 단위로 묶어 분리한다.
• 재사용성 : 한 번 만들어진 모듈을 다른 프로그램이나 시스템에서 복사 / 붙여넣기 없이 쉽게 불러와 사용할 수 있어 코드 중복을 줄인다.
• 확장성 및 유연성 : 시스템에 새로운 기능을 추가하거나 기존 기능을 변경할 때, 해당 모듈만 수정하거나 새로운 모듈을 추가 / 교체하면 되므로 전체 시스템에 미치는 영향을 최소화한다. 
• 낮은 결합도 : 각 모듈은 다른 모듈에 적게 의존하며 독립적으로 작동한다.
• 높은 응집도 : 하나의 모듈은 관련된 기능들로만 구성되어 하나의 명확한 목적을 가진다.

 

파이썬, 자바스크립트에서는 파일 단위로 모듈을 구성하고 다른 파일에서 import를 통해 불러와 사용한다.

 

 

컴포넌트와 모듈의 차이

컴포넌트와 모듈 둘다 '독립된' '재사용 할 수 있는' 이라는 말이 들어가기 때문에 유사한 의미로 혼용되곤 한다. 하지만 모듈은 코드 구조와 의존성을 조직하기 위한 설계 단위로 컴포넌트는 실행 시점에 시스템을 구성하고 교체 / 조합할 수 있는 런타임 단위이다.

 

그렇다면 모듈화된 컴포넌트라는 말은 컴포넌트를 작은 기능 단위로 분리하여 각 컴포넌트가 명확한 역할을 가지고 독립적으로 재사용, 교체, 조합 가능하도록 설계된 컴포넌트를 말한다.

 

 

컴포넌트 주도 개발 방법

1. 각 구성 요소를 개별적으로 만들고 관련 상태 (기본, 로딩, 에러, 비어있음 등) 를 정의한다.
2. 구성 요소를 결합하여 더 큰 구성 요소를 만든다.
3. 복합 구성 요소를 조합하여 페이지를 만든다. 이때 더미 데이터를 사용하여 실제 앱에서는 만들기 어려운 상태나 예외 상황도 함께 시뮬레이션 한다.
4. 데이터를 연결하고 비즈니스 로직을 연동하여 앱에 페이지를 추가한다. 이 단계에서 UI가 백엔드 API와 연결된다.

그렇다면 한 번에 하나의 구성 요소만 만드는 것이 왜 중요한 걸까?

 

• 개발에 집중하기 쉽다.
  • 전체 앱을 특정 상태로 만들어가며 컴포넌트를 확인하는 일은 매우 번거롭다. 예를 들어 로딩이나 에러 처럼 실제 흐름에서 만들기 어려운 상황은 테스트조차 힘들다. 이 때 컴포넌트를 단독으로 다루면 이런 상태들을 쉽게 만들고 확인할 수 있다.
• UI 품질을 확인할 수 있다.
  • 컴포넌트의 모든 상태를 나열하고 점검하면 모든 경우의 수에서 컴포넌트가 잘 동작하는지 확인할 수 있다.
• 피드백이 정확해진다.
  • 특정 화면 전체가 아닌 하나의 컴포넌트만 보면서 피드백 할 수 있기 때문에 개발자와 디자이너 간의 소통이 쉽다.
• 라이브러리를 만들 수 있다.
  • 잘 만들어진 컴포넌트들은 하나의 라이브러리가 되고 이후 새로운 화면이나 기능을 만들 때 빠르게 재사용할 수 있다. 
• 개발을 병렬로 진행할 수 있다.
  • 페이지 단위로 나누게 되면 한 사람이 막힐 경우 전체 작업이 지연될 수 있다. 하지만 컴포넌트 단위로 나누면 여러 사람이 각자 다른 컴포넌트를 동시에 개발할 수 있다. 

이런 컴포넌트 주도 개발을 지원하기 위한 도구들이 나오고 있으며 그중에서도 가장 중요한 것이 컴포넌트 탐색기(Component explorer) 이다. 

컴포넌트 탐색기는 비즈니스 로직과 애플리케이션 context로부터 UI 문제를 분리한다. 각 컴포넌트의 지원되는 variation에 초점을 맞추기 위해 UI 컴포넌트를 별도로 빌드한다. 이렇게 함으로써 입력값 (props, state)이 UI에 어떻게 영향을 주는 지 측정하게 해준다.

 

 

대표적인 컴포넌트 탐색기는 React Storybook이 있다. 

 

 

컴포넌트 주도 개발의 가장 큰 장점 중 하나는 팀 전체의 동의 없이도 시도해 볼 수 있다는 점이다. 물론 디자인 단계부터 모든 구성원이 컴포넌트 기반으로 생각하고 작업하는게 이상적이지만 대부분의 이점은 개발자 한 명 만으로도 충분히 누릴 수 있다.

 

 

 

 

 

 

출처

https://www.krds.go.kr/html/site/component/component_summary.html

공식 배너 (Masthead) | 컴포넌트 - KRDS

https://yozm.wishket.com/magazine/detail/3142/

비슷해 보이지만 다른 컴포넌트와 모듈, 개념 정리 | 요즘IT

http://www.ktword.co.kr/test/view/view.php?no=2226

모듈

https://heyoonow.tistory.com/150

모듈과 컴포넌트의 차이 명확하게 알려드립니다 - Module, Component & Connect(C&C), 자원할당에 대해서

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

Component-Driven Development