CDD(Component Driven Development), CSS-in-JS

a. CSS-in-JS

• JavaScript코드에서 CSS를 작성하는 방식
• 2014년 Facebook 개발자인 Christopher Chedeau aka Vjeux에 의해 개념제시
• Styled-components, Styled-jsx, emotion, jss 등
• Material UI의 style-engine
  

b. CSS-in-CSS vs CSS-in-JS

• CSS Module(sass, less 등)의 문제점

  • CSS 의존성 관리
  • 미사용 코드 검출
  • CSS와 JS간의 상태공유
  • Classname 관리

• CSS-in-JS의 등장

  • 개별 css 모듈이 아닌 JS 파일 안에 style 작성
  • Class indicator가 아닌 컴포넌트 방식으로 style 작성
  • Style에 prop을 통한 상태전달

• Styled-component Code example

  • https://codesandbox.io/s/brave-cdn-ygpwd1?file=/src/StyledComponentExample/ColoredLabelStyled.tsx

c. Features of CSS-in-JS

• Prop을 통한 상태관리
• Theming
• Styled의 JS 함수화 및 변수화

d. CDD & Atomic Design

• Atomic Design Pattern( https://bradfrost.com/blog/post/atomic-web-design/ )
  
• Compoent Drive Development
  • Bottom-up으로 가장 작은 컴포넌트부터 개발하는 방법론
  • Storybook 등의 라이브러리 사용

e. 프로젝트 적용방법

• Figma 디자인에서 공통적인 컴포넌트 추출
• Atom->Molecule->Module 3단계
• Atom, Molecule 개발
• Page 개발 중 분할이 필요한 Component를 Module로 개발

f. 장단점 및 느낀점

• 컴포넌트의 개발이 끝나면 이후 개발이 수월해진다.
• 필요할 때마다 공통 컴포넌트 개발을 진행할 수 있다.
• 개발자간 의사소통 및 분업화가 편해진다.
• CSS에 대한 지식 필수 ( 퍼블리셔 외주 어려움 )
• 디자인 단계부터 디자인 시스템을 가지고 진행된다면 더 효율적으로 진행가능
• 초반 산출물이 잘 나오지 않는다.