Vue.js 미드레벨 코딩 면접
새 면접Q. Vue 3에서 대량의 카드 목록을 렌더링할 때, 각 카드 컴포넌트가 개별적으로 API 호출을 하면서 성능 문제가 발생했습니다. 이를 해결하기 위해 부모 컴포넌트에서 일괄 데이터를 로드하고 자식에게 전달하도록 리팩토링하려고 합니다. 이때 KeepAlive와 key 속성을 활용한 최적화 전략과, 각 카드의 독립적인 상태 관리를 어떻게 구현하시겠습니까?
부모에서 Promise.all을 사용해 병렬 API 호출로 전체 데이터를 로드하고 props로 전달합니다. KeepAlive로 탭 전환 시 컴포넌트 상태를 유지하되, include/exclude로 캐싱 대상을 제한합니다. 각 카드에는 고유한 key를 부여하여 리스트 재정렬 시 불필요한 재렌더링을 방지하고, 카드 내부 상태는 ref나 reactive로 로컬 관리합니다. 데이터 변경 감지는 watchEffect로 props 변화를 추적하며, 필요시 toRaw로 원본 데이터에 접근합니다.
- • Promise.all을 사용한 병렬 API 호출로 네트워크 요청 최적화
- • KeepAlive의 include/exclude로 선택적 캐싱 구현
- • 고유 key 속성으로 리스트 렌더링 최적화 및 재사용성 향상
- • props와 로컬 상태의 명확한 분리로 단방향 데이터 흐름 유지
만약 일부 카드만 업데이트되는 실시간 데이터라면, 전체 리스트를 재렌더링하지 않고 특정 카드만 업데이트하는 방법은 무엇인가요?
Q. 실시간 주식 거래 대시보드에서 수백 개의 종목 데이터가 초당 여러 번 업데이트됩니다. 각 종목의 가격 변동 히스토리를 최근 100개만 유지하면서, 특정 종목의 최고가/최저가를 O(1)에 조회하고, 가장 오래된 데이터를 제거할 때도 효율적으로 동작하는 자료구조를 설계해주세요. Vue의 반응성 시스템과 함께 사용할 때 주의할 점도 설명해주세요.
각 종목마다 Circular Buffer(원형 큐)로 100개 히스토리를 관리하고, 별도로 Min Heap과 Max Heap을 유지하여 최저가/최고가를 O(1)에 조회합니다. 데이터 추가 시 O(log n), 제거 시 lazy deletion으로 처리합니다. Vue에서는 shallowRef로 감싸서 내부 구조 변경 시 불필요한 깊은 반응성을 방지하고, 업데이트 시 triggerRef로 명시적으로 트리거합니다. 대량 업데이트는 nextTick 내에서 배치 처리하여 렌더링 횟수를 최소화합니다.
- • Circular Buffer로 고정 크기 히스토리 관리 (메모리 효율성)
- • Min/Max Heap 조합으로 최저가/최고가 O(1) 조회 구현
- • shallowRef와 triggerRef로 반응성 오버헤드 최소화
- • nextTick을 활용한 배치 업데이트로 렌더링 최적화
만약 사용자가 특정 시간 범위의 평균가를 자주 조회한다면, 어떤 추가 자료구조나 알고리즘을 사용하시겠습니까?
Q. Vue 컴포넌트에서 여러 개의 독립적인 API를 호출하고, 모든 응답이 완료되면 종합 결과를 표시해야 합니다. 이때 한 API가 실패해도 다른 API 결과는 표시하고, 각 API의 로딩 상태를 개별적으로 관리하며, 컴포넌트 unmount 시 진행 중인 요청을 취소하는 로직을 어떻게 구현하시겠습니까?
각 API 호출을 AbortController와 함께 Promise로 감싸고, Promise.allSettled로 모든 요청의 완료를 기다립니다. 각 요청마다 개별 ref로 로딩 상태를 관리하고, fulfilled/rejected 결과를 분리하여 처리합니다. onBeforeUnmount 훅에서 모든 AbortController.abort()를 호출하여 진행 중인 요청을 취소하고, 상태 업데이트 전 isUnmounted 플래그를 체크하여 메모리 누수를 방지합니다. 에러는 각 API별로 try-catch로 처리하거나 onRejected 핸들러로 수집합니다.
- • Promise.allSettled로 부분 실패 허용 및 전체 결과 수집
- • AbortController로 요청 취소 기능 구현
- • 개별 ref를 사용한 세밀한 로딩 상태 관리
- • onBeforeUnmount에서 cleanup 로직으로 메모리 누수 방지
만약 API 간 의존성이 있어서 순차 호출이 필요하다면, 에러 발생 시 재시도 로직은 어떻게 구현하시겠습니까?
Q. 복잡한 SVG 차트를 렌더링하는 Vue 컴포넌트에서, 데이터가 변경될 때마다 전체 차트가 재렌더링되어 성능 문제가 발생합니다. Template 기반 렌더링 대신 Render Function을 사용하여 변경된 부분만 선택적으로 업데이트하는 최적화 전략을 설계하고, h 함수와 VNode의 재사용 방법, 그리고 Manual Rendering 패턴을 설명해주세요.
Render Function에서 h 함수로 VNode를 생성하되, 변경되지 않은 부분은 이전 VNode를 재사용합니다. watchEffect로 데이터 변화를 감지하고, 변경된 데이터 포인트만 새 VNode로 교체합니다. 정적 부분은 컴포넌트 외부에서 한 번만 생성하여 캐싱하고, 동적 부분만 computed로 메모이제이션합니다. 필요시 markRaw로 SVG 좌표 데이터를 감싸서 반응성을 제거하고, requestAnimationFrame으로 렌더링 타이밍을 제어하여 프레임 드롭을 방지합니다.
- • h 함수와 VNode 재사용으로 불필요한 DOM 조작 최소화
- • 정적/동적 부분 분리 및 선택적 업데이트 구현
- • markRaw로 대용량 데이터의 반응성 오버헤드 제거
- • requestAnimationFrame을 활용한 렌더링 타이밍 최적화
만약 차트가 수만 개의 데이터 포인트를 표시해야 한다면, Canvas API로 전환하는 것과 비교했을 때 어떤 트레이드오프가 있습니까?
Q. SPA에서 사용자가 여러 페이지를 장시간 탐색하면서 메모리 사용량이 지속적으로 증가하는 현상이 발견되었습니다. Vue 컴포넌트에서 발생할 수 있는 메모리 누수의 주요 원인들을 설명하고, Chrome DevTools의 Memory Profiler를 사용한 진단 방법, 그리고 이벤트 리스너, 타이머, Observer 패턴에서의 cleanup 전략을 구체적으로 설명해주세요.
주요 원인은 전역 이벤트 리스너 미제거, setInterval/setTimeout 미정리, DOM 참조 유지, 클로저의 불필요한 스코프 캡처입니다. Memory Profiler에서 Heap Snapshot을 비교하여 Detached DOM nodes와 증가하는 객체를 식별합니다. onBeforeUnmount에서 removeEventListener, clearInterval, observer.disconnect를 호출하고, WeakMap/WeakSet으로 순환 참조를 방지합니다. watch/watchEffect의 반환 함수로 cleanup을 등록하고, effectScope를 사용해 관련 effect를 그룹으로 정리합니다.
- • Heap Snapshot 비교로 메모리 누수 원인 식별
- • 생명주기 훅에서 체계적인 cleanup 로직 구현
- • WeakMap/WeakSet으로 순환 참조 방지
- • effectScope를 활용한 effect 그룹 관리 및 일괄 정리
만약 Third-party 라이브러리가 메모리 누수를 일으킨다면, 이를 격리하거나 우회하는 방법은 무엇인가요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!