Custom Component ⇒ CDD

moono·2023년 2월 19일

목록 보기

7/12

CDD(Component-Drive Development)

디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있음
CDD 방식은 컴포넌트 단위로 만들어 페이지를 조립하는 방식으로 상향식 개발 에 가깝다
⇒ 컴포넌트 생성, 컴포넌트 결합, 페이지 조립
⇒ 예시 : BBC , UN

프로젝트의 규모와 복잡도가 점점 커지면서 팀원 수가 증가하고,
모바일이나 태블릿 등 다양한 디바이스가 등장하면서 구조화된 CSS가 필요하게 되었다.
⇒ CSS 발전 순서도 : CSS → SASS → BEM → CSS Modules → Styled Components

🏁 CSS 전처리기(CSS Preprocessor)

CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
반복적인 작업이나, 클래스의 상속과 같은 사항으로 CSS 문서 양이 많아지는데
⇒ 이러한 문제점을 프로그래밍 개념(변수, 함수, 상속 등)을 활용해 해결

CSS 전처리기 만으로 웹 서버가 인지하기 못하기 때문에 각 CSS 전처리기에 맞는 컴파일러를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환
⇒ 이를 통해 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생겼다.

➰ 대표적인 CSS 전처리기 SASS(Syntactically Awesome Style Sheets)

CSS 전처리기 중 가장 유명한 SASS는 CSS를 확장해주는 스크립팅 언어이다.

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}
.button {
  color: rgba(198, 83, 140, 0.88);
}

$base-color: rgba(198, 83, 140, 0.88);
.alert {
  border: 1px solid $base-color;
}
.button {
  color: $base-color;
}

장점 : 자바스크립트처럼 특정 속성을 변수로 선언 해 필요한 곳에 선언된 변수를 적용할 수 있고, 반복되는 코드를 여러 곳에서 재사용할 수 있도록 해주는 기능 ⇒ CSS 의 구조화
⇒ SASS 는 SCSS 코드를 읽어서 전처리한 다음에 컴파일해서 전역 CSS 번들 파일을 만들어주는 전처리기 역할을 함
단점 : 전처리기 내부에서 어떤 작업을 하는지 알지 못하고 단순히 계층 구조를 만들어 내는 것에 의지해 컴파일된 CSS의 용량이 어마어마하게 커짐
⇒ 언어 로직상에 진정한 캡슐화 개념이 없다 ⇒ 유일한 클래스명을 서택하는 것에 으존할 수 밖에 없음

캡슐화(encapsulation): 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념

🏁 CSS 방법론

CSS 전처리기의 문제 보완하기 위한 BEM, OOCSS, SMACSS 같은 CSS 방법론
각각 장단점이 있지만 같은 지향점을 가지고 있다.
⇒ 코드의 재사용성 , 코드의 간결화(쉬운 유지보수) , 코드의 확장 가능성 , 클래스명으로 의미를 예측

➰ 대표적인 CSS 방법론 BEM(Block, Element, Modifier)

대표적인 방법론 BEM은 Block, Element, Modifier 로 구분해 클래스명을 작성한다.
.header__navigation--navi-text {
  color: red;
}
/* -- 와 __ 로 구분한다. */
Block : 전체를 감싸고 있는 블럭 요소 ⇒ header
Element : 블럭이 포함하고 있는 한 조각 ⇒ navigation
Modifier : 블럭 또는 요소의 속성(블럭이나 엘리먼트의 외관이나 상태를 변화가능하게 하는 부분) ⇒ navi-text

장점 : 이러한 클래스명은 BEM 방식의 이름을 여러 번 반복해 재사용할 수 있도록 해 HTML, CSS, SASS 파일에서 더 일관된 코딩 구조를 만들어줌
⇒ 네이밍으로 문제 해결, 전처리 과정 불필요
단점 : 클래스 선택자가 장황해지고, 마크업이 불필요하게 커지면서 재사용하려 할 때 마다 모든 UI 컴포넌트를 명시적으로 확장해야만 함
⇒ 언어 로직상에 진정한 캡슐화 개념이 없다 ⇒ 유일한 클래스명을 서택하는 것에 으존할 수 밖에 없음