패스잇
프론트엔드 개발 · 중급

Service Worker를 활용한 캐싱 전략이 HTTP 캐싱과 어떻게 다른지 설명하고, Service Worker를 사용하여 웹 애플리케이션의 오프라인 지원 및 성능 향상을 어떻게 구현할 수 있는지 구체적인 캐싱 전략(예: Cache-First, Network-First)을 들어 설명해 주세요.

힌트 · Service Worker의 생명주기, Cache Storage API, 다양한 캐싱 전략의 동작 방식을 설명하세요.

Service WorkerHTTP 캐싱Cache-FirstNetwork-First오프라인 지원

모범답안

Service Worker를 활용한 캐싱은 HTTP 캐싱과 달리 브라우저가 아닌 JavaScript 코드(Service Worker)를 통해 캐싱 전략을 제어한다는 점이 가장 큰 차이점입니다. HTTP 캐싱은 브라우저가 HTTP 헤더를 기반으로 자동으로 캐싱하지만, Service Worker는 개발자가 직접 캐싱 로직을 정의할 수 있어 훨씬 유연합니다.

예를 들어, Cache-First 전략은 캐시에 있는 리소스를 먼저 제공하고, 없으면 네트워크에서 가져와 캐시에 저장합니다. 반대로 Network-First 전략은 네트워크 연결이 가능하면 네트워크에서 가져오고, 실패하면 캐시에서 제공합니다.

Service Worker를 사용하면 웹 애플리케이션의 오프라인 지원을 강화하고, 캐싱 전략을 통해 초기 로딩 속도를 개선하여 사용자 경험을 향상시킬 수 있습니다. Cache Storage API를 사용하여 캐시를 관리하고, 필요에 따라 동적으로 캐시를 업데이트할 수 있습니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 웹 성능 최적화 면접 질문

← 웹 성능 최적화 면접 질문 전체 보기