[Unit3]Custom Componnet - CDD

CDD (Component Driven Development)

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

CSS in JS

< 구조화된 CSS가 필요하게 된 이유 >
➡️ CSS 작업을 효율적으로 하기 위해 구조화된 CSS 필요성이 대두되었고, 구조화하는 방법에 대한 연구도 필요해졌다.


< CSS 구조화를 위한 다양한 시도 > - CSS 전처리기 등장
CSS 전처리기 : CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

• 단점 : CSS 전처리기 자체만으로는 웹서버가 인지하지 못해 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 우리가 사용하는 CSS문서로 변환된다.
  
  < CSS 구조화를 위한 다양한 시도 > - SASS
  CSS 전처리기의 종류 중 하나인 SASS(Syntactically Awesome Style Sheets)는 CSS를 확장해 주는 스크립팅 언어이다.
• CSS를 만들어주는 언어로서 js처럼 특정 속성의 값을 변수로 선언하고 필요한 곳에 적용하거나 반복되는 코드를 한 번의 선언으로 여러 곳에 재사용할 수 있게 해주는 기능을 가진다.
  SCSS 코드를 읽어서 전처리하고 컴파일해 전역 CSS 번들 파일을 만들어주는 전처리기의 역할을 한다
  하지만 장점보다 다른문제들이 더 많았고 결국 전처리기가 내부에서 어떤 작업을 하는지 알지못한채 단순히 계층구조를 만들어내는 것에 의지하게 되었고 그로인해 CSS의 용량은 점점 더 커지게 되었다.
  
  < CSS 구조화를 위한 다양한 시도 > - CSS 방법론
  
  세 방법론의 공통 지향점
• 코드의 재사용
• 코드의 간결화(유지 보수 용이)
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미 예측)
  
  < CSS 구조화를 위한 다양한 시도 > - BEM
  BEM
  Block, Element, Modifier로 구분해 클래스명을 작성하는 방법
  각각 -와_로 구분한다.
• 장점 : 클래스명은 BEM방식의 이름을 여러 번 반복해서 재사용할 수 있고 일관된 코딩 구조를 만들어 준다.
• 단점 : 클래스명 선택자가 장황해지고, 긴클래스명때문에 마크업이 커지며, 재사용할때도 모든 UI컴포넌트를 명시적으로 확장해야 했고, 캡슐화의 개념이 없다.
  
  < CSS 구조화를 위한 다양한 시도 > - CSS-in-JS의 등장
  결국 CSS도 컴포넌트 영역으로 불러 들이기 위해 CSS-in-JS가 탄생하게 되었다.
  Styeld-Component
  styled-Component는 기능적, 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.
  
  CSS 방법론들의 특징, 장단점

---

출처, 참조 : codestates