Vue.js 미드레벨 기술면접

먼저 필터링 로직을 computed 속성으로 구현하여 Vue의 캐싱 메커니즘을 활용합니다. 사용자 입력에는 debounce를 적용해 불필요한 재계산을 방지하고(예: 300ms 지연), 필터링된 결과가 여전히 많다면 가상 스크롤링을 적용합니다. 추가로 복잡한 필터 조건의 경우 useMemo나 shallowRef를 활용해 중간 계산 결과를 캐싱하고, 리스트 항목에 key를 올바르게 설정하여 Vue의 diff 알고리즘이 효율적으로 동작하도록 합니다. 필요시 Web Worker로 필터링 로직을 오프로드하여 메인 스레드 블로킹을 방지할 수 있습니다.

먼저 useRouteQuery 같은 Composable을 만들어 route.query와 양방향 바인딩되는 ref를 반환하도록 구현합니다. watchEffect를 사용해 필터 상태 변경 시 router.replace로 URL을 업데이트하되, 히스토리 스택을 쌓지 않도록 합니다. 복잡한 객체는 JSON.stringify로 직렬화하거나 qs 라이브러리로 중첩 구조를 처리하고, onMounted에서 route.query를 파싱해 초기 상태를 복원합니다. 상태 변경과 URL 업데이트 간 무한 루프를 방지하기 위해 내부 플래그나 watch의 flush: 'post' 옵션을 활용하며, 유효하지 않은 쿼리 파라미터는 기본값으로 fallback하는 validation 로직을 포함합니다.

주요 원인은 API 응답에 non-reactive 객체(Date, Map, Set 등)가 포함되어 있거나, 깊은 중첩 구조에서 일부 객체가 markRaw로 마킹되었거나, Object.freeze가 적용된 경우입니다. Vue DevTools의 Reactivity 탭에서 해당 객체의 반응성 상태를 확인하고, console.log(toRaw(data))로 원본 객체를 검사합니다. 해결 방법으로는 문제가 되는 속성만 ref로 분리하거나, 업데이트 시 Object.assign이나 스프레드 연산자로 새 객체를 생성하거나, 깊은 복사 후 재할당하는 방법이 있습니다. 또한 배열의 경우 인덱스 직접 할당 대신 splice나 Vue.set 패턴을 사용해야 할 수 있습니다.

watch 내부에서 동적으로 watch를 생성하면 메모리 누수가 발생하고 cleanup이 복잡해지며, 의도치 않은 중복 실행이 발생할 수 있습니다. computed 내부에서 상태를 변경하면 순수 함수 원칙을 위반하고 무한 루프나 예측 불가능한 동작을 야기합니다. 동적 의존성 추적이 필요하다면 watchEffect를 사용하고, 여러 소스를 감시해야 한다면 watch의 배열 형태나 중첩된 watchEffect를 사용합니다. computed는 항상 순수 함수로 유지하고, 상태 변경은 watch나 메서드에서 처리해야 합니다. watch 생성 시 반환된 stop 함수를 onUnmounted에서 호출하여 명시적으로 cleanup 합니다.

라우트별로 번역 파일을 분리하고 Vue Router의 lazy loading과 함께 동적 import로 필요한 번역만 로드합니다. 전역 i18n 인스턴스는 공통 번역만 포함하고, 각 라우트 컴포넌트에서 onBeforeMount 시 해당 언어팩을 i18n.global.mergeLocaleMessage로 병합합니다. 언어 전환 시에는 localStorage에 선택 언어를 저장하고, Pinia 스토어로 전역 언어 상태를 관리하며, Suspense와 함께 비동기 번역 로딩 중 fallback UI를 표시합니다. 동적 번역 키는 API에서 받아와 런타임에 추가하되, 캐싱 전략을 적용하고, 개발 환경에서는 missing key를 감지하여 로그를 남깁니다. 번들 분석 도구로 번역 파일 크기를 모니터링하고, 사용되지 않는 번역은 tree-shaking으로 제거합니다.