오류해결

Windows 브라우저 새로고침(HTML 변경사항 적용안되는 오류,F5 캐시 무시하기)

chief_sac 2021. 9. 8.
반응형

 

내가 로컬에서 웹개발을 하면서 분명 변경사항을 적용하고 페이지를 Rendering 하려고 할때 우리는 F5를 통해서 새로고침을 합니다(윈도우 한정) 그런데 데이터가 새롭게 로드될때에 변경사항이 적용되지 않을때가 있습니다. 왜그런건지에 대해서 궁금증이 생겨서 찾아보게되었습니다. 또한 해결방법을 알아보았습니다.

내용은 Chrome브라우저에 대해서만 정리하였습니다.

 

 

클래식한 새로고침 : "F5"


 

Google Chrome 브라우저에서 도움말에 들어가보면 F5에대해서는 Reload the current Page라고 설명되어있습니다. 이 작업은 페이지를 다시 로드하지만 현재 열려있는 브라우저의 캐시를 가진 상태로 로드되기 때문입니다. 그렇기 때문에 캐시가 만료되는 시간까지는 우리가 수정한 데이터가 새롭게 적용될때까지 캐시가 재 적용될때까지는 새로고침을 하더라도 바뀌지 않았던것입니다.

 

 

강제 새로고침: Shift + f5


 

도움말에서는 "Reload the current page, ignoring cached content" 라고 나와있습니다. 이 말그대로 Shift F5의 경우 페이지를 새롭게 로드하면서 데이터가 캐시에서 직접적으로 검색되지않고 무시하며 완전히 새롭게 로드되어서 F5에 비해 상대적으로 느리지만 변경된 사항이 적용되는 것을 볼 수 있습니다.

만약 강제 새로고침을 했음에도 화면이 바뀌지않는경우 서버의 캐시를 한번 지워주면 해결됩니다(단축키 Ctrl + Shift + Del .. 모든 브라우저 동일)

 

 

다른브라우저에서


 

IE,Edge: Ctrl + F5

파이어폭스: Ctrl + F5,Ctrl+Shift+R

오페라 :Ctrl + F5, Shift+R

반응형

태그

댓글7

  • Favicon of https://tech-monster.tistory.com BlogIcon 어흥 2021.09.08 22:08 신고

    와우 너무 유익하네요 ㅎㅎ
    답글

  • Favicon of https://shanepark.tistory.com BlogIcon Shane Park 2021.09.12 15:03 신고

    새로고침이 개발 단계에서는 굉장히 번거롭기 때문에 dev 프로필을 따로 만들어두고 spring-boot-devtools 를 이용해서 개발 환경에서는 캐싱을 하지 않도록 설정하는 방법이 있습니다
    답글

    • Favicon of https://sac4686.tistory.com BlogIcon chief_sac 2021.09.12 23:00 신고

      어느정도 개발단계가 진행되어서 프론트와 백엔드개발이 연결되기전인 프로토타입을위한 프론트&퍼블리식만 개발중일때를 가정하면 f5는 불가피하지않을까요... 제가 그상황입니다ㅠㅠ

    • Favicon of https://sac4686.tistory.com BlogIcon chief_sac 2021.09.12 23:01 신고

      물론 미들웨어 node js 가 미들웨어로도 작동할때 바꾸는 방법도있습니다 하지만 다른 경우는 제가 아직 미숙해서 자꾸 사용하게되더라구요

    • Favicon of https://shanepark.tistory.com BlogIcon Shane Park 2021.09.12 23:14 신고

      뷰단을 개발할때는 더더욱 캐싱기능을 끄는게 좋죠. 크게 어렵지 않으니 한번 검색해서 적용 해 보세요. 심지어 브라우저를 새로 고침 하지 않아도 코드 변경사항이 저장 되는 경우 브라우저 상에서 바로바로 수정 사항이 나오게 하는 방법도 있습니다.

    • Favicon of https://sac4686.tistory.com BlogIcon chief_sac 2021.09.13 08:41 신고

      좋은 방법 감사합니다! 한번 알아봐야겠어요!