HTTP 통신에서 캐싱 활용

HTTP 캐싱을 활용하기 위해 다음과 같은 값들을 설정할 수 있습니다:

1. 캐시 제어 헤더 (Cache-Control header): 이 헤더를 사용하여 캐시 동작을 제어할 수 있습니다. 예를 들어, max-age 값을 설정하여 캐시가 유효한 시간을 정할 수 있습니다. 또한, no-cache, no-store, must-revalidate 등의 값을 설정하여 캐시를 사용하지 않거나 갱신해야 하는지 여부를 제어할 수 있습니다.
2. ETag: 이 값은 캐시된 리소스가 원본과 같은지 확인하는 데 사용됩니다. 원본이 변경되면 ETag 값도 변경되므로, 캐시된 리소스가 더 이상 유효하지 않은 경우 서버로부터 새로운 리소스를 가져와야 합니다.
3. Last-Modified: 이 값은 리소스가 마지막으로 수정된 시간을 나타냅니다. 캐시된 리소스가 원본보다 오래된 경우, 서버로부터 새로운 리소스를 가져와야 합니다.
4. Expires: 이 값은 캐시된 리소스가 만료되는 시간을 나타냅니다. Expires 헤더는 캐시된 리소스의 만료 시간을 정확하게 나타내지 않으므로, 보통 Cache-Control 헤더의 max-age 값을 함께 사용합니다.

이러한 값들을 적절하게 설정하여 캐싱을 활용하면, 웹 페이지의 로딩 속도를 개선할 수 있습니다. 캐시된 리소스를 다시 다운로드하지 않고도 웹 페이지를 빠르게 로딩할 수 있기 때문입니다.

 

JavaScript에서 HTTP 통신을 할 때도 캐싱을 활용할 수 있습니다. 브라우저는 HTTP 캐시를 자동으로 관리하며, 캐시된 리소스를 다시 다운로드하지 않고 사용할 수 있습니다.

아래는 JavaScript에서 HTTP 캐싱을 활용하는 간단한 예제입니다:

 

// 캐시된 리소스 사용
fetch('/example.json', {cache: 'default'})
  .then(response => response.json())
  .then(data => console.log(data));

// 캐시된 리소스 갱신
fetch('/example.json', {cache: 'reload'})
  .then(response => response.json())
  .then(data => console.log(data));

 

위 예제에서, fetch 함수의 두 번째 인자로 cache 옵션을 설정하여 캐싱 동작을 제어할 수 있습니다. cache 옵션은 다음과 같은 값을 가질 수 있습니다:

• default: 캐시된 리소스를 사용하고, 캐시가 없는 경우 서버로부터 다운로드합니다. 이 옵션이 기본값입니다.
• no-store: 캐시를 사용하지 않고, 서버로부터 항상 다운로드합니다.
• reload: 캐시를 무시하고, 서버로부터 다운로드합니다.
• no-cache: 캐시를 사용하지만, 캐시된 리소스가 유효한지 서버에 확인하고 갱신합니다.
• force-cache: 캐시된 리소스를 사용하고, 캐시가 없는 경우 서버로부터 다운로드하지 않습니다.

위 예제에서는 cache 옵션으로 default 값을 설정하여 캐시된 리소스를 사용합니다. 또한, cache 옵션으로 reload 값을 설정하여 캐시된 리소스를 무시하고 서버로부터 갱신된 리소스를 다운로드합니다. 이렇게 캐싱을 활용하여 HTTP 통신을 최적화할 수 있습니다.

 

출처 - mdn http 통신