캐시

캐시란?

캐시는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 위키백과

 

장점

캐시에 데이터를 미리 복사해 놓으면, 계산이나 접근 시간 없이 더 빠른 속도로 데이터를 접근 할 수 있다. 반복적으로 동일한 결과를 돌려주는 경우(특정 이미지 or 썸네일) 사용하거나 접근 시간에 비해 원래 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고자 하는 경우에 사용한다.

단점

메모리 저장공간은 속도가 빠를 수록 용량이 작고 가격이 높다. 그래서 가격때문에 캐시에 저장할 적은 양의 정보를 잘 선택하는 것이 비용도 절약하고 효율도 높이는 방법이다.

업데이트된 파일을 만료되지 않은 캐시 때문에 새로 받아오지 않아 문제가 발생할 수 있다.

 

 

프론트엔드에서 캐시를 사용할 수 있는 영역

1. 브라우저 캐시
   브라우저에서 로컬 웹 페이지 리소스를 저장하는 데 사용되는 메커니즘이다. 이로 인해 성능이 향상되고 대역폭 소비가 최소화되어 개선된 환경이 만들어진다.
   캐시는 빠른 억세스를 위해 값을 임시로 저장하는 데 사용되는 방식이다 . 브라우저 캐시는 CSS, JS, 이미지, 비디오 등의 정적 리소스를 포함하는 작은 데이터베이스이다.
   방식
   • 브라우저가 웹 서버의 일부 컨텐츠를 요청한다.
   • 컨텐츠가 브라우저 캐시에 없으면 웹 서버에서 직접 검색한다. 컨텐츠가 이전에 캐시 되었다면 브라우저는 서버를 우회하여 캐시에서 직접 콘텐츠를 로드한다.
2. 웹 스토리지
   DOM 저장소라고도 하는 웹 저장소는 웹 브라우저에서 제공하는 표준 JavaScript API이다. 이를 통해 웹 사이트는 쿠키와 유사하지만 훨씬 더 큰 용량으로 HTTP 헤더로 정보를 전송하지 않고 사용자 장치에 영구 데이터를 저장할 수 있다.
   종류
   
   • 로컬 스토리지
   • 세션 스토리지
3. 애플리케이션 상태 관리
   상태 관리 라이브러리는 내부에서 캐싱 메커니즘을 사용하여 상태를 저장하고 재사용할 수 있으며, 컴포넌트에서 동일한 상태를 반복적으로 사용하는 경우 데이터를 다시 계산하지 않고 캐시된 값을 활용하여 성능을 향상시킬 수 있다.
   종류
   
   • Context API
   • Recoil
   • React-Query
   • Redux 등