[Web] 캐싱된 유저 CSS 파일 강제 재로딩(캐시방지처리) -1

[Web] 캐싱된 유저 CSS 파일 강제 재로딩(캐시방지처리) -1

 

웹페이지 개발하다 보면 공통 css파일들을 재배포할 때가 있다. 

그럴 때마다 개발자는 소스를 업데이트해서 배포하지만, 기존의 접속하던 유저의 캐시에는 이전 버전의 이미지가 남아있을 수 있다.

웹페이지에 화면을 추가하면서 공통 css를 수정하다 보면 적용이 안돼서 해당 화면에 처음 접속한 유저임에도 이전 이미지를 가지고 있어 뒤죽박죽으로 보일 때가 있는 것이다.

이를 해결하기 위해서

유저(클라이언트) 입장에서는 단순하게 캐시를 지우고 접속하면 된다.

F12 버튼을 눌러 크롬 개발자 도구를 띄우고 새로고침 버튼을 누르고 있으면

여기서 하는 게 제일 간편하고 빠르다.

 

근데 유저가 이 방법을 모른다면? 유저가 일일이 캐시 삭제를 할 수가 없다면?

그럼 호스트 측에서 강제로 css를 다시 다운로드할 수 있도록 알려줘야 한다. 

브라우저 캐쉬의 동작은 URL을 기준으로 기존에 동일한 URL에 요청한 적이 있었는지를 판단하게 된다.

 

그럼 우리는 파일명을 바꿔서 알려줄 수 있다.

<link rel="stylesheet" href="/resources/css/common.css" type="text/css">

이렇게 보통 link태그를 이용하여 css 파일을 헤더나 공통 resource 담는 부분에 붙일 텐데

<link rel="stylesheet" href="/resources/css/common2.css" type="text/css">

 

 

하지만 또 매번 파일명을 바꾸는 것은 비효율적이다.

따라서 이를 해결 할 간단한 방법이 쿼리 스트링을 추가하는 것이다.

<link rel="stylesheet" href="/resources/css/common.css?ver1.0.0" type="text/css">

<link rel="stylesheet" href="/resources/css/common.css?20210107" type="text/css">

이렇게 파일 참조 주소 뒤에 '?' 하나 붙이고 아무 쿼리 스트링이나 넣으면 새로운 주소가 되기 때문에

클라이언트 단의 브라우저에서는 다시 css파일을 다운로드하게 되는 것이다.

 

그럼 해당 소스가 업데이트가 일어나면 개발자가 일일이 쿼리 스트링을 수정해줘야 할까?

자동화를 하고 싶은 본능적인 욕구는 다음 포스팅에서 해소하도록 하자.