캐시 / 캐싱이란?

캐시?

• 동일한 데이터에 반복해서 접근해야 하거나 많은 연산이 필요한 일일때, 결과를 빠르게 이용하고자 성능이 좋은 혹은 가까운 곳에 저장하는 것
• 즉 캐시는 컴퓨터의 성능을 향상 시키기 위해 사용되는 메모리를 말한다
• 주기억장치와 CPU 사이에 위치하고, 자주 사용하는 데이터를 기억한다

예를 들어, 한번 접속한 웹 사이트에 동일한 브라우저로 다시 접속할 때 용량이 큰 이미지나 비디오는 다시 받아오지 않고 브라우저 캐시에 저장해 놨다가 동일하게 가져다 쓸 수 있다.
이를 통해 훨씬 빠르게 웹 사이트의 컨텐츠를 볼 수 있다.
📝 이처럼 캐시를 사용하면 과거에 계산한 데이터를 효율적으로 재사용할 수 있는 것

캐시 메모리

먼저, 컴퓨터 내에 캐시가 있다. CPU 에서 가장 빠른 Register 와 메인 메모리 사이에 캐시 메모리가 존재한다. 디스크 혹은 메모리에서 읽어온 데이터를 빠르게 저장하는 용도

캐시가 없었던 시절에 CPU 가 데이터를 요청하면 데이터를 메모리에서 레지스터로 바로 가져왔다.
CPU 처리 속도는 빨라지는데, 연산에 필요한 데이터가 도착하지 않으면 기다려야 했다. 이때 등장한 것이 캐시.

CPU 요청에 따라 메인 메모리에서 해당 데이터와 함께 인접한 데이터로 이뤄진 메모리 블럭을 캐시 메모리로 가져온다. CPU가 다시 데이터를 요청하면 메인 메모리가 아니라 캐시에 요청을 해보고, 캐시에서 해당 데이터를 읽어온다. 없으면 다시 메인 메모리에서 읽어온다.

Register 가 가장 빠르고 성능이 좋지만 가격이 비싸다는 단점이 있다.
따라서 자주 사용하는 데이터를 캐싱함으로써 좋은 효과를 얻을 수 있다.

캐싱?

• 이 캐시 영역으로 데이터를 가져와서 접근하는 방식을 말한다
• 예를 들어, 속도가 느린 디스크의 데이터를 속도가 빠른 메모리로 가져와 메모리상에서 읽고 쓰는 작업을 수행한다
• 다른 의미로는, 메모리상에 있는 데이터를 연산하는데, 이 연산을 더 빠른 CPU 메모리 영역으로 가져와 처리를 수행하는 것도 캐싱이라 표현

브라우저 캐시

브라우저는 이미지, 비디오 뿐만 아니라 CSS 와 Javascript 등 정적 리소스를 로컬에 저장하여 성능을 향상시킨다.

캐시 사용 여부나 최대 캐시 유효성 기간 등은 HTTP 헤더를 이용해 설정해 둘 수 있다.

성능이 중요한만큼 데이터 변경 여부에 따라 새로운 데이터로 갱신하는 일도 매우 중요. 따라서 최적의 캐시 기간을 설정하고 변경 여부에 따라 갱신하거나 유지하도록 하는 것이 중요하다.

Etag 토큰을 서버에서 보내주면 파일에 대한 해시값 혹은 식별자가 포함되어 파일 변경 여부를 확인하고, 다운로드를 건너뛰기도, 갱신하기도 한다.

또한 파일 이름을 적절하게 수정하여 URL을 변경한다면 바뀐 데이터를 무조건 리로딩 하게 된다.
CSS 를 변경하였으나, 캐시가 적용되는 시간을 초과하지 않았다면 해당 CSS를 로드하는 URL이 변경될 수 있도록 파일 이름을 적절히 수정해줄 수 있다.

즉 브라우저 캐시는 웹 캐시의 일종으로, 브라우저가 웹사이트의 에셋을 저장하는 것
브라우저 캐시에는 무엇이 저장될까? 자주 바뀌는 것이 아닌, 정적 자산을 캐싱

• 이미지
• HTML
• CSS
• Javascript

웹 캐시 : 서버 지연을 줄이기 위해 웹 페이지, 이미지, 기타 유형의 웹 멀티미디어 등의 웹 문서들을 임시 저장하기 위한 정보 기술.

캐시 비우기

만약 개발을 하면서 JS 파일을 업데이트 했다고 치자.
그런데 적용이 되어 있지 않다면? 브라우저가 업데이트 된 파일을 참조하는 것이 아니라 브라우저 캐시에 저장된 이전 파일을 참조한 것이다.
해결법은 Ctrl + F5 를 눌러 캐시를 초기화 시키면 된다.

만약 서비스를 배포했을 때, 버그가 있고 그 버그를 잡기 위해 업데이트를 했다고 할 때.
클라이언트의 브라우저 캐시 때문에 사용자들에겐 여전히 버그가 존재한다고 하면 어떻게 해결해야 할까?

HTML meta tag

<!-- 
 Cache-Control
 no-cache : 캐시를 사용하기 전에 재검증을 위한 요청을 강제함.
 no-store : 클라이언트의 요청, 서버의 응답 등을 일체 저장하지 않음
 must-revalidate : 캐시를 사용하기 전에 반드시 만료된 것인지 검증을 함.
 Ex) Cache-Control: no-cache, no-store, must-revalidate
 -->
 <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

CSS, JS 버전 명시

<link rel="stylesheet" href="style.css?v=1.1">
...
<link rel="stylesheet" href="style.css?v=1.2">
...
<link rel="stylesheet" href="style.css?v=1.3">
...

---

출처
https://velog.io/@mgm-dev/%EA%B0%84%EB%9E%B5-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BA%90%EC%8B%9C%EC%97%90-%EB%8C%80%ED%95%B4
https://jeesoo.work/learn-cache