브라우저 캐싱은 웹 애플리케이션의 성능을 향상시키기 위해 중요한 역할을 합니다. 캐싱을 통해 반복적인 리소스 요청을 피하고, 더 빠른 응답 시간과 높은 대역폭 이용률을 얻을 수 있습니다. 이번 글에서는 자바스크립트와 Nginx를 사용하여 브라우저 캐싱을 제어하는 방법에 대해 알아보겠습니다.

자바스크립트를 사용한 캐싱 제어

자바스크립트를 사용하여 브라우저의 캐싱을 컨트롤할 수 있습니다. Cache-Control 헤더를 이용하면 리소스의 캐싱 여부와 유효 기간을 설정할 수 있습니다. 이를 통해 브라우저가 리소스를 캐싱하고 만료되기 전까지 재사용할 수 있습니다.

// 캐싱을 활성화하고 1시간 동안 유효하게 설정
response.setHeader('Cache-Control', 'public, max-age=3600');

// 캐싱을 비활성화
response.setHeader('Cache-Control', 'no-store');

위의 예제에서는 Cache-Control 헤더를 사용하여 캐싱을 활성화하고 유효 기간을 1시간으로 설정하는 방법과, 캐싱을 비활성화하는 방법을 보여줍니다.

Nginx를 사용한 캐싱 제어

Nginx는 웹 서버로 널리 사용되며, 캐싱 기능을 강력하게 지원합니다. Nginx의 proxy_cache 모듈을 사용하여 캐싱을 설정할 수 있으며, proxy_cache_valid 지시어를 사용하여 캐시의 유효 기간을 설정할 수 있습니다.

http {
  # 캐시 디렉토리 설정
  proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m max_size=10g inactive=60m;

  server {
    listen 80;
    server_name example.com;
  
    # 캐싱 활성화
    location / {
      proxy_pass http://backend;
      proxy_cache my_cache;
      proxy_cache_valid 200 302 10m; # 200과 302 응답을 10분 동안 캐싱
      proxy_cache_valid 404      1m; # 404 응답을 1분 동안 캐싱
    }
  }
}

위의 예제에서는 Nginx의 proxy_cache_path를 사용하여 캐시 디렉토리를 설정하고, proxy_cache 지시어를 사용하여 캐시를 활성화합니다. 그리고 proxy_cache_valid 지시어를 사용하여 캐시의 유효 기간을 설정합니다.

결론

자바스크립트와 Nginx를 사용하여 브라우저의 캐싱을 제어할 수 있습니다. 캐싱을 효과적으로 활용하면 웹 애플리케이션의 성능을 크게 향상시킬 수 있으므로, 적절하게 캐싱을 설정하는 것이 중요합니다. 자바스크립트와 Nginx의 강력한 기능을 활용하여 브라우저 캐싱을 제어해 보세요.

유용한 링크:

• Nginx 공식 문서
• MDN Web Docs - 캐싱 소개

#Tech #WebDevelopment #Caching