면접 예상 질문

개념 설명

프론트엔드 실무에서 필수적으로 알아야 할 브라우저 동작, 성능 최적화, 웹 API 활용과 관련된 핵심 개념들의 실무 적용과 면접 대비.

핵심 포인트

• 브라우저 렌더링: HTML → DOM, CSS → CSSOM → 렌더 트리 → 레이아웃 → 페인트 → 컴포지트
• Critical Rendering Path: 초기 렌더링 성능을 결정하는 핵심 경로 최적화
• Reflow/Repaint: 레이아웃 변경(Reflow)이 스타일 변경(Repaint)보다 비용이 높음
• 웹 성능 지표: FCP, LCP, FID, CLS 등 Core Web Vitals 이해와 최적화
• CORS: 동일 출처 정책(SOP)과 Cross-Origin Resource Sharing 메커니즘
• 스토리지: localStorage(영구), sessionStorage(세션), Cookie(서버 통신), IndexedDB(대용량)

예시 코드

// Critical Rendering Path 최적화
// 1. CSS 최적화 - Critical CSS 인라인
<style>
  /* above-the-fold critical styles */
  .hero { height: 100vh; background: #f0f0f0; }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">