자바스크립트 웹 애플리케이션에서 Nginx를 사용한 브라우저 캐시 제어 방법

11 Oct 2023

Nginx

웹 애플리케이션을 개발할 때, 캐싱은 성능 향상과 사용자 경험 개선을 위해 중요한 요소입니다. Nginx는 높은 성능과 확장성을 제공하는 웹 서버로, 캐시를 효과적으로 제어할 수 있는 기능을 제공합니다. 이 글에서는 자바스크립트 웹 애플리케이션에서 Nginx를 사용하여 브라우저 캐시를 효과적으로 제어하는 방법을 알아보겠습니다.

1. 캐시 제어를 위한 Nginx 설정

Nginx에서 캐시를 사용하려면, 반드시 Nginx의 설정 파일에 캐시 관련 디렉티브를 추가해야 합니다. 아래는 간단한 예제입니다.

http {
  # 캐시 폴더 설정
  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m;

  server {
    ...

    location / {
      # 캐싱 설정
      proxy_cache my_cache;
      proxy_cache_valid 200 302 1d;
      proxy_cache_valid 404 1m;

      proxy_pass http://backend;
    }
  }
}

위 예제에서는 proxy_cache_path 디렉티브를 사용하여 캐시 폴더를 설정하고, proxy_cache 디렉티브로 실제로 캐시를 사용할지를 결정합니다. proxy_cache_valid 디렉티브는 캐시의 유효 기간을 설정하는데 사용됩니다.

2. 자바스크립트를 통한 캐시 제어

Nginx를 사용한 캐시 제어는 자바스크립트를 통해 좀 더 유연하게 조작할 수 있습니다. 자바스크립트에서는 HTTP 헤더를 사용하여 캐시 동작을 제어할 수 있습니다. 예를 들어, 아래 코드는 캐시를 무효화하는 예제입니다.

// 캐시 무효화
document.addEventListener('DOMContentLoaded', function() {
  fetch('/data.json', { cache: 'no-store' })
    .then(function(response) {
      // 캐시된 데이터 보다 실제 서버 데이터를 사용
      return response.json();
    })
    .then(function(data) {
      // 데이터 처리
    });
});

위 코드에서는 fetch 함수의 cache 옵션을 'no-store'로 설정하여 캐시를 무효화하고 실제 서버 데이터를 사용합니다.

3. 캐시 제어 시 고려사항

캐시를 제어할 때 몇 가지 고려사항이 있습니다.

개발자 도구를 사용하여 캐시 확인: 브라우저의 개발자 도구에서 캐시 동작을 확인할 수 있습니다. 캐시가 예상대로 동작하지 않을 경우, 개발자 도구를 통해 문제점을 찾고 수정해야 합니다.
캐시 유효기간 설정: proxy_cache_valid 디렉티브를 사용하여 캐시의 유효 기간을 설정해야 합니다. 필요에 따라 다른 상태 코드에 대해 다른 유효 기간을 설정할 수도 있습니다.
캐시 키 설정: proxy_cache_key 디렉티브를 사용하여 캐시 키를 설정할 수 있습니다. 캐시 키는 요청 URL과 쿼리 파라미터 등을 고려하여 고유한 값을 갖도록 설정해야 합니다.

마무리

이 글에서는 자바스크립트 웹 애플리케이션에서 Nginx를 사용하여 브라우저 캐시를 제어하는 방법을 알아보았습니다. Nginx의 설정을 통해 캐시를 제어하고, 자바스크립트를 통해 캐시를 유연하게 조작할 수 있습니다. 캐시를 효과적으로 제어하여 웹 애플리케이션의 성능을 개선하고 사용자 경험을 향상시키는데 도움이 되길 바랍니다.

태그: 자바스크립트, Nginx, 캐시, 웹 애플리케이션