클라이언트 측 구성의 기본
아키텍처
클라이언트 측 구성은 집계 계층이 필요없습니다. 대신에 스크립트 참조를 포함한 주요한 HTML문서의 위치를알아야합니다. 이 문서를 app shell이라고 부릅니다.
•
웹 컴포넌트마다 하나의 스크립트를 갖는 것
•
마이크로 프론트엔드마다 하나의 스크립트를 갖는 것
후자가 훨씬 간단하고 더 좋은 성능을 제공합니다. 컴포넌트마다 갖게된다면 너무 복잡해질 위험이 있습니다.
장단점
장점이자 단점은 JS에 의존한다는 점입니다. 이는 성능 문제와 접근성 문제가 발생합니다.
웹 컴포넌트 살펴보기
클라이언트 측 렌더링의 중요성이 커짐에 따라 웹컴포넌트가 제안되고 표준화되었습니다.
웹 컴포넌트의 이해
웹 컴포넌트라는 용어는 여러 피처를 의미하는데 가장 중요한 피처는 아래와 같습니다.
•
DOM 트리를 캡슐화하는 새도 DOM
•
재사용 가능한 DOM 트리를 제공하는 HTML 템플릿
•
새로운 요소를 정의하는 커스텀 요소
새도우 DOM으로 스타일 격리하기
웹 컴포넌트는 shadow dom에 직접 접근할 수 있는데 여기엔 open과 closed 두가지 모드가 있습니다.
•
open은 shadowRoot 아래 트리가 변경이 자유롭고 shadowRoot 참조를 통해 액세스 할 수 있음을 의미합니다.
•
closed는 shadowRoot 아래 트리가 변경에 자유롭지 않아 생성자가 참조를 저장하지 않는 한 액세스 할 수 없습니다.
스타일 격리는 프론트엔드간에 스타일 충돌을 방지해줘 신뢰도를 높일 수 있습니다. 단 일관성을 깨트릴 수 잇기 때문에 이르 ㄹ맞추기 위해서는 추가적인 설정이 필요합니다.
동적으로 마이크로 프론트엔드 구성
마이크로 프론트엔드 레지스트리 사용
사용가능한 모든 스크립트에 대한 경로를 반환하는 방법인데, 각 사용자나 사용 사례에 맞게 조정할 수 있다는 장점이 있습니다.
하지만 잘못 명명된 사용자 지정 요소를 사용하는 등의 실수를 방지할 수 없습니다.
런타임에 마이크로 프론트엔드 업데이트하기
마이크로 프론트엔드의 특징 중 하나는 업데이트 경로를 단순화 한다는 것인데, 단일 모듈만 다시 시작할 수 있기 때문입니다. 하지만 웹 컴포넌트는 단일 기능만 실행하고 되돌릴 수 있는 방법이 없기때문에 핫 리로드 기술을 적용해 원본 참조를 유지하여 기존 클래스의 수명 주기ㅜ 메서드를 패치할 수 있습니다.