[CSS/js] 수정/배포로 파일 업데이트 시, 캐시 방지 & 강력 새로고침(캐시초기화)

홈페이지를 만들고 업데이트 할 때, 기존에 있는 캐시 때문에 수정사항이 반영이 안 되는 경우가 생각보다 많습니다.

솔직히 css 파일 뿐 아니라 js 파일도 수시로 업데이트하고 자잘한 오타로 인해 수정하게 됩니다.

그런데 캐시파일 때문에 모처럼의 수정이 소비자의 화면에 반영되지 않는다면? 뿍침

 

때문에 파일 경로에 임의 쿼리스트링(단순 인자)를 추가합니다.

쿼리스트링 추가이기 때문에 실제 파일경로나 파일명을 바꿀 필요는 없습니다.

이렇게 추가된 쿼리스트링 명만 바꿔도 다른 파일로 인식하기 때문에 서버 관리하기도 편합니다.

여기서 쿼리스트링은 파일경로와 같이 영문과 숫자로 적어주세요.

css	<link rel="stylesheet" type="text/css" href="파일의 파일 경로?쿼리스트링"> ex) <link rel="stylesheet" type="text/css" href="/common/css/common.css?v=202005301201">
js	<script language="javascript" type="text/javascript" src="파일의 파일 경로?쿼리스트링"></script> ex) <script language="javascript" type="text/javascript" src="/common/js/common.js?v=202005301201"></script>
import	@import url('파일의 파일 경로?쿼리스트링') ex) @import url('/common/css/common.css?v=202005301201')

이렇게 뒤에 쿼리스트링을 추가해놓고 나중에 버전이 달라졌을 때마다 값을 바꾸면

같은 경로의 파일임에도 다른 파일로 교체되었다 인식하여 파일을 새로 다운받습니다.

그럼 캐시로 인한 걱정도 끝!

 

 

Tip

새로 인식된 파일, 즉 변환하여 적용된 파일은 캐시파일로 바로 인식되지 않습니다.

어느정도의 시간이 지난 뒤, 다른 탭 혹은 다른 창에서 틀어보면 새로이 인식된 변환 파일도 캐시파일로 들어가있을 겁니다!

 

Tip2

이용자 측면에서 해당 사이트의 캐시만 지우고 싶다면(캐시 초기화) 강력 새로 고침이 있습니다.

	Window	Mac
Chrome	Ctrl + Shift + F5 Ctrl + F5	Command + Shift + F5 Command + F5
IE	Ctrl + F5	Command + F5