Vue.js 시니어 시스템 설계 면접
새 면접Q. 대규모 Vue.js 기반 SaaS 플랫폼에서 Multi-Tenancy 환경의 인증/인가 시스템을 설계해야 합니다. JWT 기반 인증, Role-Based Access Control(RBAC), 그리고 Feature Flag를 통합한 프론트엔드 권한 관리 아키텍처를 어떻게 설계하시겠습니까? 특히 토큰 갱신 전략, 권한 캐싱, 라우트 가드와의 통합 방안을 포함하여 설명해주세요.
JWT Access Token(15분)과 Refresh Token(7일)을 분리하여 httpOnly 쿠키에 저장하고, Axios Interceptor에서 401 응답 시 자동 갱신 로직을 구현합니다. 권한 정보는 Pinia Store에 정규화하여 저장하고, IndexedDB를 활용해 세션 간 캐싱하며, Vue Router의 beforeEach 가드에서 메타 필드 기반 권한 검증을 수행합니다. Feature Flag는 LaunchDarkly 같은 서비스와 통합하여 provide/inject로 전역 제공하고, 커스텀 디렉티브(v-feature)를 통해 컴포넌트 레벨에서 조건부 렌더링을 구현합니다. 테넌트 컨텍스트는 서브도메인 또는 경로 기반으로 식별하여 Store의 네임스페이스로 분리 관리합니다.
- • Access Token과 Refresh Token 분리, httpOnly 쿠키 저장으로 XSS 방지
- • Pinia Store에 권한 정규화, IndexedDB 캐싱으로 성능 최적화
- • Router 가드와 커스텀 디렉티브를 통한 다층 권한 검증
- • 테넌트별 Store 네임스페이스 분리로 데이터 격리 보장
토큰 갱신 중 동시에 여러 API 요청이 발생할 때 Race Condition을 어떻게 방지하시겠습니까? Promise 큐잉 전략을 설명해주세요.
Q. 실시간 협업 기능을 제공하는 Vue.js 애플리케이션에서 REST API, GraphQL, WebSocket을 혼합 사용하는 데이터 레이어를 설계해야 합니다. 각 프로토콜의 사용 시나리오를 정의하고, 이들 간의 데이터 일관성을 유지하기 위한 캐싱 전략과 Optimistic Update 구현 방안을 설명해주세요. 또한 네트워크 장애 시 재연결 및 데이터 동기화 로직을 어떻게 설계하시겠습니까?
REST API는 CRUD 작업과 초기 데이터 로딩에 사용하고, GraphQL은 복잡한 관계형 데이터 조회와 필드 선택적 페칭에 활용하며, WebSocket은 실시간 협업 이벤트(커서 위치, 동시 편집)에 사용합니다. 데이터 일관성을 위해 Apollo Client 또는 커스텀 Normalized Cache를 구축하여 Entity ID 기반으로 데이터를 정규화하고, WebSocket 이벤트 수신 시 캐시를 직접 업데이트합니다. Optimistic Update는 mutation 실행 전 로컬 상태를 즉시 반영하고 rollback 함수를 저장하여 실패 시 복원합니다. 네트워크 장애 시 Exponential Backoff 재연결을 구현하고, 재연결 성공 시 마지막 동기화 타임스탬프 기반으로 Delta Sync를 수행하여 누락된 이벤트를 복구합니다.
- • 프로토콜별 명확한 역할 분리: REST(CRUD), GraphQL(복잡 조회), WebSocket(실시간)
- • Entity ID 기반 Normalized Cache로 데이터 일관성 유지
- • Optimistic Update와 rollback 메커니즘으로 UX 개선
- • Exponential Backoff 재연결과 Delta Sync로 장애 복구
여러 사용자가 동시에 같은 문서를 편집할 때 발생하는 충돌을 해결하기 위한 CRDT(Conflict-free Replicated Data Type) 또는 OT(Operational Transformation) 알고리즘 적용 경험이 있으신가요?
Q. 전자상거래 플랫폼의 장바구니 시스템을 설계합니다. 비로그인 사용자는 localStorage, 로그인 사용자는 서버 DB에 저장하며, 로그인 시 두 데이터를 병합해야 합니다. 프론트엔드에서 이 복잡한 상태 동기화를 어떻게 설계하시겠습니까? 특히 재고 실시간 검증, 가격 변동 처리, 오프라인 모드 지원을 포함하여 설명해주세요.
Pinia Store에서 CartRepository 패턴을 구현하여 LocalStorageAdapter와 APIAdapter를 추상화하고, 인증 상태에 따라 자동 전환합니다. 로그인 시 localStorage의 장바구니 항목을 서버로 전송하여 병합 API를 호출하고, 서버는 중복 제거 및 재고 검증 후 통합 결과를 반환합니다. 재고 검증은 장바구니 조회 시마다 실시간 체크하며, WebSocket으로 재고 변동 이벤트를 수신하여 해당 상품의 가용성을 즉시 업데이트합니다. 가격 변동은 서버 응답의 최신 가격과 로컬 캐시를 비교하여 차이 발생 시 사용자에게 알림을 표시합니다. Service Worker를 활용한 오프라인 모드에서는 IndexedDB에 변경사항을 큐잉하고, 온라인 복귀 시 Background Sync API로 동기화합니다.
- • Repository 패턴과 Adapter로 스토리지 추상화 및 인증 상태별 전환
- • 서버 측 병합 API로 중복 제거 및 재고 검증 일관성 보장
- • WebSocket 실시간 이벤트로 재고/가격 변동 즉시 반영
- • Service Worker와 IndexedDB 큐잉으로 오프라인 지원
장바구니 병합 시 동일 상품의 수량 합산 로직에서 재고 초과가 발생하면 어떻게 처리하시겠습니까? UX 관점에서의 전략을 설명해주세요.
Q. 뉴스 포털 사이트의 Vue.js 프론트엔드에서 다층 캐싱 전략을 설계해야 합니다. CDN 캐싱, Service Worker 캐싱, 메모리 캐싱(Pinia), 그리고 브라우저 HTTP 캐싱을 어떻게 조합하여 최적의 성능과 최신성을 보장하시겠습니까? 특히 실시간 속보와 일반 기사의 캐싱 전략을 차별화하여 설명해주세요.
CDN 레벨에서는 정적 에셋(이미지, CSS, JS)에 1년 Cache-Control을 설정하고 파일명 해싱으로 무효화합니다. 일반 기사 HTML은 s-maxage=300(5분)으로 CDN 캐싱하되 stale-while-revalidate=600을 추가하여 백그라운드 갱신을 허용합니다. Service Worker에서는 Workbox의 CacheFirst 전략으로 에셋을 캐싱하고, 기사 데이터는 NetworkFirst with ExpirationPlugin(1시간)을 적용합니다. 실시간 속보는 SSE(Server-Sent Events) 또는 WebSocket으로 푸시받아 Pinia Store를 직접 업데이트하고 캐시를 우회합니다. Pinia에서는 LRU 캐시를 구현하여 최대 100개 기사만 메모리에 유지하며, 기사별로 timestamp를 저장하여 5분 경과 시 재검증 플래그를 설정합니다. HTTP 요청 시 ETag를 활용한 조건부 요청으로 304 응답을 최대화합니다.
- • CDN/Service Worker/메모리/HTTP 4단계 캐싱 레이어 구성
- • stale-while-revalidate로 성능과 최신성 균형 유지
- • 실시간 속보는 SSE/WebSocket 푸시로 캐시 우회
- • LRU 캐시와 timestamp 기반 재검증으로 메모리 관리
CDN 엣지에서 캐시된 페이지를 긴급하게 무효화해야 하는 상황(예: 오보 정정)에서 어떤 전략을 사용하시겠습니까? Cache Purge API와 프론트엔드의 대응 방안을 설명해주세요.
Q. 월간 활성 사용자 1000만 명 규모의 Vue.js 애플리케이션에서 프론트엔드 성능 모니터링 및 에러 추적 시스템을 구축해야 합니다. Core Web Vitals(LCP, FID, CLS) 측정, 사용자 세션 리플레이, 에러 스택 트레이스 수집, 그리고 커스텀 비즈니스 메트릭 추적을 포함한 통합 모니터링 아키텍처를 설계해주세요. 대용량 이벤트 처리와 개인정보 보호 방안도 함께 설명해주세요.
PerformanceObserver API로 LCP, FID, CLS를 측정하고, Navigation Timing API로 페이지 로드 성능을 수집하여 Beacon API로 비동기 전송합니다. Sentry SDK를 통합하여 Vue errorHandler와 window.onerror를 연결하고, Source Map을 업로드하여 프로덕션 에러의 원본 스택을 추적합니다. 세션 리플레이는 rrweb 라이브러리로 DOM 변경을 기록하되, data-sensitive 속성이 있는 요소는 마스킹 처리합니다. 커스텀 메트릭은 Pinia Plugin으로 주요 액션(구매, 검색)을 추적하고 Google Analytics 4와 연동합니다. 대용량 처리를 위해 클라이언트에서 이벤트를 배치(50개 또는 10초 단위)하여 전송하고, Sampling Rate(1~10%)를 동적 조정하여 트래픽을 제어합니다. 개인정보는 IP 익명화, 사용자 입력 마스킹, GDPR 준수를 위한 데이터 보존 기간(30일) 설정으로 보호합니다.
- • PerformanceObserver와 Navigation Timing으로 Core Web Vitals 자동 수집
- • Sentry 통합으로 Source Map 기반 에러 추적 및 알림
- • rrweb 세션 리플레이에 민감정보 마스킹 적용
- • 이벤트 배칭과 동적 Sampling으로 대용량 트래픽 최적화
프론트엔드 성능 저하가 감지되었을 때, 자동으로 Feature Flag를 조정하거나 트래픽을 제어하는 Self-Healing 메커니즘을 구현한 경험이 있으신가요? Circuit Breaker 패턴의 적용 사례를 설명해주세요.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!