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를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없음
- 단점 : 빠른 페이지 로드에 불리함
- Automatic critical CSS
컴포넌트에 대한 스타일을 자동으로 삽입 - No class name bugs
스스로 유니크한 className 을 생성 - Easier deletion of CSS
컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제 - Simple dynamic styling
React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여 (간단,직관) - Painless maintenance
유지보수가 어렵지 않다 - Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다
