CDD (component Driven Development)
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하기위해 등장한 개발 방법이
CDD(component Driven Development)이다.
-> 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.
CSS
CSS 전처리기
프로젝트의 규모가 커짐에 따라 CSS를 작성하는 일관된 패턴이 없다는 것은 개발자들에게 큰 걸림돌이었다.
이러한 문제점들을 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장한다.
- CSS 전처리기(CSS Preprocessor) : CSS가 구조적으로 작성될 수 있게 도와주는 도구 -> 이를 통해 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 잇는 방법이 생김.
SASS
CSS 전처리기 중 가장 유명한
SASS(Syntactically Awesome Style Sheets)는 CSS를 확장해 주는 스크립팅 언어이다.
즉, CSS를 만들어주는 언어로써 자바스크립트처럼 특정 속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용, 반복되는 코드를 한 번의 선언으로 여러곳에서 재사용 가능!
-> SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기 역할을 함.
단점 : 컴파일된 CSS의 용량이 어마어마하게 커짐
CSS 방법론의 대두
위와같은 CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었다.
세 방법론 모두 같은 지향점을 가지고 있다.
->
방법론의 공통 지향점
- 코드의 재사용
- 코드의 간결화(유지 보수 용이)
- 코드의 확장성
- 코드의 예측성(클래스 명으로 의미 예측)
하지만 이러한 방법론들에서도 문제점이 발생하기 시작함.
->
방법론의 문제점
- 클래스명 선택자가 장황해짐
- 로직 상에 진정한 캡슐화의 개념이 없다는것 -> 개발자들이 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없음
애플리케이션으로 개발 방향이 진화하면서 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.
->
CSS도 컴포넌트 영역으로 불러들이기 위해서
CSS-in-JS가 탄생
CSS-in-JS의 대표적 예로는 Styled-Component가 있다.
