CSS바꿨는데 왜 적용이 안되지?
테마를 적용해 깃허브 블로그로 올리고 이리저리 커스터마이징을 시도해보는데, 로컬에서 jekyll serve로 서버를 실행하였을 때 잘 보이던 갱신사항들이 제대로 적용되지 않은 현상을 자주 관찰하였다. 평소 프론트 작업하듯 개발자도구 열고 “캐시 비우기 및 강력 새로고침” 을 통해서 해결하려 했지만 어째 블로그 페이지 이동때마다 과거 CSS / JS의 망령이 되살아나는 것이다…!
하지만 해답은 가까운 곳에 있었으니,
원인은 브라우저 캐시 (Browser Cache)
크롬 등의 브라우저를 사용하여 사이트를 접속하면 각종 CSS / JS 나 이미지, 동영상 등의 정적 리소스들을 저장하게 되는데, 이를 통하여 빠른 페이지 로딩은 물론 대역폭 절감 등의 효과를 누릴 수가 있다. 여기서, 이미 저장된 녀석들을 계속 활용함으로써 내가 바꾼 갱신사항들이 무시되고 이전 녀석들이 계속 보이게 된 것이다. 간단하게 보면 캐시를 지우면 되지만, 블로그를 보는 사람들에게 업데이트 되었으니 캐시 지우고 보세요, 하고 다닐 수도 없는 노릇이다. 어떻게 이 망령 녀석을 해결할 수 있을까?
Cache Busting!
우선은 Cache-Control이란 개념이 있다. HTTP/1.1부터 추가되었다고 하며, 캐시 정책을 컨트롤할 수 있다. HTTP 요청에서 Cache-Control 헤더 값에 max-age를 짧게 주거나 no-cache 등의 값을 줌으로써 이 현상을 막을 수 있지만, 이는 서버에서부터 컨트롤 해주어야 하는 요소이기에.. 깃허브 블로그에는 적용할 수가 없다..ㅠㅠ
그렇다면 방법은 우선,
1. <meta> 태그
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
골라 골라~
여기서 골라 써서 첨가해 두면 된다. 허나, 브라우저에 따라 적용이 안되는 경우도 있고 웹 프록시에 따라 메타 태그를 덮어쓰거나 지울 수도 있고.. 완전한 방법은 아니다.
그래서 또 많이 쓰는 방법인즉,
2. Query String
<link rel="stylesheet" href="../assets/css/main.css?version=2" />
<script src="../assets/js/main.js?version=2"></script>
CSS / JS 에 대해 많이 쓰는 방법으로, 파일명 뒤에 ?로 시작하는 쿼리 스트링을 붙이면 새로운 파일로 인식하여 캐싱이 이뤄지지 않는다. 여기 블로그에서도 이 방법을 사용하였다. 명칭은, 자유롭게 하되 변경이 있을 때만 수정해주면 된다. 일반적으로 version을 붙여 관리하거나, 혹은 날짜/시간 timestamp 값을 많이 사용한다.
여기서는 jekyll 기반 테마이기에, site.time을 사용하였다. jekyll serve가 실행된 타임이 표시될 것이다.
<link rel="icon" href="/favicon.ico?v={ {site.time | date:'%s'} }" type="image/x-icon">
주의 : 중괄호 사이 띄어쓰기 제거하세요..!
파비콘, CSS, JS를 참조하는 곳에 모두 적용해주었다. 이제 안심이다..
사실…
쿼리스트링도 썩 좋은 방법은 아니라고 한다. 여전히 일부 프록시와 CDN에서는 제약을 받는다. 다른 방법을 또 찾자면,
- 파일 경로
- ex) ../v2/asdf.css
- 파일명
- ex) ../asdf-v2.css
을 업데이트 시마다 바꿔주는 것이다. 어마어마하게 번거로울 것이다. 하지만, 이 또한 서버사이드 렌더링으로 극복할 수 있으니, 이는 차후에 이야기해보도록 해야겠다.