핵심 요약
인프랩은 Shadow DOM과 react-shadow를 활용해 기존 Bulma 기반 글로벌 스타일에서 신규 React 앱을 격리하고, 스타일 태그 이동과 포탈 타깃 재설정까지 구현해 스타일 충돌을 해소했습니다.
구현 방법
- Shadow host로 shadow root를 생성하고 React 앱은 내부에 렌더링되도록 구성했습니다.
- emotion cache를 shadow DOM 내부 컨테이너로 연결하기 위해 createEmotionCache와 CacheProvider를 사용했습니다.
- 포털의 타깃을 shadow-root로 설정하고, 스타일 시트를 shadow DOM 안으로 주입해 충돌을 방지했습니다.
주요 결과
- 전역 스타일의 간섭 없이 신규 앱이 안정적으로 렌더링됩니다.
- shadow DOM으로 스타일이 격리되어 유지보수성과 예측성이 향상되었습니다.
- 포털 기반 컴포넌트가 shadow DOM 환경에서 정상 동작합니다.
