2023-08-24 TIL

browser caching

브라우저는 이미 다운로드 받은 에셋들을 트래픽 절약, 로딩 속도 개선 등을 목적으로 disk나 memory에 캐싱하게 된다. Chromium을 사용하는 경우 개발자 도구의 Network 탭에 있는 Size 열에서 캐싱 여부를 알 수 있다. 캐싱된 목록 또한 개발자 도구에서 볼 수 있다고 하는데 왜 그런지는 모르겠지만 잘 안 보이는 것 같다.

헌데 개발하는 과정에서는 이 캐싱 때문에 하루를 날려버리거나 (캐싱이 걸려있다는 사실을 모르고 작업하면 변경 사항이 적용되지 않기 때문에) 여러 골치 아픈 상황이 생길 수 있다. 나도 이런게 있다는 것은 알고 있지만 막상 css가 꼬이는 것 같은 상황이 일어나면 캐싱 때문이라는 것을 잊어버리곤 한다. 더 잘 기억하기 위해서 TIL에 기록 한다..

이런 문제로 캐시를 지우고자 한다면 “강력 새로고침” 을 사용해서 새로운 리소스를 다시 다운로드 받게 할 수 있다.

강력 새로고침을 사용하기 위해서는 개발자 도구가 열린 상태로 Command + Shift + R (Ctrl + Shift + R)을 누르면 된다. Hard Reload라고 불린다. 또는 개발자 도구가 열린 상태에서 새로고침 버튼을 우클릭하면 사용할 수 있는 새로고침 종류가 나오게 된다. 이외에도 개발자 도구의 Network 탭에서 Disable cache를 체크하면 캐시를 사용하지 않게 된다.

지금 블로그의 제목 부분이 원래는 serif체였는데 sans-serif체로 바꾸고 싶어서 css를 수정했지만 변경 사항이 적용되지 않았다. 그때 강력 새로고침을 사용해서 해결됐다. 친구가 블로그를 보더니 제발 글씨체 좀 바꾸라고 했었다,, 안 바꾼게 아니라 못 바꾼건뎁,,