CDD (Component Driven Development)

# 재사용할수있는 UI컴포넌트의 필요성을 느껴 이를 해결하기 위해 등장한 개발방법이

Component Driven Development(CDD)이다.

레고처럼 조립해 나갈수있는 부품단위로 UI컴포넌트를 만들어나가는개발.

컴포넌트단위로 만들어 페이지를 조립하는 개발방식으로 상향식 개발에 가깝다.

 

# 구조적인 CSS가 필요하게 된 이유
-점점 커지는 프로젝트의 규모와 복잡도, 팀원 수의 증가
-모바일이나 태블릿을 비롯한 다양한 디바이스의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야하기때문에 Css는 더 복잡해지게 되었다.

 

이러한 문제점들을 해결하기 위해 CSS전처리기(CSS Preprocessor)이 등장했다.

 

# CSS 전처리기(CSS Preprocessor)
-CSS가 구조적으로 작성될수있게 도움을주는 도구이다.
-css 전처리기 자체만으로는 웹서버가 인지하지 못하기 때문에 각 css전처리기에 맞는 compiler를 사용해야하고 
컴파일을 하게 되면 실제로 우리가 사용하는  css문서로 변환이 된다.
-이를 통해 css파일들을 잘 구조화할수있게 되었고, 최소한 css파일을 몇개의 작은 파일로 분리할수있는 방법이 생겼다.

 

# SASS (Syntactically Awesome Style Sheets)
-css의 전처리기 중에서 가장 유명하다.
-css를 확장해주는 스크립팅 언어이다.
-css를 만들어주는 언어로서 자바스크립트처럼 특정속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할수도있고,
반복되는 코드를 한번의 선언으로 여러곳에서 재사용할수있도록 해 주는 등의 기능을 가졌다.
-SCSS코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기의 역할을 한다.
- 장점보다 단점이 크다는 사실을 알게됨.
컴파일된 css의 용량이 커짐.

 

이러한 CSS전처리기의 문제를 보완하기위해 CSS방법론이 대두되었다.

 

#CSS방법론

- BEM, OOCSS, SMACSS

- 방법론의 공통 지향점

• 코드의 재사용
• 코드의 간결화(유지보수용이)
• 코드의 확장성
• 코드의 예측성(클래스명으로 의미예측)

#BEM
-대표적인 CSS방법론
-Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법
-Block, Element, Modifier 각각은 -와 _로 구분한다.
-클래스명은 BEM방식의 이름을 여러번 반복하여 재사용할수있도록 한다. 
-문제점

• 클래스명 선택자가 장황해짐
• 긴 클래스명 때문에 마크업이 불필요하게 커짐
• 재사용하려고 할때마다 모든 UI컴포넌트를 명시적으로 확장해야만 한다

 

캡슐화, 컴포넌트 영역 이런 문제들을 해결하기 위해 CSS-in-JS가 등장한다.

CSS-in-JS에는 대표적으로 Styled-Component가 있다.