프론트엔드 개발 · 중급
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 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- `<script>` 태그에 `async`와 `defer` 속성을 사용하는 것이 웹 페이지 성능에 어떤 영향을 미치는지 설명하고, 각각 어떤 상황에서 사용해야 하는지 구체적인 예시와 함께 비교 설명해 주세요.
- 웹 페이지에 많은 이미지가 사용될 때 발생할 수 있는 성능 문제를 해결하기 위한 이미지 최적화 전략들을 3가지 이상 설명하고, 각 전략이 어떤 원리로 성능을 개선하는지 설명해 주세요.
- 웹 성능 최적화에서 HTTP 캐싱이 중요한 이유를 설명하고, `Cache-Control` 헤더의 주요 지시어(예: `max-age`, `no-cache`, `must-revalidate`)들이 각각 어떤 역할을 하는지 구체적인 시나리오와 함께 설명해 주세요.
- 웹 브라우저의 렌더링 과정에서 발생하는 Reflow(Layout)와 Repaint(Paint)의 개념을 설명하고, 이들이 웹 성능에 미치는 영향과 Reflow/Repaint를 최소화하기 위한 개발 실천 방법들을 제시해 주세요.
- 웹 페이지 로딩 시 렌더링을 차단하는 CSS 리소스로 인해 발생하는 성능 문제를 해결하기 위한 Critical CSS 기법에 대해 설명하고, 이 기법을 적용했을 때의 장점과 단점은 무엇인지 이야기해 주세요.
- 대규모 웹 애플리케이션에서 Critical Rendering Path(CRP)를 최적화하기 위한 고급 전략에는 어떤 것들이 있으며, 각 전략이 렌더링 성능에 미치는 영향을 구체적인 예시와 함께 설명해주세요. 특히, CSSOM과 DOM 트리의 병합 및 렌더 트리 생성 과정에서 발생하는 병목 현상을 어떻게 식별하고 해결할 수 있을까요?