Web Cache와 Java Script

1.Cache

1. Cache 란?
캐시는 자주 접근하는 데이터에 더 빠르게 접근할 수 있도록 해 주는 데 특화된 고속 저장소 메커니즘으로, 가져오거나 계산하는 데 비용이 많이 드는 데이터 복사본을 임시로 저장하여 성능을 향상시키기 위해 사용된다.

2. Cache 사용 목적
캐시의 주요 목적은 데이터에 액세스하는 데 걸리는 시간을 줄이는 것입니다. 자주 사용하는 데이터를 프로세서에 더 가깝게 보관하거나 더 빠르게 액세스할 수 있는 위치에 보관하면 전반적인 시스템 성능이 향상된다.

3. Cache의 종류

• CPU 캐시 : 메인 메모리에서 가장 자주 사용되는 위치의 데이터를 갖고 있는, 크기는 작지만 빠른 메모리
• 디스크 캐시 : 자주 액세스하는 디스크 데이터를 저장하기 위해 운영 체제에서 사용하는 메모리로, 느린 디스크 저장소에서 읽을 필요성을 줄입니다.
• 웹 캐시 : 자주 방문하는 웹 사이트의 로드 시간을 줄이기 위해 웹 페이지, 이미지 및 기타 리소스의 복사본을 저장합니다.
• 데이터베이스 캐시 : 데이터베이스 액세스 속도를 높이기 위해 쿼리 결과 또는 자주 액세스하는 데이터베이스 행을 저장합니다.

---

---

2. JavaScript 와 Web cache

웹 애플리케이션을 배포하면서 신경써야 할 것은 웹 캐시. 웹 캐시가 저장하는 항목들은 다음과 같다.

1. HTML 페이지 : 페이지의 구조와 텍스트를 포함하는 웹페이지의 기본 콘텐츠
2. CSS 파일 : 레이아웃, 색상, 글꼴 등 웹페이지의 모양과 느낌을 정의하는 스타일시트
3. JavaScript 파일 : 웹 페이지에 상호 작용 및 기능을 추가하는 스크립트
4. 이미지 : 웹 페이지에서 사용되는 JPEG, PNG, GIF, SVG, WebP 등 모든 유형의 이미지 파일
5. 비디오 및 오디오 파일 : 웹 페이지에 포함된 MP4, WebM, MP3 및 기타 형식과 같은 미디어 콘텐츠
6. 글꼴 파일 : WOFF, WOFF2, TTF 및 OTF 파일과 같은 텍스트 스타일링에 사용되는 사용자 정의 웹 글꼴
7. XML 및 JSON 데이터 : 구성, AJAX 요청, 동적 콘텐츠 등 다양한 목적으로 사용되는 데이터 파일
8. API 응답 : 특히 이러한 응답이 자주 변경되지 않는 경우 웹 애플리케이션에 데이터를 제공하는 서버 측 API의 응답
9. WebAssembly 파일 : 웹 브라우저에서 실행되는 미리 컴파일된 코드

웹 캐시를 사용하면 저장소에 있는 이미지, 스크립트 등을 사용해서 로딩을 빠르게 할 수 있지만,

반대로 말하면 저장되어있는 데이터들을 사용하기 때문에 수정내용이 반영되지 않을 수 있다는 것이다.

아무리 수정을 해서 배포를 해봤자 사용자가 웹캐시를 사용하면 수정내역을 확인할 수 없다는 것

Chrome 설정에서 캐시 삭제하기

물론 사용자측에서 감사하게도 직접 캐시를 삭제해 주신다면 더할나위없이 행복하겠지만 편의성이 떨어지기 때문에 이렇게 하는 사람은 아무도 없을것이다. 주로 스크립트 파일에 변수를 붙여주는 방식을 사용하게 된다. 

<script type="text/javascript" src="/js/myScripts.js?ver=20240615"></script>

원리는 웹 캐시가 가지고 있는 버전과 다른 버전을 가지고 있음으로써 브라우저로부터 새로운 스크립트 파일을 읽어올 수 있도록 하는 것이다.
이렇게 하면 서버에는 항상 myScript.js 파일 하나가 올라가지만 웹 캐시는 myScript.js?ver=2024, myScript.js?ver2025 등 여러 버전의 스크립트를 저장할 수 있다.

버전은 property 나 parameter로 동일하게 맞춰주는 것이 편리(ex.배포버전 or 배포일 등..)
그렇지 않으면 모든 파일의 includ src 를 바꿔주어야 하기 때문...

끝!

 

 

 

 

어렴풋이 알고는 있는데 글로 작성하면 확실히 머릿속에 정리가 더 잘되는 것 같다. 화이팅