CDD (Component Driven Development)
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행 할 수 있습니다.
Storybook
CDD를 지원하는 도구 중 하나가 Component Explorer입니다. UI 개발도구가 다양하게 있고 그 중 하나가 Storybook 입니다.
각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있습니다. 전체 UI를 한눈에 보고 개발할 수 있습니다.
Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있습니다. (버그를 사전에 방지할 수 있도록 도와줍니다.)
테스트 및 개발 속도를 향상시키는 장점이 있으며, 의존성을 걱정하지 않고 빌드할 수 있습니다.
Storybook 설치 및 세팅법
# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
# Install dependencies
yarnCSS의 발전
인터넷의 발전으로 CSS 작성방식도 꾸준히 진화하고 있습니다.
프로젝트 규모나 복잡도가 커지고 다양한 디바이스(모바일, 태블릿 등) 출시됨에 따라 CSS는 더 복잡해지게 됩니다.
따라서 CSS 작업을 효율적으로 하기 위해 구조화된 CSS 필요성이 대두되었고, 구조화하는 방법에 대한 연구가 필요했습니다.
SASS (Syntactically Awesome Style Sheets)
CSS를 확장해 주는 스크립팅 언어입니다.
반복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 기능을 가졌습니다. 그래서 SASS는 SCSS코드를 읽어 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기의 역할을 합니다.
하지만 용량이 커지는 단점을 가지고 있습니다.
문제를 보완하기 위해 방법론이 대두됩니다.
- 코드의 재사용
- 코드의 간결화 (유지보수 용이)
- 코드의 확장성
- 코드의 예측성 (클래스 명으로 예측)
이런 CSS 방법론들은 같이 일하는 팀 동료들의 팀워크와도 연결되기 때문에 여러 팀원이 함께 작업하는 상황에서 CSS 작성에 있어 방법들을 규칙으로 정해두는 것이 매우 중요한 요소입니다.
방법론도 문제가 있었습니다...
클래스명이 길어지고 재사용하려고 할 때 마다 모든 UI 컴포넌트를 명시적으로 확장해야 했습니다.
모든 문제를 해결한 Styled-Component의 등장
Styled-Component는 기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공합니다.
요약
-
CSS
특징 : 기본적인 스타일링
장점 : ...?
단점 : 일관된 패턴을 갖기 어렵다. -
SASS
특징: 프로그래밍 방법론을 도입하여, 컴파일된 CSS를 만들어내는 전처리기
장점: 변수/함수/상속 개념을 활용하여 재사용 가능
단점: 디버깅의 어려움, 용량이 커짐 -
BEM
특징: CSS 클래스명 작성에 일관된 패턴을 강제한는 방법론
장점: 네이밍으로 문제 해결, 전처리 과정 불필요
단점: 클래스 이름이 많아지면 정신 없어짐.. -
Styled-Component
특징: 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리
장점: CSS를 컴포넌트 안으로 캡슐화, 네이밍이나 최적화를 신경 쓸 필요가 없다.
단점: 빠른 페이지 로드에 불리하다.
