CDD, CSS-in-JS

dano·2022년 3월 28일
0

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

c. Features of CSS-in-JS

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

d. CDD & Atomic Design

e. 프로젝트 적용방법

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

f. 장단점 및 느낀점

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

0개의 댓글