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

[10분 테코톡]
프론트엔드에서 Component란? - 브랜
https://www.youtube.com/watch?v=2C1tXVHu9XQ

1. 컴포넌트
  - 컴포넌트란?
    : A part or element of a larger whole, especially a part of a machine or vehicle.
    : 전체의 부분
   ex ) 비행기의 구성 : 동체, 꼬리, 날개 부분으로 이루어짐, 200개 정도의 주요 부품으로 구성
                               200개의 중요부품은 더 작은 부품으로 구성, 
                               >> 한 대의 비행기에 200만개 정도의 부품이 들어감
                    >> 컴포넌트라는 개념이 없다면?
                          - 비행기를 하나의 덩어리로 구상이 가능한가?
                                No...
                            - 덩어리로 비행기를 설계할 때 생기는 문제점
                                : 높은 의존성(반복 불가, 재사용 불가, 규모가 큰 설계 불가)
                                      > 매번 밑바닥부터 만들어야 하기 때문에
                                         같은 구조의 비행기를 만드는 것은 쉽지 않음
                    >> 비행기라는 복잡한 설계를 완성하기 위해
                         "비행기 설계"라는 큰 문제를 작은 문제로 나눌 필요가 있음
                               > 각 부분 분리 하여 조립한다고 하면?
                                   : 각 부분을 독립적으로 구현함으로써 효율적 설계 가능

2. 프론트엔드 컴포넌트
  - 프론트엔드 컴포넌트란?
     : 과거의 웹 사이트는 HTML 페이지만으로 구성
          > 유저의 액션에 대해 매번 새로운 HTML페이지를 서버에서 내려주어야 함
               >> 페이지 일부만 변경하고 싶어도 전체 페이지를 내려주어야 했기에 
                    굉장히 비효율적이였음 
                    ex ) 과거 네이버는 매우 정적인 페이지에 간단한 구조였음
     : 1990년대 후반, AJAX 등장
        == 웹의 대변화 시작
          >> 필요한 데이터만을 전달받고, 화면의 일부분만을 그려주기 시작
               : 웹의 성격이 점점 더 동적으로 바뀜 
                  >> 사용자의 Interaction 증가 => 웹의 복잡성 증가
     : 복잡한 웹을 작은 문제로 나누기 시작
         >> 전체 페이지에 대한 문제는 작은 element그룹에 대한 문제로 바뀜
         >> Java Script로 element 그룹을 효율적으로 관리할 수 있기 때문에
              복잡한 웹을 구성하는 프론트엔드의 컴포넌트
               == "element 그룹을 반환하는 자바스크립트 함수"라고 정의

    >> 컴포넌트를 이용하여 웹을 효율적으로 설계할 수 있게 됨

3. 컴포넌트 분리
  - Atomic design(아토믹 디자인)
    : 화학적 개념을 이용하여 컴포넌트를 분리하는 방법론 중 하나
     >> 5단계 구성
        1. 원자 : 인터페이스를 구성하는 최소단위의 블록
                    각 고유 특성 존재 => 서로 조합하여 더 넓은 방식으로 사용
                  ex ) 검색창을 구성하는 form, input, button 태그와 같은 HTML tag

        2. 분자 : 원자들을 하나의 단위로 동작시키는 UI 컴포넌트
                    어떤 목적과 기능도 가지지 않았던 버튼, 인풋, 폼들이 결합하여
                    검색을 하기 위한 UI 컴포넌트 탄생
                       >> 검색에 대한 책임을 가짐 + 다른 곳에서 재사용 가능
        
        3. 유기체 : 하나 이상의 책임을 갖거나 반복적인 원자, 분자 조합
                       특정 영역을 차지하는 기준에 따라 조합 가능
                   ex ) 메인로고, 검색창, 내 정보보기 버튼들이 존재하는 헤더영역 
                           ==> 유기체로 구성 가능

        4. 템플릿 : 원자, 분자, 유기체 단계의 컴포넌트들을 배치하는 레이아웃
        5. 페이지

    >> Atomic Design의 단점
         : 원자에는 태그들 뿐만 아니라 스타일 요소들도 포함 가능한데
           원자들이 결합하여도 분자가 되는것은 아님.
       - 기준 : 각 계층으로 어떤 요소들을 분리해야 할 지 기준이 모호
       - 사이드 이펙트 : 원자 요소 하나의 변화가 끼치는 사이드 이펙트 증가
       - 소유시간 : 5단계까지 구성 => 많은 시간 소요
       - 재사용성 : 화학적 비유가 적용되지 않은 Template와 Page 단계는 재사용되게 어려움

  >> 그럼에도 Atomic Design을 소개한 이유
       : 컴포넌트 분리 기준에 대해 생각해볼 수 있게 해주는 좋은 인사이트를 제공

4. 디자인 시스템

   - 컴포넌트 어떻게 관리할 수 있는가?
      - 버튼 
          : 배경, border, 폰트, 크기 등등 많은 스타일 존재,
           hover 되었을 때, 다크 모드가 되었을 때 등등 여러 상황에 따라 스타일이 바뀜
          : 많은 스타일 요소들을 고려하여 컴포넌트를 구현하는 것은 쉽지 않음
              >> 기존의 코드를 찾아오거나, 새로 구현
                 > 새로 구현하다 보면 기존의 동작&기능 달라질 가능성 존재 == 문제점
      >>>그걸 해결해주는 "디자인 시스템" 

  - 디자인 시스템이란?
     : 컴포넌트와 스타일을 관리하는 시스템
       ex ) Microsoft에 fluent ui
       > fluent ui에서는 인풋, 버튼 등등 많은 컴포넌트들을 관리
             : 속성들, 테마에 대한 사용법이 문서에 기록 + 버전 관리 꾸준히 진행
       > 색상, 아이콘, 레이아웃 등등의 스타일도 제공

     >> 이러한 스타일들을 컴포넌트와 조합하여 다양한 인터페이스를 고객에게 제공 가능

   - 디자인 시스템의 이점
       1. 제약 
            : 디자인 시스템을 이용하는 사람이 올바른 방식으로 컴포넌트를 사용하도록 안내
       2. 일관된 경험
            : 여러 프로덕트에서 고객에게 브랜드에 일관된 인터페이스를 제공
       3. 지속성