1. 핵심 목표

단일 페이지 애플리케이션(SPA) 내 Iframe 통합 시 발생하는 재로딩 문제와 상태 유실을 해결하는 고성능 솔루션을 제시합니다. 주요 목표는 Iframe의 지속적 활성화, 밀리초 단위 전환, 안정적인 크로스 시스템 통신 구현입니다.

2. 아키텍처 설계

2.1 레이아웃 분리 전략

기존 라우터 뷰 방식을 대체하는 계층적 접근법:

• 표시 영역: Iframe 컨테이너를 최상위 App.vue에 배치하여 라우터 변경 시 제거 방지
• 제어 계층: DOM 삭제(v-if) 대신 CSS 기반 표시 제어(v-show) 적용
• 통신 계층: 이벤트 버스 패턴으로 컴포넌트 간 결합도 감소

2.2 상태 동기화 절차

1. 사용자 경로 변경 감지
2. Iframe 대상 여부 확인
3. 초기화되지 않았을 경우 Iframe 인스턴스 생성 및 이벤트 바인딩
4. 기존 인스턴스 존재 시 테마/언어/인증 상태 재동기화

3. 핵심 구현 기술

3.1 지속적 활성화 기법

• 최상위 컴포넌트에 Iframe 고정 배치
• 표시 상태 제어:
  • 활성화 시 z-index 최우선 적용
  • 비활성화 시 display:none으로 렌더링 일시 중단
• 초기화 시점: requestIdleCallback 활용 지연 로딩

3.2 이벤트 버스 통신

Iframe 인스턴스 직접 참조 대신 발신-수신 분리:

// 이벤트 관리 훅
import { onUnmounted } from 'vue';
import mitt from 'mitt';

const 이벤트발생기 = mitt();

export function use이벤트버스() {
  const 등록 = (이벤트명, 핸들러) => {
    이벤트발생기.on(이벤트명, 핸들러);
    onUnmounted(() => 이벤트발생기.off(이벤트명, 핸들러));
  };
  return { 발신: 이벤트발생기.emit, 등록 };
}

3.3 상태 복구 메커니즘

1. v-show 상태 변화 감지
2. offsetHeight 강제 계산으로 렌더링 재개
3. 현재 테마/언어/인증 토큰 재전송

4. 오류 방지 전략

4.1 참조 유실 방지

• 전역 변수에 Iframe 제어기 노출 금지
• markRaw()로 Vue 반응성 시스템 배제
• 메시지 전송 전 필수 null 체크

4.2 크로스 오리진 검증

function get대상오리진() {
  if (process.env.NODE_ENV === 'development') 
    return ['http://localhost:3000', 'https://test-domain.com'];
  return window.location.origin;
}

4.3 리소스 최적화

• 활성 상태: 실시간 상태 업데이트
• 비활성 상태: 변경 플래그(dirty flag) 설정 후 복구 시 동기화

4.4 메모리 관리

1. 이벤트 리스너 해제
2. 내부 제어기 파괴 메서드 실행
3. DOM 노드 제거
4. 참조 변수 초기화

5. Iframe 컨테이너 구현

<script setup>
import { markRaw, watch } from 'vue';
import { use이벤트버스 } from '@/hooks/useEventBus';

let 프레임제어기 = null;
const { 등록, 발신 } = use이벤트버스();

const 상태동기화실행 = () => {
  if (!프레임제어기) return;
  프레임제어기.자식전환('MAIN');
  프레임제어기.전송({ 유형: '테마', 데이터: 현재테마 }, 'MAIN');
};

등록('글로벌-테마-변경', () => {
  if (프레임제어기) 상태동기화실행();
});

watch(() => Iframe표시상태, (표시중) => {
  if (표시중 && 프레임제어기) {
    console.log('상태 재동기화 시작');
    상태동기화실행();
  }
});
</script>