Component Driven Development (CDD)

안윤경·2022년 8월 26일

react

목록 보기

14/16

부품단위로 ul컴포넌트를 만들어 나가는 개발

레고블럭처럼 컴포넌트를 생성 -> 컴포넌트 결합 -> 페이지 조립을 할 수 있다

품질 (Quality)
독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는 지 확인 가능합니다.
내구성 (Durability)
컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있습니다. 테스트 보다 작업량이 적습니다.
속도 (Speed)
컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있습니다.
효율성 (Efficiency)
UI를 개별 컴포넌트로 분해 한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬 처리합니다.
컴포넌트 재사용이 가능하다

필요한 이유?
웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 CSS는 더 복잡해지게 되었습니다.
따라서 CSS 작업을 효율적으로 하기 위해 구조화된 CSS의 필요성이 대두되었고, CSS를 구조화하는 방법에 대한 연구가 필요해졌습니다.

css 방법론들의 특징,장단점

	특징	장점	단점
CSS	기본적인 스타일링 방법	--	일관된 패턴을 갖기 어려움,!important의남용
SASS	프로그래밍 방법론을 도입하여 컴파일된 css를 만들어내는 전처리기	변수/함수/상속개념을 활용하여 재사용 가능 /css의 구조화	전처리과정이 필요,디버깅의 어려움이 있음,컴파일한 css파일이 거대해짐
BEM	css클래스명 작성에 일관된 패턴을 강제하는 방법론	네이밍으로 문제해결, 전처리과정 불필요	선택자의 이름이 장황하고,클래스목록이 너무 많아짐
Styled-Component(CSS-in-js)	컴포넌트 기반으로 css를 작성할 수 있게 도와주는 라이브러리	css를 컴포넌트안으로 캡슐화,네이밍이나 최적화를 신경 쓸 필요가 없음	빠른 페이지 로드에 불리함

요즘은 css-in-js가 많이쓰이는 추세이다

프론트엔드 개발자 안윤경입니다