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

Static Hoisting은 정적 노드를 render 함수 외부로 끌어올려 매 렌더링마다 재생성하지 않도록 합니다. Patch Flag는 동적 바인딩의 타입을 비트 플래그로 표시하여 diff 알고리즘이 변경 가능한 부분만 체크하도록 합니다. Tree Flattening은 중첩된 동적 노드들을 평탄화된 배열로 추적하여 diff 과정을 최적화합니다. 개발자는 불필요한 동적 바인딩을 피하고, v-once나 v-memo 디렉티브를 적절히 활용하며, 템플릿에서 복잡한 표현식보다는 computed를 사용하여 컴파일러가 최적화를 잘 수행하도록 해야 합니다.

createRenderer에는 createElement, insert, remove, patchProp, setText, parentNode, nextSibling 등의 렌더링 옵션을 구현해야 합니다. createElement는 플랫폼별 엘리먼트 생성, insert는 부모에 자식 추가, patchProp은 속성 업데이트, setText는 텍스트 노드 업데이트를 담당합니다. Canvas 게임 엔진, 데이터 시각화 라이브러리, 터미널 UI, 네이티브 모바일 앱 등에서 Vue의 반응성 시스템과 컴포넌트 모델을 활용하면서 렌더링 타겟만 변경할 수 있습니다. 이를 통해 선언적 UI 패러다임을 다양한 플랫폼에 적용할 수 있습니다.

Symbol을 사용한 InjectionKey를 타입과 함께 정의하여 타입 안전성을 확보하고, provide/inject를 래핑하는 composable 함수를 만들어 일관된 인터페이스를 제공합니다. 각 서비스는 인터페이스를 정의하고 구현체를 분리하여 테스트 시 mock 주입이 가능하도록 합니다. 플러그인에서는 app.provide를 통해 전역 서비스를 등록하고, install 함수에서 옵션을 받아 유연하게 구성할 수 있도록 합니다. 이를 통해 느슨한 결합과 높은 테스트 가능성을 유지하면서 기능을 확장할 수 있습니다.

Hydration은 서버에서 렌더링된 정적 HTML에 클라이언트 측 Vue 인스턴스를 연결하여 인터랙티브하게 만드는 과정입니다. Mismatch는 서버와 클라이언트의 렌더링 결과가 다를 때 발생하며, 주로 Date, Math.random, 브라우저 전용 API 사용이 원인입니다. ClientOnly 컴포넌트 사용, onMounted에서 클라이언트 전용 로직 실행, 서버/클라이언트 동일한 초기 상태 보장으로 해결합니다. Selective Hydration은 우선순위에 따라 부분적으로 hydrate하고, Island Architecture는 정적 콘텐츠와 인터랙티브 영역을 분리하여 필요한 부분만 hydrate하여 초기 로딩 성능을 크게 개선합니다.

effect는 반응성 의존성을 추적하고 변경 시 재실행되는 함수를 등록합니다. track은 속성 접근 시 현재 active effect를 의존성으로 등록하고, trigger는 속성 변경 시 등록된 effect들을 실행합니다. computed는 lazy effect로 구현되어 의존성 변경 시 dirty 플래그만 설정하고 실제 접근 시 재계산하며, watch는 즉시 실행되는 effect로 구현됩니다. effectScope는 여러 effect를 그룹화하여 일괄 정리할 수 있게 하며, 컴포넌트 외부에서 반응성을 사용하거나 플러그인 개발 시 scope.stop()으로 모든 effect를 정리하여 메모리 누수를 방지합니다.