Categories: PHP

[PHP] html 브라우저 캐시 초기화 방법

HTML 또는 PHP 코드로 브라우저 캐시를 초기화 할 수 있습니다.

사이트 방문자가 이전의 css, js 코드 또는 이미지를 사용할 경우 최신으로 반영된 사이트 콘텐츠를 반영하지 못할 수 있습니다. 따라서 중요한 페이지 업데이트가 있거나 자주 변경해주어야 하는 특정 페이지에 해당 내용을 적용하여 사용자가 번거롭게 브라우저 캐시를 지울 필요가 없게 됩니다.

주의해야 할 것은 캐시 초기화를 자주 하게 되면 서버에서 요청되는 리소스가 그만큼 늘어나기 때문에 정말 필요할 때만 사용해야 한다는 것입니다.

 

HTML 코드로 브라우저 캐시 초기화


아래 내용을 HTML 코드의 “<head>” 태그 내에 삽입합니다.

<meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT">
# 위의 명시된 날짜 이후가 되면 페이지가 캐싱되지 않습니다.
(따라서 위와 같은 날짜로 지정할 경우 페이지는 지속적으로 캐싱되지 않습니다.)
<meta http-equiv="Expires" content="-1">
# 캐시된 페이지가 만료되어 삭제되는 시간을 정의합니다. 특별한 경우가 아니면 -1로 설정합니다.
<meta http-equiv="Pragma" content="no-cache">
# 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.0)
<meta http-equiv="Cache-Control" content="no-cache">
# 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.1)

 

PHP 코드로 브라우저 캐시 초기화


아래 내용을 PHP 코드 내에 삽입합니다. HTTP 헤더에 위와 동일한 내용을 추가하는 내용입니다.

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

 

.htaccess 규칙 설정


서버 파일을 수정할 수 있다면 서버 내에 .htaccess (웹 개발 방법에 따라 이 파일이 없을 수 있습니다.) 파일을 수정하여 서버 접근에 대한 캐시 설정을 강제 조정할 수도 있습니다. 아래 내용을 추가/수정하여 관련된 파일의 메타 데이터를 입력한 뒤 해당 파일의 캐시 유효 기간을 “access plus * ###” 와 같이 설정할 수 있습니다. 예를 들어 text/css “access plus 3 hour” 이라면, css 파일이 3시간이 지난 경우 캐시 데이터를 삭제하고 다시 파일을 로드한다는 의미입니다.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 3 hour"
ExpiresByType image/gif "access plus 5 month"
ExpiresByType image/png "access plus 4 month"
ExpiresByType image/jpg "access plus 4 month"
ExpiresByType image/jpeg "access plus 4 month"
ExpiresByType text/x-component "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType text/css "access plus 3 month"
ExpiresByType application/javascript "access plus 3 month"
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>
JooTC

안녕하세요. 테크놀로지에 관심이 많은 블로거입니다.

View Comments

  • 도움되는 정보 감사드립니다.
    문의드릴게 있어서 댓글 남겨요.
    정의시 날짜는 어떻게 정의해야는건가요?
    현재일을 등록하면 현재일기준으로 기존 캐시가 지워지는 건가요?

    • 안녕하세요. 블로그에 방문해주셔서 감사합니다.
      '해당 코드에 명시된 날짜 이후'가 되면 페이지가 캐싱되지 않습니다.
      따라서 위와 같이 1990년도로 설정했다면 페이지는 지속적으로 캐싱되지 않습니다.

Recent Posts

[iOS] Xcode ‘You do not have required contracts to perform an operation’ 해결

Xcode에서 iOS 애플리케이션을 빌드(Archive)하고 App Store Connect에 앱을 업로드하는 도중, 아래와 같은 에러가 발생하면서 더…

1개월 ago

[안드로이드] INSTALL_FAILED_INSUFFICIENT_STORAGE 해결

INSTALL_FAILED_INSUFFICIENT_STORAGE 문제 안드로이드 스튜디오에서 에뮬레이터를 실행하고 개발중인 애플리케이션을 실행하려 하면 로그 창에 아래와 같이 표시되면서…

7개월 ago

Zalgo 텍스트와 이를 방지하는 방법

인터넷 커뮤니티 사이트에서 게시글이나 댓글에 간혹 장난을 목적으로 작성된 특이한 글자를 볼 수 있습니다. 위…

9개월 ago

리눅스 kill, killall 명령어 – 특정 프로세스 종료하기

리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…

9개월 ago

JavaScript typeof null이 ‘object’인 이유

JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…

9개월 ago

Mocha Error: Resolution method is overspecified. 해결 방법

NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…

9개월 ago