우리가 웹사이트를 접속 할 때 서버에서 불러오는 리소스(js, css, image) 등을 파일로 저장해 두었다가 다시 접속할 때 서버에서 로딩하지 않고 캐시 파일을 불러와 사용합니다.
브라우저의 개발자 도구를 통해 확인해보면 캐시된 파일들을 확인 할 수 있습니다.
캐시를 사용할 때 장점
대부분 브라우저는 캐시 사용이 기본 사용으로 설정되어있습니다.
캐시를 사용할 경우 웹페이지에 접속할 때 마다 사용되는 리소스 파일들을 서버에서 불러오지 않고 파일로 불러오기 때문에 웹사이트 접속을 빠르게 할 수 있습니다. 캐시를 끈 상태에서 웹사이트를 이용해 보면 실제로 체감이 될 정도의 속도차이를 느낄 수 있습니다.
또한 웹사이트 운영자는 캐시로 인해 서버에서 불러오지 않는 파일은 트래픽에 영향을 주지 않기 때문에 트래픽을 절약할 수 있는 장점이 있습니다.
캐시를 사용할 때 단점
캐시를 사용하면 서버에서 파일을 불러오지 않고 저장된 파일을 불러오기 때문에 웹사이트의 수정 내용이 바로 적용되지 않는 단점이 있습니다. 실제로 웹사이트 개발을이 완료되고 클라이언트와 수정 작업을 진행 할 때 캐시 문제로 인해 수정이 안된 것 같다는 피드백을 많이 받게 됩니다. 물론 운영중인 웹사이트의 경우는 일반 사용자들도 모두 적용이 안되는 문제도 있습니다.
그래서 운영중인 웹사이트 수정 작업 시에는 캐시를 고려하여 작업을 해야합니다.
맥 사파리에서 캐시 지우기
사파리에서 캐시를 지우려면 개발자 도구 메뉴를 활성화 해야합니다.
- Safari > 환경설정 메뉴를 선택합니다.
- 고급 탭으로 이동합니다.
- 하단의 메뉴 막대에서 개발자용 메뉴 보기를 체크하고 창을 닫아줍니다.
- 상단 메뉴에서 개발자용 > 캐시 비우기를 선택
맥 크롬에서 캐시 지우기
크롬에서는 다음과 같은 방법으로 캐시를 지울 수 있습니다.
- 상단 메뉴 Chrome > 인터넷 사용기록 삭제를 선택합니다.
- 캐시된 이미지 및 파일만 체크하고 인터넷 사용 기록 삭제 버튼을 클릭합니다.
(인터넷 사용 기록, 쿠키 및 기타 사이트 데이터는 체크하시면 브라이저 이용 기록이 삭제 됩니다.)
맥 크롬에서 일시적으로 캐시 사용 중지하기
일시적으로 캐시 사용을 중지 해 두면 매번 캐시를 지워야 하는 번거로움을 줄일 수 있습니다.
- 보기 > 개발자 정보 > 개발자 도구를 선택합니다.
- 개발자 도구 > 네트워크 탭을 선택합니다.
- 상단의 캐시 사용 중지를 체크 합니다.
- 개발자 도구를 그대로 둔 상태로 웹사이트를 새로고침하면 파일들이 캐시되지 않습니다.
이미지 같은 경우는 바로 확인이 되지만 스크립트나 CSS 같은 경우 잘못써서 적용이 안되는건지 캐시때문인지 확인이 힘들기 때문에 저는 주로 개발할 때 캐시 기능을 꺼두고 작업을 합니다.
여러분들도 서버 상에 올려놓은 웹사이트를 개발 혹은 수정할 때는 캐시기능을 꺼두고 작업하시는 걸 추천드립니다.