01. CDD
🔨 1. Component Driven Development(CDD)
- 레고처럼 조립할 수 있는 부품단위로 UI 컴포넌트를 만드는 개발 방법을 말한다.
- 재사용할 수 있는 UI 컴포넌트로 → 프로젝트/팀간 같은 UI 컴포넌트 공유가 가능하다.
- 컴포넌트 단위로 만들어 → 페이지를 조립하는 상향식 개발 방식이다.
02. CSS in JS
🔨 1. 구조적인 CSS가 필요하게 된 이유
- 프로젝트 규모나 복잡도가 점점 더 커지고, 같이 작업할 팀원의 수도 많아지면서 → 일관된 CSS 작성방법의 필요가 대두되었다.
🔨 2. CSS 구조화를 위한 다양한 시도
- CSS 방법론의 공통 지향점
- 코드의 재사용
- 코드의 간결화(유지보수 용이)
- 코드의 확장성
- 코드의 예측성(클래스 명으로 의미 예측)
🔧 2-1. CSS 진처리기(CSS Preprocessor)
-
CSS가 구조적으로 작성될 수 있게 도움을 주는 도구를 말한다.
-
하지만 CSS 진처리기만으론 웹 서버가 인식하지 못하기 때문에 → 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고,
→ 이렇게 컴파일하면 실제 우리가 사용하는 CSS 문서로 변환된다.
-
CSS 진처리기로 인해 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생겼다.
🔧 2-2. SASS(Syntactically Awesome Style Sheets)
-
SASS는 CSS 전처리기 중 가장 유명하며, CSS를 확장해주는 스트립팅 언어이다.
-
즉 SASS는 CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성(color, margin 등)의 값(#ffff, 10px 등)을 변수로 선언해
→ 필요한 곳에 선언된 변수를 적용하거나
→ 반복되는 코드를 한번의 선언으로 여러 곳에 재사용할 수 있다
-
결국 SASS는 SCSS 코드를 읽어 전처리 한 후 → 컴파일하여 → 전역 CSS 번들 파일을 만들어주는 전처리기 역할을 한다.
However,
-
SASS를 통한 전처리기는 전처리기가 내부에서 어떤 작업을 하는지 알지 못하고,
-
단순히 스타일이 겹치는 문제를 해결하기 위해 계층 구조를 만드는 것에 의존하게 되었다.
⇒ 그 결과, 컴파일된 CSS의 용량이 너무 커진다는 문제점이 발생하였다.
**# CSS 사용 예졔**
.alert {
border : 1px solid rgba(104, 40, 103, 0.88);
}
.button {
color : rgba(104, 40, 103, 0.88);
}
**#SASS 변수 사용 예제**
*반복되는 CSS코드는 변수를 활용해 재사용하고, 변수 선언은 $기호를 활용한다.
$base-color : rgba(104, 40, 103, 0.88);
****.alert {
border : 1px solid $border-dark;
}
.button {
color : $border-dark;
}
🔧 2-3. BEM(Block, Element, Modifier)
Block,Element,Modifier로 구분해 클래스를 작성하는 방법으로,Block,Element,Modifier은 각각—와__로 구분한다.
However,
-
클래스스명 선택자가 장황해지고 + 클래스명이 길어 → 마크업이 불필요하게 커지며 + 재사용할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야 하는 문제점이 발생하였다.
-
SASS와 마찬가지로 BEM도 진정한 캡슐화를 이루지 못해 개발자들이 클래스명에 의존할 수 밖에 없었다.
※ 캡슐화 : 객체의 속성과 행위를 하나로 묶어 → 구현 내용 일부를 외부에 감춰 은닉하는 개념
🔨 2-1. CSS in JS의 등장
“Styled-Component”
- Styled-Component는 CSS-in-JS의 대표적 사례이다.
개발 방향이 APP으로 진화하며 → 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.
하지만 CSS는 여전히 컴포넌트를 기반으로 한 방식이 없었기에 → CSS도 컴포넌트화 하기 위해
⇒ CSS-in-JS가 탄생하게 되었고, 이문제를 해결하게 된다.
-
Styled-Component는
기능적혹은상태를 가진 컴포넌트로부터 → UI를 완전히 분리해⇒ 사용할 수 있는 아주 단순한 패턴을 제공한다.
import styled from "styled-comonents";
const Input = styled.input`
width : 100px;
margin : 1rem;
`;
const Button = styled.button`
width : 50px;
height : 20px;
margin : 1 rem;
`;
export default function Form() {
return (
<>
<Input />
<Button>click</Button>
</>
);
}