CDD (Component-Driven Development)
레고처럼 조립해 나갈 수 있도록 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진핼 시키는 것.
CSS PREPROCESSOR(CSS 전처리기)
CSS 작업을 효율적으로 하기 위해 구조화하는 도구
=> 많은 CSS 문서는 유지 관리가 힘듦 -> 프로그래밍 개념(변수, 함수, 상속)을 활용하는 것.
하지만 CSS 전처리기는 자체만으로 웹 서버가 인지하지 못한다.
=> CSS 전처리기에 맞는 Compiler를 사용해야하고 이 compile을 톤애 우리가 사용하는 CSS문서로 변환이 된다.
이를 통해 CSS 파일을 쉽게 구조화 할 수 있고 CSS 파일을 작은 파일로 나눌 수 있게 됐다.
SASS(Syntactically Awesome Style Sheets)
CSS를 확장시키는 스크립팅 언어다.
JS처럼 특정 속성의 값을 변수로 선언해서 선언된 변수를 필요한 곳에 적용할 수도 있고 반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해준다.
=> SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 역할을 한다.
=> 그러나 'CSS의 구조화'를 해결해 주는 장점보다 다른 문제들을 야기하기 시작했다.
(스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만들어 내는 것에만 의지하여 CSS의 용량은 엄청 커지게 되었다.)
BEM, OOCSS, SMACSS
CSS 전처리기의 문제를 보완하기 위한 다양한 방법론들이다.
각각의 장단점이 존재하나 세 개의 방법론은 공통된 지향점이 있다.
-코드의 재사용
-코드의 간결화(유지/보수를 쉽게 하는 것)
-코드의 확장성
-코드의 예측성 (Class 명으로 의미를 예측하는 것)
BEM
클래스 명을 Block, Element, Modifier로 구분해 작성하는 방법이다.(이 세 가지 각각은 -와 _로 구분한다.)
클래스 명은 BEM 방식의 이름을 여러 번 재사용할 수 있도록 한다.
=> HTML, CSS, SASS 파일에서 일관된 코딩 구조를 만들어준다.
=> 하지만 이러한 방법론들에서도 문제점이 있다.
- 클래스명 선택자가 장황해지고 그에 따라 마크업이 불필요하게 커졌다.
=> 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 한다.
또한 로직 상에 캡슐화(객체의 속성과 행위를 하나로 만들어 실제로 구현한 내용 일부를 외부에 감추는 것)의 개념이 없다.
CSS-in-JS
CSS를 컴포넌트 영역으로 불러와서 컴포넌트 단위의 개발을 가능하게 하는 개념이다.
Styled-Component
CSS-In-JS를 가능케 해주는 대표적인 툴
기능적인 컴포넌트나 상태를 지닌 컴포넌트에서 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공한다.
| 특징 | 장점 | 단점 | |
| CSS | 가장 기본적인 스타일링 방법 | - | 일관된 패턴을 갖기 어려움 |
| SASS (preprcessor) |
프로그래밍 방법론을 도입해 컴파일된 CSS를 만들어주는 전처리기 |
변수/함수/상속 개념을 활용해 코드를 재사용할 수 있음 CSS 구조화 |
저처리 과정이 필요 디버깅의 어려움 컴파일한 CSS의 비대화 |
| BEM | CSS 클래스 명 작성에 일관성있는 패턴을 강제하는 방법 | 네이밍으로 문제 해결 저처리 과정이 불필요 |
선택자의 이름이 장황해짐 클래스 목록이 너무 많아짐 |
| Styled-Component (CSS-in-JS) |
컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리 | CSS 컴포넌트 안으로 캡슐화 네이밍이나 최적화를 신경 쓸필요 없음 |
빠른 페이지 로드에 불리 |