브라우저 캐시를 삭제하는 세가지 방법
태어나서 처음으로 오직 HTML!과 javascript!! ( + jQueryㅎ)로만 프론트엔드 개발을 해야 하는 프로젝트에 투입되었다.
몇년간 리액트, Next.js 쓰다가 갑자기 HTML에 자바스크립트만 끼얹어서 화면을 짜내려니 정말 답답해서 미칠 노릇이었다.
굳이 비유하자면 리모델링 싹 끝낸 집에서 보일러 따땃~~~~하게 틀고 살다가 느닷없이 맨몸으로 무인도에 버려져서 나뭇가지 주워다가 비벼대는 기분…기사님이 운전해주시는 고오급 세단 타고 다니다가 갑자기 내가 짚신 신고 달구지 끄는 기분…
하지만 프로젝트 막바지에 마주친 브라우저 캐시 문제에 비하면 이 기술 스택의 역행에서 비롯된 답답함은 그냥 하룻밤 우중캠핑한것처럼 찝찝하고 불편하고도 거추장스럽지만 그래도 나름 좋은 추억으로 포장 가능한 수준이었다.
버그 개선 후 배포를 했는데도 브라우저가 이전 버전을 띄워주니 기껏 고생하고 나서 듣는 소리가 “아직도 그대로인데요???” 일때의 그 개빡침이란…!
물론 빡치는건 둘째고, 사용자들에게 “업데이트 후에는 브라우저 설정탭에 들어가셔서 캐시 삭제 후 접속해주세요^^” 라고 할 수 없으니 개선이 반드시 필요한 부분이었다. 인생의 참스승 구글에서 검색하여 나온 글 중에서 엄선하여 하나씩 적용해보았다.
첫번째 시도: HTML 내에 메타 태그 삽입
최초로 시도해본 것은 최다 & 최상단 검색 결과로 등장한 메타 태그 삽입이었다. 아래와 같이 캐시 컨트롤에 관련된 메타 태그를 HTML 파일에 추가하면 해결된다고 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- clear cache -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>여기서 끝났다면 이 글을 쓸 생각도 안 했을 것이다. 결과는 당연히 실패^^!
두번째 시도: Nginx 컨피그 수정
더 내려가보니 Nginx 컨피그 옵션 중에도 캐시 컨트롤에 관련된 항목이 있다고 한다. 간절한 마음으로 아래와 같이 컨피그를 수정한 뒤 배포해봤다.
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
# clear cache
expires -1;
}이럴수가. 먹히는 것 같길래 운영계까지 배포했는데 놀랍게도 운영계에서는 전혀 소용없었다. 테스트 단계에서 성공했던 것조차 사실은 너무나도 간절했던 뇌가 만들어낸 환상이었나 싶을 정도로 브라우저는 배포 전 소스만을 보여주고 있었다.
세번째 시도: 백엔드에서 코드 추가
빡침과 절박함이 질척하게 얽힌 상태로 검색창을 더 뒤져봤다. 자바에서 캐시 컨트롤을 하는 방법이 등장했다. 어플리케이션 접속 시 백엔드에서 최초로 호출되는 사용자 인증 API의 첫줄에 아래와 같이 추가해봤다.
public void certificateUser(HttpServletRequest request, HttpservletResponse response {
// clear cache
response.setHeader("Cache-Control", "no-cache, no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
}세번째 시도 후 2주일 정도 지났는데, 아직까지는 내가 의도한 대로 브라우저 캐시를 잘 날리고 있는 것 같다. 더 이상 코드 버그 이외의 문제로 고통받지 않기를 바라며 포스트를 마친다.
감귤닷컴 