웹 애플리케이션을 개발할 때, 브라우저 캐시를 적절히 관리하는 것은 매우 중요합니다. 브라우저 캐시는 이미지, 스타일시트, 자바스크립트 파일 등을 저장하여 웹 페이지의 로딩 속도를 향상시키는 역할을 합니다. Express.js에서는 다양한 방법을 통해 브라우저 캐시를 관리할 수 있습니다.
정적 파일 제공에 캐시 헤더 추가하기
Express.js에서는 정적 파일을 제공하는 미들웨어인 express.static을 사용할 수 있습니다. 이 미들웨어를 이용하면, 원하는 디렉토리에 있는 파일들을 정적으로 제공할 수 있습니다.
const express = require('express');
const app = express();
app.use(express.static('public'));
위의 예제에서 public 디렉토리에 있는 파일들이 정적으로 제공됩니다. 이때, 브라우저 캐시를 효과적으로 관리하기 위해, 캐시 헤더를 추가할 수 있습니다.
app.use(express.static('public', { maxAge: 3600000 }); // 캐시 유효 기간을 1시간으로 설정
위의 예제에서 maxAge 옵션을 사용하여 캐시의 유효 기간을 설정하였습니다. 이를 통해 브라우저는 해당 파일을 최대 1시간 동안 캐시에 저장하고, 이후에는 다시 서버에서 해당 파일을 가져오도록 합니다.
ETag를 이용한 캐시 검증
ETag(Entitiy Tag)는 파일의 내용이나 메타데이터를 고유하게 식별하는 문자열입니다. Express.js에서는 etag 옵션을 사용하여 ETag를 생성하고, 클라이언트가 해당 ETag를 이용하여 캐시를 검증할 수 있습니다.
const express = require('express');
const app = express();
app.set('etag', true);
위의 예제에서 app.set('etag', true)를 추가하여 ETag를 사용할 수 있도록 설정하였습니다.
캐시 무효화하기
브라우저 캐시는 파일의 내용이 변경되지 않는한 계속해서 사용됩니다. 따라서, 파일을 변경한 후에는 이전에 캐시된 내용을 제대로 반영하기 위해 캐시를 무효화해야 합니다. Express.js에서는 다양한 방법을 통해 캐시를 무효화할 수 있습니다.
파일명 변경하기
파일명을 변경하면 브라우저는 변경된 파일을 새로운 URL로 인식하고, 이전에 캐시된 내용을 사용하지 않게 됩니다.
쿼리 문자열 사용하기
URL에 쿼리 문자열을 추가하여 파일의 버전을 표시할 수 있습니다. 파일이 변경될 때마다 쿼리 문자열을 업데이트하면, 브라우저는 URL이 달라진 것으로 인식하고, 이전에 캐시된 내용을 사용하지 않게 됩니다.
<script src="script.js?v=1.0"></script>
위의 예제에서 v=1.0은 파일의 버전을 나타내는 쿼리 문자열입니다.
결론
Express.js에서는 정적 파일 제공과 ETag를 이용한 캐시 검증 등 다양한 방법을 통해 브라우저 캐시를 관리할 수 있습니다. 웹 애플리케이션을 개발할 때, 적절한 캐시 관리를 통해 사용자 경험을 향상시키는 것을 목표로 해야합니다.
참고 자료