1. Core Tech

  • Next.js 이미지 최적화 및 UX 전략
    • Next.js의 next/image 컴포넌트가 내부에서 이미지를 리사이징하고 캐싱하는 과정은 구체적으로 어떻게 돌아가는가? 나는 이 흐름을 설명할 수 있는가?
    • 이미지가 로딩되는 동안 CLS(Cumulative Layout Shift)를 막기 위해 Blur나 Opacity 처리를 거는데, 이 Placeholder 전략이 기술적으로 어떤 원리에 기대고 있는지 말할 수 있는가?
  • React 렌더링 및 생명주기 제어
    • Suspense와 데이터 페칭: Suspense 기반 데이터 페칭이 기존 useEffect 패턴보다 사용자 경험이나 성능 면에서 나은 이유가 뭔가? Waterfall 방지 같은 관점에서 나는 이걸 체감한 적이 있는가?
    • RSC vs Client Component: 서버 컴포넌트(RSC)와 클라이언트 컴포넌트의 차이를 명확히 알고 있는가? 실무에서 이 둘의 경계를 가르는 나만의 기준이 있다면 무엇인가?
    • React Router와 Preload: React Router 환경에서 페이지 전환 속도를 끌어올리기 위해 preload나 prefetch 전략을 어떻게 구현할 수 있는가?
  • Hooks 및 의존성 관리
    • Stale Data: staleTime과 gcTime(구 cacheTime)의 개념적 차이를 깔끔하게 설명할 수 있는가?
    • useMemo나 useEffect의 의존성 배열을 잘못 관리해서 Stale Closure가 발생한 경험이 있는가? 그때 어떻게 디버깅하고 해결했는가?

2. Architecture

  • MFE(Micro Frontend) 설계 전략
    • Granularity (입자 크기): MFE를 도입할 때 Fragment(컴포넌트 단위)와 Application(페이지/앱 단위) 중 어떤 상황에서 Fragment를 택해야 하는가? 그 득과 실을 따져본 적이 있는가?
    • 인증/인가 (Auth): 각기 독립 배포되는 MFE 환경에서 인증 토큰(Session/JWT)을 어떻게 공유하고 동기화하는가? 이 부분에서 실제로 고민했던 지점은 어디인가?
    • 브랜치 및 배포 전략: 여러 팀이 엮여 있는 MFE 구조에서 브랜치 전략(Git flow 등)을 어떻게 가져가야 혼란 없이 돌아가는가?
  • 모노레포와 빌드 최적화
    • 변경 감지 (Affected Build): 모노레포에서 특정 서비스나 패키지의 변경만 감지해서 빌드/배포 범위를 좁히는 전략(TurboRepo, Nx 등)을 실제로 적용해본 적이 있는가?
    • 라이브러리 설계 철학: 사내 공통 라이브러리를 만들 때, 코어의 견고함과 사용처의 유연함 사이에서 균형을 잡는 게 쉽지 않았다. 나는 이 줄다리기를 어떻게 해왔는가?

3. Infrastructure & DevOps

  • 배포 자동화와 속도
    • CI/CD vs 로컬 배포: 일반적인 CI/CD 대신 로컬에서 스테이징/운영으로 직접 배포하는 방식을 선택한 적이 있다면, 그 기술적·비즈니스적 근거는 무엇이었나? 빠르게 실패하고 빠르게 반복하겠다는 철학이 배경이었는가?
    • 버저닝 자동화: 배포 프로세스와 Semantic Versioning을 어떻게 엮어서 자동화했는가?
    • 브라우저 호환성 통제: 조직 차원에서 지원 브라우저 범위와 폴리필 정책을 어떻게 확정하고, 이를 강제하거나 검증하는 구조를 만들었는가?
  • 장애 대응 및 리로드 전략
    • 하이브리드 리로드: 웹뷰 앱이나 키오스크에서 새 버전을 배포했을 때, 사용자가 멈춤 없이 최신 상태로 갱신되게 하려면 어떤 전략(캐시 버스팅 + 네이티브 통신)이 필요한가?
    • 모바일 vs 키오스크: 일반 모바일 앱과 상시 켜져 있는 키오스크 앱의 리로드/업데이트 전략은 어떻게 다른가? 이 차이를 체감한 적이 있는가?
    • 롤백(Rollback): 브랜치 전략 기반의 롤백 외에, 더 즉각적이고 정교한 롤백 시스템을 고민해본 적이 있는가? 있다면 어디까지 생각해봤는가?

4. Troubleshooting & Performance

  • 난해한 버그 추적
    • 메모리 누수: 원인을 알 수 없는 메모리 누수나 스택 오버플로우가 터졌을 때, 힙 스냅샷 분석 말고 어떤 접근법으로 문제 지점을 좁혀나가는가?
    • 하드웨어 특화 장애: 키오스크처럼 물리적 장치(Address)와 통신해야 하는 환경에서 간헐적으로 터지는 장애를 어떻게 방어하고 처리해왔는가?
    • 소스맵 전략: 운영에서는 보안을 위해 소스맵을 끄고 스테이징에서는 켜야 할 때, 빌드 설정을 어떻게 분기했는가? Sentry 같은 에러 트래킹 도구와의 매핑은 어떻게 풀었는가?
  • 성능 최적화
    • 저사양 기기 최적화: 성능이 낮은 키오스크나 구형 기기에서 CSS/JS 애니메이션이 버벅거릴 때, GPU 가속 등을 활용해 어떻게 개선했는가?
    • 리소스 우선순위: 핵심 API 요청이나 리소스 로딩 타이밍을 앞당기기 위해 어떤 네트워크 기술(Early Hints, Preconnect 등)을 써봤는가?

5. Etc

  • UI 인터랙션: 모바일 웹에서 스와이프 시 바운스(Bounce) 효과를 구현하는 원리와, 그때 UX적으로 어떤 점을 신경 써야 하는가?
  • 네트워크/보안: CORS가 왜 생기는지 근본적인 원인부터 설명할 수 있는가? Proxy나 Header 설정 등 해결 방법, 그리고 환경 변수(env) 관리 전략은 어떻게 가져가고 있는가?
  • 마이그레이션: JS 프로젝트를 TS로 전환할 때 런타임 에러 방지, 타입 커버리지 설정 등 어디에 먼저 손을 대야 하는가? 나는 이 우선순위를 어떻게 정했는가?
  • Next.js Middleware: 미들웨어에서 처리할 수 있는 로직의 범위(Redirect, Rewrite, Header 조작, 간단한 인증)는 어디까지라고 생각하는가? 그 경계에 대해 나만의 기준이 있는가?