크롬 강력새로고침 하지 않아도 css, js 파일 캐싱하기

15년 동안 웹 개발을 해오면서 저를 가장 괴롭혔던 문제 중 하나는 바로 JS/CSS 파일 업데이트 후 클라이언트의 강력 새로고침이었습니다. 아시죠? 코드 한 줄 바꾸고 배포했는데, 사용자들은 여전히 낡은 스타일시트와 스크립트를 보고 있는 그 답답함! 🤬

"캐시 삭제 좀 해주세요!", "강력 새로고침(Ctrl+Shift+R) 해주세요!"를 외치는 것도 하루 이틀... 사용자 경험을 해치는 주범이라는 생각에 마음은 늘 무거웠습니다. 😔

수많은 밤을 구글링하며, stackoverflow를 뒤적이며, 온갖 방법을 시도해 봤습니다. Cache-Control 헤더 조정, URL 쿼리 스트링 활용, 심지어 Service Worker까지... 웬만한 해결책은 다 적용해봤지만, 완벽하게 문제를 해결하지 못했습니다. 😭

그러던 어느 날, 마치 운명처럼 **"파일 이름에 해시(Hash) 또는 버전 정보 추가"**라는 방법을 접하게 되었습니다. (이미 알고 계셨던 분들도 있겠지만, 저에게는 혁명과 같았습니다! 😅)

원리는 간단했습니다.

빌드 과정에서 JS/CSS 파일 이름에 내용 기반의 해시 값 또는 버전 정보를 추가합니다. (예: style.css -> style.abcdef1234.css 또는 style.v1.css)
파일 내용이 변경되면 해시 값 또는 버전 정보도 변경됩니다.
브라우저는 변경된 파일 이름을 새로운 파일로 인식하고 자동으로 업데이트된 파일을 다운로드합니다.
결과는 놀라웠습니다!

 

 

 

 

웹사이트 루트 폴더에 있는 web.config 파일을 수정해서 이 스트링을 추가하면 끝!!!!

이렇게 하면 IIS가 정적 파일(JS, CSS 등)에 대해 캐싱을 사용하지 않도록 설정

-------------------------------------------------------------

<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="DisableCache" />
        </staticContent>
    </system.webServer>
</configuration>

-------------------------------------------------------------