Vue.js 시니어 트러블슈팅 면접

먼저 Vue DevTools와 소스맵을 활용해 프로덕션 빌드에서 상태 변화를 추적합니다. 주요 의심 원인으로는 (1) 객체 destructuring으로 ref의 .value를 잃어버린 경우, (2) 외부 라이브러리가 직접 객체를 변경하는 경우, (3) Object.freeze()된 객체를 반응형으로 만들려는 경우, (4) 빌드 최적화 과정에서 코드 분할로 인한 반응성 컨텍스트 손실 등을 검토합니다. 재현을 위해 Sentry나 LogRocket 같은 세션 리플레이 도구로 사용자 행동을 추적하고, 프로덕션과 동일한 빌드 설정으로 스테이징 환경을 구성합니다. nextTick 전후로 console.log를 추가하여 반응성 추적 시점을 확인하고, isRef, isReactive, isReadonly 등의 유틸리티로 객체 상태를 검증합니다. 근본 원인 파악 후 toRef, toRefs를 활용한 안전한 참조 전달, watch의 deep 옵션 활용, 또는 명시적인 triggerRef 호출로 해결하며, 재발 방지를 위해 ESLint 규칙과 타입스크립트 strict 모드를 강화합니다.

먼저 브라우저 콘솔에서 청크 로딩 실패 에러를 확인하고, defineAsyncComponent의 errorComponent와 loadingComponent 설정 여부를 점검합니다. Navigation Guard에서 비동기 작업이 resolve되지 않고 pending 상태로 남아있는지 확인하기 위해 각 guard에 타임아웃과 로깅을 추가합니다. race condition 진단을 위해 router.beforeEach에서 navigation ID를 생성하고 추적하여, 이전 네비게이션이 완료되기 전에 새 네비게이션이 시작되는 케이스를 감지합니다. 해결 방안으로는 (1) router.onError 핸들러로 청크 로딩 실패 시 재시도 로직 구현, (2) Navigation Guard에서 AbortController를 활용한 이전 요청 취소, (3) beforeRouteEnter에서 Promise rejection 처리 누락 수정, (4) 컴포넌트 로딩 타임아웃 설정을 적용합니다. 모니터링을 위해 router.afterEach에서 네비게이션 소요 시간을 측정하고, 임계값 초과 시 알림을 발송하는 시스템을 구축합니다.

먼저 사용자 전환 플로우를 추적하여 로그아웃 시 $reset() 호출 여부와 모든 스토어가 초기화되는지 확인합니다. 비동기 요청에 사용자 ID를 태깅하고, 응답 수신 시점에 현재 로그인한 사용자와 일치하는지 검증하는 로직을 추가합니다. Pinia 스토어가 싱글톤으로 동작하므로, 이전 사용자의 상태가 남아있는 경우를 찾기 위해 각 스토어의 state를 로그인/로그아웃 시점에 스냅샷으로 기록합니다. race condition 진단을 위해 네트워크 탭에서 API 요청의 타임스탬프와 응답 순서를 분석하여, 느린 요청이 나중에 도착해 최신 데이터를 덮어쓰는 케이스를 확인합니다. 해결책으로는 (1) 라우터 beforeEach에서 사용자 변경 감지 시 모든 스토어 강제 리셋, (2) API 요청에 requestId와 userId를 포함하여 응답 검증, (3) AbortController로 이전 사용자의 pending 요청 취소, (4) 스토어 액션에서 stale-while-revalidate 패턴 구현으로 최신성 보장을 적용합니다. 재발 방지를 위해 E2E 테스트에 사용자 전환 시나리오를 추가하고, 스토어 상태에 userId를 포함하여 불일치 감지 로직을 구현합니다.

먼저 Performance API와 Navigation Timing API를 활용하여 실제 사용자 환경에서 각 로딩 단계별 시간을 측정하는 RUM 시스템을 구축합니다. User-Agent, 네트워크 타입(navigator.connection), 디바이스 메모리(navigator.deviceMemory)를 수집하여 느린 사용자 세그먼트를 식별합니다. 특정 지역이나 ISP에서 문제가 발생하는지 확인하기 위해 CDN 로그와 사용자 위치 데이터를 분석합니다. Lighthouse는 캐시된 상태를 측정하지만 실제 사용자는 cold start일 수 있으므로, Service Worker 캐시 히트율과 첫 방문 vs 재방문 사용자의 성능 차이를 비교합니다. 해결 방안으로는 (1) 저사양 디바이스를 위한 번들 크기 축소 및 코드 스플리팅 강화, (2) Critical CSS 인라인화와 폰트 preload로 렌더링 블로킹 제거, (3) 느린 네트워크 감지 시 저화질 이미지 제공, (4) 주요 API 응답을 Service Worker로 캐싱하여 반복 방문 성능 개선을 적용합니다. 모니터링 대시보드에서 P50, P75, P95 백분위수로 성능을 추적하고, 특정 백분위수가 임계값을 초과하면 알림을 발송하도록 설정합니다.

문제의 근본 원인은 사용자가 이전 버전의 HTML을 로드한 상태에서 새 버전 배포로 청크 파일명이 변경되어 404 에러가 발생하는 것입니다. 먼저 router.onError에서 ChunkLoadError를 감지하고, 자동으로 페이지를 새로고침하는 fallback 로직을 구현합니다. 근본적 해결을 위해 (1) 배포 시 이전 버전의 청크 파일을 일정 시간(예: 1시간) 유지하는 배포 스크립트 수정, (2) CDN의 stale-while-revalidate 캐시 헤더 설정으로 점진적 업데이트, (3) Service Worker에서 새 버전 감지 시 사용자에게 업데이트 알림을 표시하고 수동 새로고침 유도를 적용합니다. Vite의 경우 build.rollupOptions.output.chunkFileNames에 해시를 포함하여 캐시 무효화를 명확히 하고, Webpack의 경우 contenthash를 사용합니다. 모니터링을 위해 Sentry에 ChunkLoadError를 별도 카테고리로 추적하고, 배포 시점과 에러 발생률의 상관관계를 분석합니다. Blue-Green 배포나 Canary 배포 전략을 도입하여 점진적으로 트래픽을 전환하고, 문제 발생 시 빠르게 롤백할 수 있는 체계를 구축합니다.

모바일에서는 touchend 이벤트 후 약 300ms 뒤에 click 이벤트가 추가로 발생하여 이중 실행될 수 있습니다. 먼저 이벤트 리스너에 로그를 추가하여 touchend와 click이 모두 실행되는지 확인합니다. 해결 방안으로는 (1) @click.prevent 또는 event.preventDefault()로 기본 동작 방지, (2) touch 이벤트 사용 시 @touchend.prevent를 사용하고 click 리스너 제거, (3) CSS의 touch-action: manipulation으로 더블탭 줌 비활성화를 통한 클릭 지연 제거를 적용합니다. 디바운싱이 작동하지 않는 경우는 여러 컴포넌트 인스턴스가 각자 디바운스 타이머를 가지고 있거나, 이벤트 버블링으로 부모 요소에서도 핸들러가 실행되는 경우입니다. API 요청 중복 방지를 위해 요청 시작 시 loading 플래그를 설정하고, 요청 중일 때는 조기 반환하는 가드를 추가합니다. 더 견고한 해결책으로 AbortController를 활용하여 이전 요청을 취소하거나, 요청 ID를 생성하여 중복 요청을 서버에서 거부하도록 구현합니다. 모니터링을 위해 같은 사용자가 1초 이내에 동일 API를 호출하는 케이스를 추적하고 알림을 설정합니다.

먼저 WebSocket 메시지 수신 시 타임스탬프와 시퀀스 번호를 로깅하여 메시지 도착 순서와 처리 순서를 비교합니다. 메시지 누락은 주로 재연결 과정에서 발생하므로, WebSocket의 onclose와 onerror 이벤트를 모니터링하여 연결 끊김 시점을 추적합니다. 해결 방안으로는 (1) 서버에서 각 메시지에 시퀀스 번호를 부여하고 클라이언트에서 순서대로 처리하는 버퍼링 로직 구현, (2) 재연결 시 마지막으로 받은 메시지 ID를 서버에 전송하여 누락된 메시지 재전송 요청, (3) 네트워크 불안정 감지 시 heartbeat 메커니즘으로 연결 상태 확인을 적용합니다. Vue 측면에서는 메시지 배열에 push할 때 nextTick 타이밍 문제로 렌더링이 배치되어 순서가 뒤바뀔 수 있으므로, 메시지 ID 기반으로 정렬하거나 Map 자료구조를 사용하여 순서를 보장합니다. Pinia 스토어에서 메시지를 관리할 때 액션 내부에서 비동기 처리가 겹치지 않도록 큐 패턴을 적용합니다. 오프라인 대응을 위해 IndexedDB에 메시지를 저장하고, 온라인 복귀 시 서버와 동기화하는 로직을 구현합니다. 모니터링을 위해 메시지 수신 간격, 재연결 빈도, 시퀀스 갭을 측정하고 이상 패턴을 감지합니다.