Vue.js 미드레벨 종합 기술면접

watchEffect는 함수 내부에서 사용된 반응형 데이터를 자동으로 추적하며 즉시 실행되는 반면, watch는 명시적으로 감시할 대상을 지정하고 lazy하게 동작합니다. watchEffect는 side effect 로직이 단순하고 여러 반응형 데이터에 의존할 때 유용하며, watch는 이전 값과 새 값을 비교하거나 특정 데이터만 감시할 때 적합합니다. watchEffect의 자동 의존성 추적은 조건문 내부의 반응형 데이터가 있을 때 의도치 않은 재실행을 유발할 수 있으며, 이 경우 watch를 사용하거나 명시적으로 의존성을 제어해야 합니다. 또한 watchEffect는 cleanup 함수를 반환하여 이전 effect를 정리할 수 있어 비동기 작업 취소에 유용합니다.

LocalStorage와 SessionStorage는 JavaScript로 접근 가능하여 XSS 공격에 취약하지만 CSRF에는 안전합니다. Cookie는 HttpOnly 플래그를 사용하면 XSS를 방어할 수 있지만 자동으로 HTTP 요청에 포함되어 CSRF에 취약하므로 SameSite 속성 설정이 필요합니다. Memory 저장은 XSS와 CSRF 모두에 가장 안전하지만 새로고침 시 데이터가 사라져 사용성이 떨어집니다. 일반적으로 Access Token은 Memory 또는 HttpOnly Cookie에, Refresh Token은 HttpOnly, Secure, SameSite=Strict Cookie에 저장하는 것이 권장됩니다. 또한 민감한 토큰은 저장 전 암호화하고, CSP 헤더를 설정하여 XSS 공격 벡터를 최소화해야 합니다.

메시지 배열(시간순 정렬 유지), 사용자 ID를 키로 하는 Map(메시지 ID 배열 저장), 읽지 않은 메시지 카운트 객체를 조합하여 구현합니다. 메시지 추가는 배열 push와 Map 업데이트로 O(1), 사용자별 필터링은 Map에서 메시지 ID 목록을 가져와 O(k) (k는 해당 사용자 메시지 수), 읽지 않은 메시지 개수 조회는 카운트 객체에서 O(1)에 가능합니다. Vue의 반응성 시스템에서는 대량 메시지 추가 시 개별 push 대신 배치 업데이트를 사용하고, shallowRef나 shallowReactive로 깊은 감시를 방지하며, 메시지 객체는 Object.freeze로 불변화하여 성능을 최적화해야 합니다. 또한 메시지가 계속 증가하므로 일정 개수 이상 시 오래된 메시지를 제거하는 LRU 정책을 함께 구현해야 합니다.

첫째, 요청 큐를 구현하여 동시 요청 수를 제한하고 순차적으로 처리할 수 있지만 전체 로딩 시간이 증가합니다. 둘째, 뷰포트에 보이는 차트만 먼저 로드하고 나머지는 IntersectionObserver로 lazy loading하여 초기 로딩을 최적화할 수 있습니다. 셋째, 백엔드에 배치 API를 구현하여 여러 차트 데이터를 한 번의 요청으로 받아올 수 있지만 백엔드 수정이 필요합니다. 넷째, HTTP/2의 멀티플렉싱을 활용하여 동시 연결 제한 문제를 근본적으로 해결할 수 있습니다. 실무에서는 IntersectionObserver 기반 lazy loading과 우선순위 큐를 조합하여 중요한 차트는 즉시 로드하고 나머지는 지연 로드하는 하이브리드 방식이 효과적입니다. 또한 차트 데이터를 캐싱하고 stale-while-revalidate 패턴으로 이전 데이터를 먼저 보여주며 백그라운드에서 갱신하는 방법도 고려해야 합니다.

ACID는 Atomicity(원자성), Consistency(일관성), Isolation(격리성), Durability(지속성)를 의미합니다. Atomicity는 쿠폰 사용, 재고 차감, 주문 생성이 모두 성공하거나 모두 실패하도록 보장하여 부분 실패를 방지합니다. Consistency는 재고가 음수가 되거나 이미 사용된 쿠폰이 재사용되는 등 비즈니스 규칙 위반을 방지합니다. Isolation은 동시에 같은 쿠폰을 사용하려는 여러 사용자 간 충돌을 방지하며, Durability는 결제 완료 후 서버 장애가 발생해도 주문 데이터가 유실되지 않도록 보장합니다. 네트워크 오류 발생 시 데이터베이스는 자동으로 트랜잭션을 롤백하여 모든 변경사항을 취소하며, 애플리케이션 레벨에서는 사용자에게 재시도 옵션을 제공하고 멱등성 키를 사용하여 중복 결제를 방지해야 합니다.

저장 시점은 사용자 입력 후 debounce(500ms~1초)를 적용하여 과도한 저장을 방지하고, beforeunload 이벤트에서도 저장합니다. 저장소는 단순 폼은 localStorage, 파일 첨부나 대용량 데이터는 IndexedDB를 사용하며, 5MB 제한을 고려합니다. 데이터는 JSON 직렬화하되 민감 정보는 Web Crypto API로 암호화하고, 타임스탬프와 버전 번호를 함께 저장합니다. 복구 시 저장된 데이터와 현재 폼 데이터의 타임스탬프를 비교하여 사용자에게 선택권을 주며, 7일 이상 된 데이터는 자동 삭제합니다. Vue에서는 Composable로 추상화하여 watch로 폼 상태 변경을 감지하고, onBeforeUnmount에서 cleanup하며, Pinia 스토어에 저장된 데이터를 관리하여 여러 컴포넌트에서 공유할 수 있도록 합니다. 또한 여러 탭에서 동시 편집 시 BroadcastChannel API로 동기화하고 충돌을 방지합니다.

이 질문은 경험 기반 답변이 필요하므로 STAR 형식으로 구성하세요. Situation: 프로젝트 배경과 성능 최적화가 필요했던 이유, 약속한 일정과 의존 관계를 설명합니다. Task: 작업 중 발견한 구조적 문제의 구체적 내용과 예상 지연 규모를 명확히 합니다. Action: 문제를 발견한 즉시 팀 리더와 이해관계자에게 투명하게 공유하고, 핵심 성능 이슈만 먼저 해결하는 단계적 접근을 제안했으며, 리팩토링이 필요한 부분은 별도 태스크로 분리하여 우선순위를 조정한 과정을 설명합니다. 필요시 다른 팀원의 코드 리뷰나 페어 프로그래밍을 요청하여 병목을 해소한 경험도 포함합니다. Result: 최종적으로 핵심 성능 개선은 일정 내 완료하고, 추가 리팩토링은 다음 스프린트로 이관하여 팀 전체 일정에 미치는 영향을 최소화한 결과와 이를 통해 배운 점(조기 리스크 공유의 중요성, 작업 분할 전략 등)을 정리합니다.