새소식

🍹(부) 강의 주제/✏️ 웹 사이트 실전 운영 노하우

PC 크롬 브라우저의 캐시 데이터 지우는 방법

728x90

🤔 Question

👉 PC 크롬(Chrome) 브라우저의 캐시(Cache)란 무엇일까요?

👉 캐시는 웹사이트를 더 빠르게 보여주기 위해 이미지, HTML, JavaScript 파일 등을 PC에 임시로 저장해두는 데이터입니다.

👉 하지만 캐시가 오래되면 화면이 깨지거나, 수정된 내용이 보이지 않는 문제가 발생할 수 있습니다.

 

📦 PC 크롬 캐시를 지워야 하는 이유

👉 다음과 같은 상황이라면 캐시 삭제가 필요합니다.

✔ 웹페이지가 예전 화면 그대로 보일 때
✔ 버튼 클릭이 안 되거나 오류가 발생할 때
✔ 로그인했는데 로그인이 안 된 것처럼 보일 때
✔ 개발자가 수정한 코드가 반영되지 않을 때

👉 특히 회사 내부 시스템이나 관리자 페이지에서 자주 발생합니다.

 

🖥 PC 크롬 캐시 삭제 방법 (기본)

👉 아래는 Windows / macOS 공통 PC 크롬 기준입니다.

1️⃣ 크롬 브라우저 실행
2️⃣ 오른쪽 상단 ⋮ (점 세 개) 클릭
3️⃣ 설정 선택
4️⃣ 개인정보 및 보안 클릭
5️⃣ 인터넷 사용 기록 삭제 선택
6️⃣ 캐시된 이미지 및 파일 체크
7️⃣ 데이터 삭제 클릭

👉 쿠키, 비밀번호는 체크하지 않으면 삭제되지 않습니다.

 

⌨ 단축키로 캐시 삭제하는 방법

👉 더 빠르게 캐시를 지우고 싶다면 단축키를 사용할 수 있습니다.

✔ Windows : Ctrl + Shift + Delete
✔ macOS : Command + Shift + Delete

👉 해당 단축키를 누르면 바로 인터넷 사용 기록 삭제 화면이 열립니다.

 

🧑‍💻 개발자 도구로 캐시 무시하기

👉 개발자라면 매번 캐시를 지우는 것이 번거로울 수 있습니다.

👉 크롬 개발자 도구를 사용하면 캐시를 임시로 무시할 수 있습니다.

1️⃣ 키보드 F12 또는 Ctrl + Shift + I
2️⃣ Network 탭 선택
3️⃣ Disable cache 체크
4️⃣ 개발자 도구를 연 상태에서 새로고침

👉 이 방법은 개발 중에만 캐시를 무시합니다.

 

🧑‍💻 서버에서 캐시를 막는 예시 코드

👉 서버에서 캐시를 제어하면 사용자가 캐시를 지우지 않아도 됩니다.

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);

👉 Spring, JSP, Servlet 환경에서 자주 사용하는 방식입니다.

정리

👉 PC 크롬 캐시는 웹 속도를 높이지만 오류의 원인이 되기도 합니다.

👉 화면이 이상하거나 최신 내용이 안 보인다면 가장 먼저 캐시를 의심해보세요.

👉 개발자는 브라우저 캐시 전략을 반드시 고려해야 합니다.

 

 

If I was of any help to you, please buy me coffee 😿😢😥

If you have any questions, please leave them in the comments

🧭 References

[1] reference : https://developer.chrome.com/

[2] Ads : https://apps.apple.com/us/app/beluga-classic-film-filters/id6744041061

반응형
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.