cdd란?
부품 단위로 ui 컴포넌트를 만들어 나가는 개발 방법.
현업에서는 기획자, 디자이너, 개발자 등 여러 분야의 사람들이 모여 하나의 프로젝트를 완성한다.
이 때, 기획자로부터 전에 사용했던 ui 요소를 재사용해달라는 요청이 올 수도 있다. 그럴때마다 디자이너와 개발자가 이 ui요소를 다시 만들어야 한다면, 매우 비효율적일 것이다.
이러한 문제점을 해결하기 위해 나온 것이 cdd 이다.
디자인과 개발 단계에서부터 재사용이 가능한 컴포넌트 단위로 디자인하는 cdd 방식을 이용하면 훨씬 효율적으로 일할 수 있다.
CSS in JS
프로젝트의 규모가 커짐 + 여러 디바이스들의 등장으로 다양한 디스플레이를 커버해야함 -> CSS 구조화의 필요성 대두
-
CSS 전처리기의 등장 (EX. SASS)
BUT, 컴파일된 CSS 파일의 용량이 너무 커지는 문제점 발생 -
다양한 CSS 방법론의 등장
여러가지 방법론들이 등장하였으나 결국 지향하는 바는 같았다.
ex. BEM - Block,Element,Modifier
- 코드의 재사용
- 코드 간결화
- 코드의 예측성 (클래스명으로 의미 예측)
- 코드의 확장성
CSS 방법론에도 진정한 캡슐화가 어렵다는 문제점이 발생.
(캡슐화: 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)
- CSS도 컴포넌트 안으로 불러들이자! - CSS in JS
- Styled Component 이용
Zoë Park