Disk Cache를 이해하고 다루는 법

00.  직면한 문제

아마존 S3서버에서 JSON파일을 받아 수정하고 다시 업로드를 해 조회하는 작업을 수행해야해습니다. 그러나 저장하고 업로드했는데도 이전 파일의 결과만을 받을 수 있었습니다. S3의 콘솔에 직접가서 확인해보니 변경사항은 잘 적용되어 있었는데도요! 어떻게 하면 새로 업로드한 파일을 가져올 수 있을까요?

01. 캐시 때문에 그렇습니다.

브라우저의 네트워크탭을 한번 확인해보겠습니다. 새 파일을 받아야하는 곳의 size of a file이 '(disk cache)'라고 나타는데요. 일반적으로는 네트워크 응답을 통해 다운로드한 파일의 크기가 표시되는 곳입니다. 즉 네트워크 응답으로 파일을 받은게 아니라 disk cache로 부터 파일을 받았다는 것을 알려주고 있습니다.

 

03. 디스크캐시

캐싱은 자원을 빠르게 얻게 해주는데요. 예를 들어 1GB의 큰용량의 파일을 요청할 때 여러번 그 파일을 요청하면 시간도 비용도 많이들게 됩니다. 하지만 disk cache는 내 컴퓨터 RAM에 파일을 저장해두는데요. 그래서 같은 파일을 여러번 요청해도 네트워크를 거치지 않고도 파일을 즉시 얻어올 수 있게 됩니다.

 

하지만 위와같이 예상치 못하게 같은 파일만을 얻은 결과를 만날 수 도 있습니다. 클라우드 저장소에 파일을 수정해서 올렸더라도 캐시는 그 변경사항을 알지 못하기 때문에 이전의 파일만을 가져오는 것입니다. 캐시의 만료기간 전까지는 새로운 파일을 가져오지않고 이전 파일을 읽기만 하게 될 것입니다.

 

04. 해결책

걱정마세요. HTTP요청 헤더에 설정만 해주면 쉽게 캐시를 컨트롤 할 수 있습니다. 여기서는 Axios라는 HTTP 네트워크 라이브러리를 사용했는데요 다음과 같이 쉽게 해결해보겠습니다.

import axios from 'axios';

const result = await axios.get('API_URL', {
	headers: {
        'Cache-Control': 'no-cache', 
    }
});

이외에도 많은 헤더 옵션과 캐시옵션들이 있으니 궁금하시면 방문해보세요 => MDN docs.