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

1. 컴포넌트

- 전체의 부분
여기서는 비행기로 예를 들었다.
비행기에 각 부분들이 나누어서 설계가 되지 않고
하나의 덩어리로 이루어지게 된다면 어떻게 될까?

- 컴포넌트가 없다면? 
  높은 의존성  - 반복 X
                       - 재사용X
                       - 규모가 큰 설계X

2. 프론트엔드 컴포넌트

- 과거의 웹사이트는 HTML페이만으로 구성되어있었음
   => 유저의 액션에 대해 매번 새로운 HTML페이지를 서버에 내려주어야 했음
   => 페이지의 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 한다는 점에서 비효율적이였음
   => ex) 과거 네이버 anchor와 table 태그 위주로 구성되어 있었음 == 정적인 페이지

- 1990년대 후반에 AJAX가 등장하면서 웹의 변화가 시작 됨 
   => 필요한 데이터만을 전달받고, 화면에 일부분만 다시 그려줄 수 있게 되면서  웹의 성격이 

        점점 동적으로 바뀌게 됨

- 자바스크립트를 통해 사용자와 인터랙션을 늘려나갈 수 있게되면서 웹은 복잡도가 높아지기 시작함

- 복잡한 웹을 작게 나누면 전체 페이지에 대한 문제는 작은 element그룹에 대한 문제로 바뀌게 됨
   => JavaScript를 통해 element 그룹을 효율적으로 관리할 수 있음

-  즉 프론트엔드 컴포넌트는 element group을 반환하는 JavaScript 함수라고 말 할 수 있음

3. 컴포넌트 분리

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

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

각 원자들은 고유한 특성을 가지고 있기 때문에 서로 조합하여 더 넓은 방식으로 사용할 수 있음
ex) 검색창을 구성하는 form, input, button 태그와 같은 HTML tag들이 원자에 해당됨
 

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

어떤 목적과 기능도 가지지 않았던 form, input, button 들이 결합하여 검색을 하기 위한 UI 컴포넌트가 됨
이 검색창은 검색에 대한 책임을 갖게되고, 다른 곳에서 재사용 될 수 있음

 

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

특정 영역을 차지하는 기준에 따라 조합할 수 있음

ex) 메인로고와 검색창, 내 정보보기 버튼들이 존재하는 헤더영역을 유기체로 구성할 수 있음

 

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

 

5) PAGES(페이지) : 실제 데이터가 Templates에 전달되면 페이지가 완성됨

- Atomic Design의 단점

- 원자요소에는 태그들 뿐만 아니라 스타일 요소들도 포함될 수 있는데, 
원자들이 결합되어도 반드시 분자가 되는 것은 아닐 수도 있음

- 또한 각 계층으로 어떤 요소들을 분리해야할지 기준이 모호함

 

- 그리고 계층을 5단계로 구성하려다 보면
많은 시간이 소요될 수 있고 5단계나 되는 계층 때문에 

원자 요소 하나의 변화가 끼치는 사이드 이펙트가 커지게됨

 

- 또 화학적 비유가 적용되지 않은 Template 와 Page 단계는 재사용되기 어렵다는 점도 있음

1) 기준
2) 사이드 이펙트
3) 소요시간
4) 재사용성

 

하지만 아토믹 디자인이 컴포넌트 분리 기준에 대해 생각해 볼 수 있게 해주는

좋은 인사이드를 제공한다고 생각함

4. 디자인 시스템

여러 프로젝트에서 동일한 컴포넌트를 구현하려면 기존의 코드를 찾아오거나, 새로 구현해야함
이 과정에서 기존과 동작이나 기능이 달라질 수도 있다는 문제가 발생할 수 있음
그렇기 때문에 디자인 시스템을 사용하는 것

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

        ex) 마이크로소프트의 fluent ui

==>   인풋, 버튼 등등 많은 컴포넌트들을 관리하고 있음
         속성들과 테마에 대한 사용법이 문서에 기록되어 있고
         버전관리가 꾸준하게 이루어지고 있음
         또한 색상, 아이콘, 레이아웃 등등의 스타일도 제공하고 있는 것을 확인할 수 있음
         이러한 스타일을 컴포넌트와 조합하여 다양한 인터페이스를 고객에게 제공할 수 있음

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

- 일관된 경험 : 여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스를 제공할 수 있음

 

- 지속성 : 디자인 시스템이 없다면 기존에 만들어 온 프로덕트에서 수정할 인터페이스들을 

                  모두 찾아 직접 변경해야 하지만 
                  디자인 시스템을 통해 컴포넌트들을 통합적으로 관리해줄 수 있음

 

 

Component, html, 개발자한걸음, 웹, 웹개발, 컴포넌트

 

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