핵심 요약
인프랩이 MFE 환경에서 공통 헤더를 런타임 로딩으로 개편해 이중 관리와 배포 복잡성을 줄이고, 헤더를 독립적으로 업데이트하는 기반을 마련했습니다.
구현 방법
- Module Federation 기반 런타임 로딩으로 헤더를 독립 배포
- App Shell과 Antman 간 어댑터 모듈 도입, Vite로 Antman 엔트리 구성
- 스타일 충돌 방지: emotion으로 난수 클래스명 생성 및 격리
- 레이아웃 안정성 확보: MutationObserver로 로드 시점 감지 및 placeholder 제거
- 스켈레톤: data 속성과 쿠키 스냅샷으로 SSR 없이 노출 제어
- 경로별 검색바 표시 및 모션: HTML data 속성과 CSS 변수로 제어
주요 결과
- 런타임 반영으로 배포 DX 및 유지보수 효율 개선
- 스켈레톤으로 초기 로딩의 깜빡임 감소와 레이아웃 안정성 향상
- 경로별 검색바 노출 및 스크롤 모션으로 UX 개선
- 단일 앱쉘 관리로 운영 효율 증가
