[ 동영상 시청 ] 프론트엔드에서 Component란?

참고 동영상 

https://www.youtube.com/watch?v=2C1tXVHu9XQ

---

컴포넌트의 의미 

전체의 부분 

 

프론트엔드의 컴포넌트란? 

과거의 웹 -  비교적 단순하기 때문에 컴포넌트라는 개념이 중요하지 않았음.   

오늘날 웹 - 90년대 후반에 AJAX가 등장하면서 웹의 대변화 가 시작 됨. 웹이 점점 동적으로 변해감.

                  복잡한 웹을 작게 나누게됨 

 

컴포넌트 분리하는 법 

Atomic Design : 화학적 개념을 이용하여 컴포넌트를 분리하는 방법론 중 하나 

총 5단계 

ATOMS(원자) : 인터페이스를 구성하는 최소단위의 블록 

-> 검색창을 구성하는 form, input, button 태그와 같은 HTML tag들이 원자에 해당됨 

MOLECULES(분자) : 원자들을 하나의 단위로 동작시키는 UI 컴포넌트 

ORGANISMS(유기체) : 유기체는 하나 이상의 책임을 갖거나 반복적인 원자, 분자 조합 

TEMPLATES(템플릿) : 원자, 분자, 유기체 단계의 컴포넌트를 배치하는 레이아웃

PAGES(페이지) : 실제데이터가 TEMPLATES에 전달되면 페이지가 완성! 

 

Atomic Design의 단점 

기준이 모호함 

많은 시간이 소요되고 5단계나되는 계층 때문에 원자 요소 하나의 변화가 끼치는 사이드 이펙트가 커지게 됨 

화학적 비유가 적용되지 않은 TEMPLATE과 PAGE 단계는 재사용이 어려움 

 

디자인 시스템 

컴포넌트와 스타일을 관리하는 시스템 

디자인 시스템의 이점 

옵션등의 제약을 통해 디자인 시스템을 이용하는 사람이 올바른 방식으로 컴포넌트를 사용할 수 있도록 안내해줌

여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스 제공이 가능함