dano.log
로그인
dano.log
로그인
CDD, CSS-in-JS
Dano
·
2022년 3월 28일
팔로우
0
CSS in JS
cdd
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
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에 대한 지식 필수 ( 퍼블리셔 외주 어려움 )
디자인 단계부터 디자인 시스템을 가지고 진행된다면 더 효율적으로 진행가능
초반 산출물이 잘 나오지 않는다.
Dano
.
팔로우
다음 포스트
Next JS
0개의 댓글
댓글 작성