React 시니어 시스템 설계 면접
새 면접Q. React 애플리케이션에서 GraphQL과 REST API를 동시에 사용해야 하는 하이브리드 환경을 설계해야 합니다. 레거시 REST API와 신규 GraphQL 엔드포인트를 통합하고, 캐싱 전략을 일관되게 유지하며, 데이터 정규화를 효율적으로 처리하는 아키텍처를 제시해주세요. Apollo Client, React Query, SWR 등의 라이브러리 조합 방안도 포함해주세요.
추상화 레이어를 도입하여 데이터 소스를 통합합니다. Apollo Client는 GraphQL 전용으로 사용하고, React Query는 REST API를 담당하되, 공통 캐시 키 전략을 수립합니다. 데이터 정규화는 normalizr 라이브러리나 Apollo의 InMemoryCache를 활용하여 중복 제거와 일관성을 보장합니다. 데이터 접근 계층(Data Access Layer)을 Custom Hook으로 구현하여 컴포넌트가 데이터 소스를 인지하지 못하도록 캡슐화합니다. 마이그레이션 단계에서는 Feature Flag를 활용해 점진적으로 GraphQL로 전환하며, 모니터링 대시보드로 각 API의 성능과 오류율을 추적합니다.
- • 데이터 접근 계층(DAL)을 Custom Hook으로 추상화하여 데이터 소스 캡슐화
- • Apollo Client(GraphQL)와 React Query(REST)를 병행 사용하되 통합 캐시 키 전략 수립
- • 정규화된 캐시 구조로 데이터 중복 제거 및 일관성 보장
- • Feature Flag 기반 점진적 마이그레이션 전략
- • 통합 모니터링 및 에러 핸들링 체계 구축
GraphQL Subscription과 REST의 Server-Sent Events를 동시에 사용할 때 실시간 데이터 동기화를 어떻게 처리하시겠습니까?
Q. 오프라인 우선(Offline-First) 전략을 가진 React 웹 애플리케이션을 설계해야 합니다. IndexedDB를 활용한 로컬 저장소와 서버 데이터베이스 간의 양방향 동기화, 충돌 해결 전략, 네트워크 재연결 시 데이터 일관성 보장 방법을 설계해주세요. 특히 동시성 제어와 버전 관리 측면에서 설명해주세요.
CRDTs(Conflict-free Replicated Data Types) 또는 Operational Transformation 알고리즘을 활용하여 충돌을 자동 해결합니다. 각 데이터에 벡터 클락(Vector Clock) 또는 타임스탬프를 부여하여 버전 관리를 수행하고, 낙관적 업데이트와 함께 작업 큐를 IndexedDB에 저장합니다. 네트워크 재연결 시 Background Sync API를 사용하여 큐에 쌓인 작업을 순차적으로 동기화하며, 서버 응답에 따라 로컬 데이터를 조정합니다. 충돌 발생 시 Last-Write-Wins, Custom Merge Logic, User Intervention 중 비즈니스 요구사항에 맞는 전략을 선택합니다. Service Worker와 Workbox를 활용하여 네트워크 상태를 모니터링하고 자동 재시도 로직을 구현합니다.
- • CRDTs 또는 OT 알고리즘으로 자동 충돌 해결
- • 벡터 클락 기반 버전 관리 및 동시성 제어
- • IndexedDB 작업 큐와 Background Sync API를 활용한 자동 동기화
- • 낙관적 업데이트와 서버 응답 기반 롤백 메커니즘
- • Service Worker 기반 네트워크 상태 모니터링 및 재시도 로직
여러 탭에서 동시에 같은 애플리케이션을 사용할 때 IndexedDB의 데이터 일관성을 어떻게 보장하시겠습니까?
Q. 마이크로서비스 환경에서 React SPA의 인증 및 권한 관리 시스템을 설계해야 합니다. OAuth 2.0 + OIDC 기반 SSO, JWT 토큰 관리(Access/Refresh), 토큰 갱신 전략, RBAC/ABAC 권한 제어, 그리고 여러 백엔드 서비스로의 인증 전파를 포함한 전체 아키�ecktur를 제시해주세요.
Authorization Code Flow with PKCE를 사용하여 보안성을 강화하고, Access Token은 메모리에, Refresh Token은 HttpOnly Secure Cookie에 저장합니다. Token Rotation 전략을 적용하여 Refresh Token을 일회용으로 만들고, Silent Refresh를 위한 숨겨진 iframe 또는 최신 방식인 Refresh Token Grant를 활용합니다. API Gateway 패턴을 도입하여 토큰 검증과 권한 확인을 중앙화하고, BFF(Backend For Frontend)를 통해 토큰 교환 로직을 서버 사이드로 이동시킵니다. RBAC은 기본 역할 기반 접근 제어로, ABAC은 세밀한 속성 기반 제어로 조합하여 사용하며, 권한 정보는 JWT Claims와 별도 Policy Engine을 병행합니다. React Context와 Higher-Order Component로 권한 기반 라우팅과 UI 렌더링을 제어합니다.
- • PKCE를 적용한 Authorization Code Flow로 보안 강화
- • Access Token 메모리 저장, Refresh Token HttpOnly Cookie 저장
- • Token Rotation과 Silent Refresh로 자동 갱신
- • API Gateway 및 BFF 패턴으로 토큰 검증 중앙화
- • RBAC/ABAC 조합과 JWT Claims 기반 세밀한 권한 제어
XSS 공격으로 메모리의 Access Token이 탈취될 위험을 완화하기 위한 추가 보안 조치는 무엇이 있을까요?
Q. 월간 1억 PV를 처리하는 React 기반 전자상거래 플랫폼의 프론트엔드 인프라를 설계해야 합니다. CDN 전략, 정적 자산 최적화, 서버 사이드 렌더링(SSR) vs 정적 사이트 생성(SSG) vs 클라이언트 사이드 렌더링(CSR) 선택 기준, Edge Computing 활용, 그리고 A/B 테스팅 인프라를 포함한 전체 아키텍처를 제시해주세요.
Next.js의 Hybrid Rendering을 활용하여 페이지 특성별로 렌더링 전략을 차별화합니다. 상품 상세 페이지는 ISR(Incremental Static Regeneration)로 구현하여 정적 생성의 속도와 동적 업데이트를 모두 확보하고, 사용자 대시보드는 CSR로 구현합니다. 홈페이지와 카테고리 페이지는 SSG로 빌드 타임에 생성하여 CDN에서 제공합니다. Cloudflare Workers나 Vercel Edge Functions를 활용하여 사용자 위치 기반 개인화와 A/B 테스팅을 Edge에서 처리합니다. 이미지는 WebP/AVIF 포맷으로 자동 변환하고 responsive image와 lazy loading을 적용하며, Critical CSS는 인라인으로 삽입합니다. A/B 테스팅은 Edge에서 사용자를 분기하여 서로 다른 번들을 제공하고, 분석 데이터는 비동기로 수집합니다.
- • 페이지 특성별 Hybrid Rendering 전략(SSG/ISR/CSR)
- • CDN + Edge Computing으로 글로벌 레이턴시 최소화
- • 이미지 최적화(WebP/AVIF, Lazy Loading, Responsive)
- • Edge Functions 기반 A/B 테스팅 및 개인화
- • Critical CSS 인라인, Code Splitting, Prefetching 전략
ISR의 Revalidation 주기를 결정할 때 고려해야 할 비즈니스 및 기술적 요소는 무엇인가요?
Q. 대규모 React 애플리케이션의 프론트엔드 모니터링 및 관찰성(Observability) 시스템을 설계해야 합니다. 성능 메트릭(Core Web Vitals), 에러 추적, 사용자 행동 분석, 실시간 알림 시스템, 그리고 장애 발생 시 빠른 롤백과 복구를 위한 배포 전략을 포함하여 설명해주세요.
성능 모니터링은 Web Vitals 라이브러리로 LCP, FID, CLS를 측정하고, Performance Observer API로 커스텀 메트릭을 수집합니다. Sentry나 Rollbar로 에러를 실시간 추적하고, Source Map을 안전하게 관리하여 프로덕션 에러를 디버깅합니다. RUM(Real User Monitoring)으로 실제 사용자 경험을 측정하고, Session Replay로 에러 재현 컨텍스트를 확보합니다. OpenTelemetry를 활용하여 프론트엔드-백엔드 간 분산 추적을 구현하고, Grafana와 Prometheus로 메트릭을 시각화합니다. 배포는 Canary 또는 Blue-Green 전략을 사용하여 점진적으로 트래픽을 전환하고, Feature Flag로 신규 기능을 제어하며, 에러율이 임계값을 초과하면 자동 롤백합니다. PagerDuty나 Slack 통합으로 실시간 알림을 전달하고, Runbook을 문서화하여 온콜 대응을 표준화합니다.
- • Web Vitals 및 Performance Observer로 성능 메트릭 수집
- • Sentry + Source Map으로 프로덕션 에러 추적 및 디버깅
- • OpenTelemetry 기반 분산 추적으로 프론트엔드-백엔드 연계
- • Canary/Blue-Green 배포와 자동 롤백 메커니즘
- • RUM, Session Replay, Feature Flag로 관찰성 및 제어성 확보
프론트엔드에서 수집한 대량의 메트릭 데이터를 효율적으로 전송하고 저장하기 위한 샘플링 및 배치 전략은 무엇인가요?
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!