프론트엔드
프레임워크에 구애받지 않는 통합 백오피스 구축하기
두줄요약
React, Vue, JSP가 섞인 백오피스에서 공통 화면을 웹 컴포넌트로 통합한 사례를 소개했습니다. 부모 시스템의 인증과 자원을 공유하면서도 CDN 독립 배포와 스타일 격리를 구현했습니다.
문제 상황
- React, Vue, JSP 등 서로 다른 프레임워크의 백오피스에서 동일한 화면을 여러 번 중복 개발해야 하는 비효율
- iframe은 Cross-Origin 및 세션 공유 한계로 로그인 지옥을 유발하고, 시스템 마이그레이션은 대규모 재작성 부담이 큼
원인 분석
- 프레임워크별로 화면과 로직이 분리되어 공통 UI를 한 번에 재사용하기 어려운 구조
- 레거시와 모던 환경을 함께 운영해야 해 통합 방식에 보안과 독립 배포 요건이 동시에 필요함
해결 방법
- Vue의 defineCustomElement로 웹 컴포넌트를 만들고, 모노레포에서 공통 메뉴를 관리한 뒤 CDN/S3로 서빙
- Shadow DOM에 스타일을 주입하고 커스텀 훅으로 로딩 상태와 스타일 적용 순서를 제어
- 인증 정보는 부모 시스템이 런타임에 주입해 쿠키, API 인스턴스, 토큰 방식 모두 유연하게 대응