컴포넌트 / UI의 중요성

컴포넌트는 무엇일까?

• Component
• Web Component
• React Component

웹 컴포넌트?
웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음

웹에서 컴포넌트가 생긴 이유는..?

프론트엔드가 꼭 알아야 할 32가지 UI 요소

Headless UI

Zag.js

headless ui란?
다이얼로그를 위한 최소한의 기능만 제공하고 나머지는 유저가 알아서!(ex. 스타일 커스텀)

contenteditable 속성: 어떤 태그에라도 contenteditable="true" 를 넣으면 텍스트 에디터로 만들어준다.

---

컴포넌트가 담당하고 있는 역할이 굉장히 많은데, 짧게 추리자면
1. 상태
2. 유저와의 인터렉션
3. UI와 관련되는 부분

컴포넌트를 정의할 때 이렇게 강하게 결속되어있는 부분을 분리해서 재사용성을 좋게 만드는 방법이다.
이 중에 상태와 인터렉션을 분리하여 UI 관련된 내용만 담아서 컴포넌트의 재사용성을 늘려준 컴포넌트를 headless component라고 생각하면 될 것 같다.

Editable docs
컴포넌트 패턴
https://kentcdodds.com/blog
https://overreacted.io/

컴포넌트 네이밍 할 때 도메인으로 네이밍하지말고 생김새로 네이밍해라!
(ex. SquareBox)

MFA(Micro Frontend Architecture)란?
한 웹서비스를 여러 프레임워크로 개발하는 것(?)