TIL_ CDD / CSS in JS

해달·2021년 8월 9일

TIL

목록 보기

28/80

Today 공부

CCD
Stroybook
CSS in JS

CDD(Component-Driven Development

부품 단위로 UI 컴포넌트를 만들어 나가는 개발

Stroybook (UI 개발도구)

Component Explorer (컴포넌트 탐색기)에는 많은 UI 개발도구가 다양하게 있으며 Storybook은 그 중 하나다
즉, Component Driven Development를 하기 위한 도구다

각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다.
1) 복잡한 개발 스택 시작 시
2) 특정데이터를 DB로 강제이동할 시
3) 애플리케이션 탐색필요 X
전체 UI를 한눈에 보고 개발

재사용성을 확대하기 위해 컴포넌트를 문서화 한다

자동으로 컴포넌트를 시각화 하여 시물레이션 할 수 있는 다양한 테스트상태를 확인 할 수 있다.

이를통해 버그 사전 방지

테스트 및 개발속도 향상(장점)

애플리케이션 또한 의존성을 걱정하지 않고 빌드 가능 (장점)

독립적인 개발환경에서 실행되기 때문에
애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발 할 수 있습니다

Storybook에서 지원하는 주요 기능은 다음과 같습니다.

UI 컴포넌트들을 카탈로그 화하기

컴포넌트 변화를 Stories로 저장하기

핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기

리액트를 포함한 다양한 뷰 레이어 지원하기

CSS in JS

CSS 전처리기 (CSS Preprocessor)

CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에
각 CSS 전처리기에 맞는 Compiler를 사용해야 하고
컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 됩니다.

SASS
CSS를 확장해 주는 스크립팅 언어

CSS방법론의 공통 지향점

코드의 재사용

코드의 간결화(유지보수 용이)

코드의 확장성

코드의 예측성(클래스 명으로 의미 예측)

CSS in JS

CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생

Styled-Component

CSS-in-JS에는 대표적으로 Styled-Component가 있다

특징 : 컴포넌트를 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리

장점 : CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없음

단점 : 빠른 페이지 로드에 불리함