[youtube 영상 정리]컴포넌트

(2) [10분 테코톡] 🎁 브랜의 프론트엔드에서 Component란 - YouTube

프론트엔드에서 컴포넌트란
1.컴포넌트
'전체의 부분'
소프트웨어 개발을 마치 레고 블록을 쌓듯이 쉽게 할 수 있도록 하는 기술
구성단위를 미리 만든 뒤 필요한 응용 기술을 개발할 때 이 모듈을 조립하는 기술

2.프론트엔드의 컴포넌트
element group을 반환하는 JavaScript 함수

3.컴포넌트 분리
Atomic Design
화학적 개념을 이용하여 컴포넌트를 분리하는 방법론
원자(각종 태그)->분자(컴포넌트)->유기체(헤더영역)->템플릿(레이아웃)

단점
분리 기준이 모호하다.
소요시간이 많다.
사이드 이펙트가 크다.
재사용이 어렵다.

4.디자인 시스템
컴포넌트와 스타일을 관리하는 시스템

디자인 시스템의 이점
옵션등의 제약을 통해 디자인 시스템을 이용하는 사람이 올바른 방식으로 컴포넌트를 사용할 수 있도록 안내
여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스를 제공
컴포넌트들을 통합적으로 관리