Component-Driven Development(CDD) 란 무엇일까? 디자인과 개발단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발, 즉 같은 UI컴포넌트를 여러 프로젝트 혹은 여러 팀 같에 공유할 수 있도록, 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 CDD라 한다.
CDD가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explore가 등장했다. 그 중 유명한 Storybook을 다뤄보았다. Storybook은 UI개발 즉, CDD를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있고 테스트 및 개발 속도를 향상 시키며 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.
구조적인 CSS 작성 방법의 발전
이 중에서 가장 인기 있는 CSS-in-JS 관련 React라이브러리인 Styled-Component에 대해 다뤄보자. Styled Component는 React의 컴포넌트 기반 개발환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생했다. Styled Component를 사용하면 기존 CSS문법으로도 스타일 속성이 추가된 REact컴포넌트를 만들 수 있다.
사용방법 등은 내일 진행할 스프린트에서 직접 경험하게 될텐데 아직 이럴것 같다! 하는 느낌이 전혀 오지 않아서 걱정이 조금 된다... 내일 스프린트를 진행하면서 많이 배울 수 있도록 해야겠다!
'나의 코딩여정(일기장)' 카테고리의 다른 글
| 8/11 React - Custom Component // TIL (0) | 2021.08.11 |
|---|---|
| 8/10 고차함수의 인자자리를 사용! (0) | 2021.08.10 |
| 8/6 Express Middleware / router, cors... (0) | 2021.08.06 |
| 8/5 Node.JS, Express (0) | 2021.08.05 |
| 8/4 CORS, Node Server (0) | 2021.08.04 |