프론트엔드 개발자라면 웹에서 발생하는 문제들에 대해 알아야 한다. 프로젝트를 하면서 문득 하이트래픽이 생기면 어떻게 될까? 라는 의구심이 생겼다. 그러다 보니 캐시에 대해서 좀 더 공부해보고 싶어졌다.
캐시란 무엇일까?
컴퓨터 과학에서 데이터나 값을 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리거나, 값을 다시 계산 하는 시간을 절약하고 싶은 경우 사용한다.
웹 캐시란?
HTTP 캐시 는 서버 지연을 줄이기 위해 웹 페이지, 이미지, 기타 유형의 웹 문서들을 임시 저장하기 위한 정보기술이다. 웹 캐시 시스템은 이를 통과하는 문서들의 사본을 저장하며 이후 요청들은 특정 조건을 충족하는 경우 캐시화가가능하다. 동일한 서버에서 다시 접근할 때 근처에 있는 프록시 서버의 웹캐시에 저장된 정보를 불러오므로 더 빠른 열람이 가능하다.
브라우저 캐시란?
브라우저 캐시는 웹 캐시의 일종이다. 말 그대로 브라우저가 웹사이트의 에셋을 저장하는 것이다.
그렇다면 브라우저 캐시에는 무엇이 저장될까? 자주 바뀌는 것은 저장하면 문제가 생길 수 있다. 그래서 일반적으로 정적 자산을 캐싱한다.
대표적 정적 자산
1. 이미지-로고, 사진, 백그라운드 등
2. HTML
3. CSS
4. Javascript
캐시 비우기
개발 중 업데이트를 했음에도 불구하고 아무런 변화가 없는 경험은 프론트개발자라면 공감할 것이다.
그 이유는 브라우저가 업데이트 된 파일을 참조하는 것이 아니라 브라우저 캐시에 저장된 이전 파일을 참조한 것이다. 이 때는 CRTL + F5로 캐시를 초기화시켜주면 된다.
그럼에도 불구하고 여전히 버그가 있다면?
1. HTML meta tag
2. CSS, JS 버전 명시
참고
