프론트엔드 개발 · 기초
브라우저 캐싱(Browser Caching)은 웹 성능 최적화에 어떻게 기여하나요? 그 원리에 대해 설명해 주세요.
힌트 · 브라우저 캐싱은 웹 서버에서 다운로드한 정적 리소스(이미지, CSS, JS 등)를 사용자의 로컬 저장소에 저장하여, 재방문 시 서버 요청 없이 빠르게 로드하는 기술입니다.
HTTP 헤더캐시 제어유효성 검사ETagLast-Modified
모범답안
브라우저 캐싱은 웹 성능 최적화에 아주 중요한 역할을 합니다. 웹 페이지를 처음 방문했을 때 서버에서 받아온 이미지, CSS, JavaScript 같은 정적 리소스를 브라우저가 로컬 저장소에 저장해두는 방식입니다.
다음에 같은 페이지를 방문할 때는 브라우저가 서버에 다시 요청하는 대신, 로컬에 저장된 리소스를 사용하기 때문에 훨씬 빠르게 페이지를 로드할 수 있습니다.
이때 HTTP 헤더가 중요한 역할을 합니다. Cache-Control, Expires 같은 헤더를 통해 브라우저에게 캐싱 정책을 알려줄 수 있습니다. 예를 들어, Cache-Control: max-age=3600이라고 설정하면 1시간 동안 캐시된 리소스를 사용하라는 의미입니다.
만약 캐시가 만료되었다면, 브라우저는 서버에 리소스의 유효성을 검사합니다. ETag나 Last-Modified 헤더를 사용하여 리소스가 변경되었는지 확인하고, 변경되지 않았다면 서버는 304 Not Modified 응답을 보내 브라우저가 캐시된 리소스를 계속 사용하도록 합니다. 이렇게 하면 불필요한 데이터 전송을 줄여 웹 성능을 향상시킬 수 있습니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- 웹 성능(Web Performance)이란 무엇이며, 사용자 경험 측면에서 왜 중요한가요?
- 웹 페이지 로딩 속도를 측정하는 대표적인 지표(Metrics)에는 어떤 것들이 있으며, 각각 무엇을 의미하나요? (예: FCP, LCP)
- CDN(Content Delivery Network)은 웹 성능 향상에 어떤 역할을 하며, 어떤 상황에서 주로 사용되나요?
- 이미지 최적화(Image Optimization)를 위해 어떤 방법들을 사용할 수 있으며, 각각의 장점은 무엇인가요?
- CSS와 JavaScript 파일을 압축(Minification)하고 번들링(Bundling)하는 것이 웹 성능에 어떤 이점을 주나요?