Vue.js 시니어 프레임워크 심화 면접

Vue 3의 Proxy는 컬렉션 타입의 내장 메서드를 추적하기 위해 별도의 instrumentation이 필요하며, Vue는 컬렉션 메서드를 재정의하여 이를 해결합니다. Private 필드는 Proxy를 통과할 때 this 바인딩 문제로 접근이 불가능하므로 markRaw나 shallowReactive로 처리해야 합니다. 서드파티 라이브러리가 Proxy를 거부하는 경우 toRaw로 원본 객체를 전달하거나, 라이브러리 인스턴스를 반응형 시스템 외부에서 관리하고 수동으로 trigger를 호출하는 패턴을 사용합니다. 대규모 시스템에서는 반응형이 필요한 데이터와 그렇지 않은 데이터를 명확히 분리하는 아키텍처 설계가 중요합니다.

커스텀 디렉티브는 DOM 조작에 집중해야 하며, 복잡한 상태 관리는 피해야 합니다. 디렉티브 내부에서 watch나 watchEffect를 사용할 때는 반드시 unmounted 훅에서 cleanup을 수행해야 메모리 누수를 방지할 수 있습니다. 순수한 DOM 조작(포커스, 애니메이션)은 디렉티브로, 재사용 가능한 로직은 Composable로, UI를 포함한 복잡한 기능은 Component로 구현하는 것이 원칙입니다. 디렉티브의 binding 값이 변경될 때마다 updated 훅이 호출되므로, 실제 변경이 필요한 경우만 DOM을 조작하도록 이전 값과 비교하는 로직을 추가해야 성능을 최적화할 수 있습니다.

Navigation Guard는 전역 beforeEach → 라우트별 beforeEnter → 컴포넌트 beforeRouteEnter 순서로 실행되며, 각 가드는 Promise를 반환하거나 next 콜백을 호출할 수 있습니다. 중복 API 호출은 가드 레벨에서 캐싱 레이어를 두거나 Pinia 스토어의 액션에서 pending 상태를 관리하여 방지합니다. 가드 체인 중 에러 발생 시 router.onError로 전역 에러 핸들링을 설정하고, 이전 라우트로 복귀하거나 에러 페이지로 리다이렉트하는 전략을 사용합니다. 긴 비동기 작업은 낙관적 네비게이션으로 먼저 화면을 전환하고 Suspense나 로딩 상태로 처리하거나, 프리페칭 전략으로 이전 페이지에서 미리 데이터를 로드하는 방식으로 UX를 개선합니다.

Teleport로 모달을 body에 렌더링하고, 모달 스택을 관리하는 전역 상태로 z-index를 동적으로 계산합니다. Suspense는 모달 내부의 비동기 컴포넌트 로딩을 처리하며, fallback으로 스켈레톤을 표시합니다. KeepAlive는 자주 재사용되는 모달 컴포넌트를 캐싱하되, include/exclude prop으로 캐싱 대상을 제어합니다. 뒤로가기 지원은 모달이 열릴 때 history.pushState로 가상 히스토리 항목을 추가하고, popstate 이벤트 리스너로 모달을 닫는 방식으로 구현합니다. 모달 스택은 Pinia 스토어나 provide/inject로 관리하며, 각 모달의 ID, 우선순위, 옵션을 배열로 유지합니다.

메모리 누수의 주요 원인은 cleanup되지 않은 이벤트 리스너, clearInterval/clearTimeout 누락, 구독 해제 실패, 그리고 무한 증가하는 캐시입니다. Chrome DevTools의 Memory Profiler로 Heap Snapshot을 비교하여 누수를 탐지하고, Performance Monitor로 메모리 증가 추이를 관찰합니다. onUnmounted나 effectScope를 활용하여 모든 부수 효과를 자동으로 정리하도록 설계하고, Composable 패턴에서는 반환값으로 cleanup 함수를 제공합니다. 프로덕션 모니터링은 performance.memory API로 주기적으로 메모리 사용량을 측정하고, 임계값 초과 시 경고를 발생시킵니다. 대용량 캐시는 LRU 캐시나 WeakMap을 사용하여 자동 가비지 컬렉션이 가능하도록 구현합니다.