요즘 스스로에게 자주 묻는 질문들, 잘 대답할 수 있는지 확인하기 위한 글

1. Core Tech: React & Next.js Deep Dive

프레임워크와 라이브러리의 동작 원리를 깊이 이해하고 적재적소에 활용할 수 있는지 확인하는 질문들

  • 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 & Monorepo

대규모 시스템을 설계하고 운영해 본 경험을 묻는 질문들

  • 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)을 어떻게 자동화하여 연결했습니까?
    • 브라우저 호환성 통제: 조직 차원에서 지원 브라우저 범위(Target)와 폴리필 정책을 어떻게 확정하고, 이를 강제하거나 검증합니까?
  • 장애 대응 및 리로드 전략
    • 하이브리드 리로드: 웹뷰 기반 앱이나 키오스크에서 새 버전을 배포했을 때, 사용자가 멈춤 없이 갱신되도록 하는 전략(캐시 버스팅 + 네이티브 통신)은 무엇입니까?
    • 모바일 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 조작, 간단한 인증)는 어디까지라고 생각합니까?