이번에 가상화폐 시세표 위젯을 구현하면서 브라우저에게 지정해 주는 header 값 중 캐시값 설정으로 같은 브라우저에서 반복 요청에 대한 비효율을 어느정도 해소할 수 있는 브라우저 캐시에 관해 조금 알게 되었습니다.

이건 서버에서 오래 걸려 생성되는 데이터(연산이 복잡하거나 외부에서 가져와야 해서 오래걸리는)를 저장해서 모든 요청자에게 제공하는 서버의 캐시와 다른 개념입니다.

브라우저에서 한번 가져간 페이지의 경우 해당 브라우저에서 데이터를 유지하게 함으로써 똑같은 요청시 저장된 것을 사용하게 하는 것 입니다.

흔하게 사용할 수 있는 것을 찾아보니 제가 예전에 방문자의 ip를 체크해서 해당 ip를 구글 태그매니저에 알려주는 것을 자체서버로 구성한 것이 생각이 났습니다.

아주 간단한 함수로 브라우저의 ip를 확인한 후 반환해 주는 것인데 이걸 매 페이지가 새로고침 될 때마다 해줄 필요가 없겠구나 라는 생각이 들었네요. 어차피 같은 브라우저라면 계속 같은 아이피를 사용하게 될테니까요. 대단히 정밀하게 ip를 빠짐없이 정확히 기록해야 하는 것도 아니기에 여기에 적용해 보기로 했습니다.

https://rxtip.kr/make_money/4392

header('Cache-Control: max-age=600');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 600) . ' GMT');

두줄이 추가가 되었습니다. 10분간 브라우저에서 가진 값을 사용하게 브라우저에게 알려주게 했습니다.

두줄이 같은 내용이긴 한데 Cache-Control: max-age 는 기간을 알려주는 것이고

밑에 Expires 는 예약된 시간을 알려주는 것이라고 합니다.

Cache-Control: max-age 가 있으면 이게 사용되게 된다고 하네요.

페이지가 새로고침 될 때마다 캐시가 만료되지 않았다면 서버는 ip 확인 함수를 실행하지 않게 되겠죠.

굉장한 리소스가 사용되는 작업은 아니긴 하지만 불필요하게 매번 할 필요가 없을 것 같아 적용했습니다.