앱 개발 진행 중 캐싱 컨트롤이 안되는 문제로 데이터를 받아올 때 리프레시 되지 않는 문제가 있었습니다

그래서 캐싱관련 mdn 정독과 소소한 정리를 해보았습니다

캐싱의 개념

🙋 컴퓨터 운영체제에서의 캐싱

프로그램 및 데이터를 하드디스크로부터 읽고 가져오는데에 시간이 많이 걸리므로 컴퓨터 운영체제에서는 캐시Cache를 사용합니다. 캐시는 주기억장치메모리에서 자주 사용하는 프로그램 및 데이터를 캐시 저장소에 임시로 적재하여 빠르게 접근할 수 있도록 합니다.

🙋 웹 브라우저에서의 캐싱

서버에게 요청하여 가져오는 리소스들을 화면에 보여줄 때에 통신과정 네트워크 처리시간 그리고 서버에서의 요청 처리시간이 소모되므로 웹 브라우저는 HTTP 프로토콜을 통해 가져오는 리소스들을 캐싱하여 최적화하돌록 합니다. 캐시의 개념을 웹 브라우저에 적용하여 HTTP에서 제공하는 Header를 통해 캐싱에 대한 정책을 정할 수 있습니다. 이를 Cache-Control을 통해 적용합니다. 적절한 캐시 사용은 서버의 부하 감소, 클라이언트의 네트워크 통신 시간 및 트래픽 량을 줄일 수 있는 이점을 가져옵니다.

다양한 캐싱이 있지만 웹 개발자*(라 믿는)* 저는 HTTP Cache 에 대해 조금 더 알아보고자 합니다.

HTTP Cache-Control 은 어디서 하나요?

캐시 정책은

1. Apache 또는 Nginx 등의 웹 서버 설정config에서 변경할 수 있고

   //예시 *웹서버 설정 (Apache)*
   Header set Cache-Control ‘no-store’ 
   

2. 서버에서 캐시 정책을 변경할 수 있고

   app.get("/endpoint", (req, res) => {
   	res.set("Cache-Control", "max-age=3600, public");
   	res.send("OK");
   });
   

3. 클라이언트의 캐시 정책을 변경할 수 있습니다.

   //HTTP Cache-Control 추가
   fetch("<https://zzinLee.com/endpoint>", {
   	header: {
   		"Cache-Control": "no-cahe"
   	}
   });
   

보통 클라이언트 측에서 캐시 컨트롤을 하고 싶다면 요청과 함께 헤더로 보내는 것이 일반적인 선택입니다.