프론트엔드 개발 · 중급
웹 성능 최적화에서 HTTP 캐싱이 중요한 이유를 설명하고, `Cache-Control` 헤더의 주요 지시어(예: `max-age`, `no-cache`, `must-revalidate`)들이 각각 어떤 역할을 하는지 구체적인 시나리오와 함께 설명해 주세요.
힌트 · 브라우저 캐시와 프록시 캐시의 동작 원리, 재검증(revalidation) 과정을 중심으로 설명하세요.
HTTP 캐싱Cache-Controlmax-ageno-cachemust-revalidate
모범답안
HTTP 캐싱은 웹 성능 최적화에 매우 중요합니다. 웹 페이지의 리소스를 브라우저나 프록시 서버에 저장해두고, 다음에 동일한 리소스가 필요할 때 서버에 요청하지 않고 캐시된 데이터를 사용함으로써 응답 시간을 단축하고 서버 부하를 줄일 수 있습니다.
Cache-Control 헤더는 캐싱 정책을 정의하는 데 사용됩니다.
max-age: 리소스가 캐시된 후 유효한 최대 시간(초)을 지정합니다. 예를 들어max-age=3600은 1시간 동안 캐시를 사용하라는 의미입니다.no-cache: 리소스를 캐시해도 되지만, 항상 서버에 재검증(revalidation)을 받아야 합니다. 즉, 캐시된 데이터를 사용하기 전에 서버에 "이 데이터가 아직 유효한가요?"라고 물어보는 것입니다.must-revalidate:no-cache와 유사하지만, 캐시 서버가 오프라인 상태일 때 캐시된 데이터를 사용하는 것을 금지합니다. 서버에 연결할 수 없으면 에러를 반환해야 합니다. 예를 들어, 은행 웹사이트의 잔액 정보처럼 항상 최신 상태를 유지해야 하는 데이터에 유용합니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- 웹 페이지 렌더링 성능 최적화를 위해 Critical Rendering Path (CRP)를 이해하고 개선하는 것이 중요합니다. CRP의 주요 단계들을 설명하고, 이 경로를 단축하거나 최적화하기 위한 구체적인 방법들을 제시해 보세요.
- `<script>` 태그에 `async`와 `defer` 속성을 사용하는 것이 웹 페이지 성능에 어떤 영향을 미치는지 설명하고, 각각 어떤 상황에서 사용해야 하는지 구체적인 예시와 함께 비교 설명해 주세요.
- 웹 페이지에 많은 이미지가 사용될 때 발생할 수 있는 성능 문제를 해결하기 위한 이미지 최적화 전략들을 3가지 이상 설명하고, 각 전략이 어떤 원리로 성능을 개선하는지 설명해 주세요.
- Service Worker를 활용한 캐싱 전략이 HTTP 캐싱과 어떻게 다른지 설명하고, Service Worker를 사용하여 웹 애플리케이션의 오프라인 지원 및 성능 향상을 어떻게 구현할 수 있는지 구체적인 캐싱 전략(예: Cache-First, Network-First)을 들어 설명해 주세요.
- 웹 브라우저의 렌더링 과정에서 발생하는 Reflow(Layout)와 Repaint(Paint)의 개념을 설명하고, 이들이 웹 성능에 미치는 영향과 Reflow/Repaint를 최소화하기 위한 개발 실천 방법들을 제시해 주세요.
- 웹 페이지 로딩 시 렌더링을 차단하는 CSS 리소스로 인해 발생하는 성능 문제를 해결하기 위한 Critical CSS 기법에 대해 설명하고, 이 기법을 적용했을 때의 장점과 단점은 무엇인지 이야기해 주세요.