웹 프로그램 개발시 당연히 수많은 css, js 파일을 로드하게 된다.
이 파일들은 유지보수를 하면서 계속 수정되는데 문제는 브라우저에서 한번 불러온 css, js 파일을 캐시 해두는 탓에 사용자들에게 바로 적용이 되지 않는다.
이러한 문제를 해결하기 위한 방법이 몇가지 있다.
1. 캐시 사용금지
웹페이지의 헤더에 내용을 추가해서 캐시를 사용하지 않도록 설정할 수 있다.
html 문서의 <head>와 </head> 사이에 다음 내용을 추가한다.
<meta http-equiv="Pragma" content="no-cache"> <!-- ← HTTP 1.0에서 사용하던 방법 -->
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0"/>php나 asp 등의 다른 환경에서도 문법은 조금 다르지만 같은 정보를 입력하면 된다.
위의 방법은 모든 캐시를 사용하지 않기 때문에 페이지를 로드할 때마다 새로 파일을 불러오기 때문에 사용자에게 바로 적용이 된다는 장점은 있지만, 반대로 파일의 변경이 없을 때에도 무조건 계속 새로 불러오기 때문에 속도에서도 손해를 볼 뿐만 아니라 트래픽을 쓸데없이 낭비하게 된다는 단점이 있다.
2. 파일 로드 방법의 변경
이 방법은 파일이 변경될 때마다 파일 이름을 바꾸어서 브라우저가 새로 파일을 불러오게 하는 방식이다.
이렇게 하면 파일이 변경되었을 때에만 다시 불러오게 되므로 훨씬 효율적이다.
다만 실제로 파일의 이름을 바꾸는 것은 아니고, 파일의 url 뒤에 사용하지 않는 파라미터를 덧붙여 브라우저가 다른 파일명으로 인식하게 하는 것이다.
가장 깔끔하고 효율적인 방법이다.
예를 들면 a.js라는 파일을 불러올 때 원래는 <script src="a.js"></script> 이렇게 불러오게 되는데, 그 대신 <script src="a.js?20170214"></script> 이런 식으로 불러오는 것이다.
나는 주로 PHP를 사용하므로 css나 js 파일을 불러올 때 파일의 최종수정시간을 구하는 함수 filemtime를 이용해서 다음과 같이 사용하고 있다.
(filemtime 함수의 리턴값은 unixtime이다. 알아보기 쉽게 변경하려면 date 함수를 함께 이용한다. 참고)
echo '<script src="a.js?'.filemtime('a.js').'"></script>';
// html출력
<script src="a.js?1487009730"></script>
이렇게 하면 파일이 수정되었을 때에만 뒤에 붙는 파라미터가 변경되어 새로 파일을 불러오게 된다.
'프로그래밍 스터디 > 웹 관련' 카테고리의 다른 글
| iOS 웹 앱 설정하기 (0) | 2016.03.01 |
|---|---|
| 미생체 웹폰트 적용하기 (0) | 2016.02.17 |
