Vue.js 미드레벨 기술면접

Pinia는 DevTools 통합으로 시간 여행 디버깅과 상태 추적이 가능하고, 코드 스플리팅과 트리 쉐이킹이 자동으로 지원되며, TypeScript 지원이 우수하고 타입 추론이 자동으로 됩니다. SSR 환경에서 서버/클라이언트 상태 분리가 명확하고, 플러그인 시스템을 통한 확장성이 뛰어납니다. Composable은 간단한 전역 상태나 UI 로직 재사용에 적합하고, Pinia는 복잡한 비즈니스 로직, 여러 컴포넌트가 공유하는 상태, 디버깅이 중요한 경우에 적합합니다. 프로젝트 규모가 크고 여러 개발자가 협업하며 상태 변경 추적이 중요하다면 Pinia를 선택하는 것이 좋습니다.

번들 분석은 rollup-plugin-visualizer나 webpack-bundle-analyzer를 사용하여 각 패키지의 크기를 시각화하고, 라우트 기반 코드 스플리팅은 Vue Router의 동적 import를 활용하며, 컴포넌트 레벨 스플리팅은 defineAsyncComponent로 구현합니다. Tree Shaking이 동작하지 않는 주요 원인은 CommonJS 모듈 사용, 사이드 이펙트가 있는 코드, package.json의 sideEffects 설정 누락입니다. 해결 방법으로는 ES Module 버전의 라이브러리 사용, lodash 대신 lodash-es 사용, 사이드 이펙트가 없는 순수 함수로 리팩토링, 그리고 manualChunks 설정으로 vendor 분리를 최적화합니다.

app.config.errorHandler는 애플리케이션 전역의 모든 에러를 잡아 로깅 서비스로 전송하거나 사용자에게 에러 메시지를 표시하는 최상위 에러 바운더리로 사용합니다. onErrorCaptured는 특정 컴포넌트 하위 트리의 에러를 가로채서 폴백 UI를 표시하거나 에러 복구 로직을 실행할 때 사용하며, false를 반환하면 에러 전파를 중단합니다. try-catch는 특정 비동기 작업의 에러를 세밀하게 제어할 때 사용합니다. 비동기 에러는 Promise rejection을 처리해야 하므로 async/await와 try-catch를 조합하거나, window.addEventListener('unhandledrejection')로 처리되지 않은 Promise 에러를 전역에서 잡습니다.

사용자 인터랙션은 await wrapper.find('button').trigger('click')로 이벤트를 발생시키고, 비동기 상태 업데이트는 await flushPromises()나 await wrapper.vm.$nextTick()으로 DOM 업데이트를 기다립니다. Composable은 컴포넌트와 분리하여 단위 테스트하되, 실제 컴포넌트에서 통합 테스트도 수행합니다. 유지보수 가능한 테스트를 위해서는 구현 세부사항이 아닌 사용자 관점에서 테스트하고, data-testid 속성을 활용하여 선택자를 안정화하며, 테스트 픽스처와 팩토리 함수로 반복을 줄입니다. API 호출은 MSW나 vi.mock으로 모킹하여 외부 의존성을 제거합니다.

메모리 캐시는 가장 빠르지만 새로고침 시 사라지므로 세션 내 반복 조회에 적합하고, LocalStorage는 5-10MB 제한이 있지만 간단한 문자열 데이터 영구 저장에 적합하며, IndexedDB는 대용량 구조화된 데이터와 오프라인 지원에 적합합니다. 캐시 무효화는 TTL(Time-To-Live) 기반, 이벤트 기반(데이터 변경 시), 버전 기반(API 버전 변경 시) 전략을 조합합니다. stale-while-revalidate는 캐시된 데이터를 즉시 반환하면서 백그라운드에서 새 데이터를 가져와 갱신하는 패턴으로, 사용자 경험을 유지하면서 데이터 신선도를 보장합니다. 구현 시 캐시 키 설계, 동시 요청 중복 제거, 캐시 용량 관리(LRU 정책)를 고려해야 합니다.