캐시(Cache)

캐시(Cache)란?

캐시(Cache)는 시스템의 성능을 향상시키기 위해 데이터나 값을 미리 저장해 놓는 임시 저장소다.

캐시는 원래 데이터를 접근하는 시간이 오래 걸리거나, 값을 다시 계산하는 시간을 절약하고 싶을 때 사용한다.

특히 웹 서비스에서는 사용하는 이미지, CSS 및 자바스크립트 파일을 매번 네트워크를 통해 불러오지 않고 최초에만 다운로드하여 캐시에 저장해 두고, 그 이후 요청때 저장해 둔 파일을 사용할 때 유용하다.

 

캐시의 궁극적인 목표

• 불필요한 데이터 전송을 줄여, 네트워크 요금 비용을 줄여준다.
• 네트워크 병목을 줄여준다.
• 원 서버(origin server)에 대한 요청을 줄여주어, 더 빨리 응답할 수 있게 된다.
• 거리로 인한 지연을 줄여준다.

 

캐시의 종류

캐시 종류	설명
웹 캐시(Web Cache)	HTTP 요청/응답을 캐싱하여 네트워크 대역폭을 절약하고, 웹 페이지 로딩 속도를 빠르게 함
데이터베이스 캐시(Database Cache)	데이터베이스 쿼리 결과를 캐싱하여, 동일한 쿼리 요청에 대한 성능 향상을 제공
객체 캐시(Object Cache)	객체나 데이터를 캐싱하여, 서버의 부하를 줄이고 빠른 응답 시간을 제공
CDN 캐시(Content Delivery Network Cache)	전 세계적으로 분산된 서버에 데이터를 캐시하여, 사용자들이 더 빠르게 데이터에 접근할 수 있도록 함
브라우저 캐시(Browser Cache)	브라우저에서 웹 페이지의 이미지, 스크립트 등을 캐싱하여, 웹 페이지 로딩 속도를 빠르게 함
애플리케이션 캐시(Application Cache)	웹 애플리케이션에서 사용되는 자바스크립트, CSS, HTML 등을 캐싱하여, 오프라인에서도 애플리케이션을 실행할 수 있도록 함
CPU 캐시(CPU Cache)	CPU 내부에 있는 캐시로, 메모리에서 데이터를 가져오는 시간을 절약하고, 빠른 데이터 처리를 제공

 

캐시의 장점

• 빠른 응답 속도: 캐시된 데이터를 사용하면 원래 데이터를 가져오는 것보다 훨씬 빠르게 응답할 수 있다.
• 효율적인 자원 사용: 캐시를 사용하여 반복적으로 불러오는 데이터를 줄일 수 있어, 시스템 자원의 사용 효율성을 높일 수 있다.
• 높은 가용성: 캐시는 데이터를 저장하고 빠르게 반환하므로, 시스템 장애 발생 시 임시적으로 데이터를 대체할 수 있어 가용성이 높아진다.

캐시의 단점

• 메모리 사용량: 캐시된 데이터를 메모리에 저장해야 하므로, 메모리 사용량이 높아질 수 있다.
• 데이터 불일치: 원본 데이터가 변경되면 캐시된 데이터와 일치하지 않을 수 있다. 이러한 경우에는 캐시를 업데이트해야 한다.
• 적중률 문제: 캐시의 적중률이 낮으면 원래 데이터를 가져오는데 시간이 걸려, 성능 저하를 초래할 수 있다.

---

캐시를 활용하는 부분

1. 성능 향상
   • 캐시는 많은 시스템에서 성능 향상을 위해 사용된다. 예를 들어, 웹 브라우저에서는 이미지, 스타일시트, 자바스크립트 파일 등을 캐시하여, 사용자가 같은 웹 페이지를 다시 방문할 때 이러한 리소스를 다시 다운로드하지 않고 바로 사용할 수 있도록 한다. 이렇게 하면 사용자 경험이 향상되며, 불필요한 네트워크 트래픽도 줄일 수 있다.
2. 데이터 일관성 유지
   • 분산 시스템에서는 여러 대의 서버가 동시에 같은 데이터에 접근할 수 있다. 이때 캐시를 사용하면 여러 서버에서 같은 데이터에 접근하는 경우에도 데이터 일관성을 유지할 수 있다. 예를 들어, Redis나 Memcached와 같은 인메모리 캐시를 사용하여 동시에 여러 서버에서 데이터를 캐시하고 이를 공유함으로써 일관성을 유지할 수 있다.
3. 비즈니스 로직 최적화
   • 캐시는 비즈니스 로직 최적화에도 사용된다. 예를 들어, 이전에 계산한 결과를 캐시하여 다음 번에 같은 계산을 수행할 때 빠르게 결과를 반환할 수 있도록 하는 것이 가능하다. 이는 복잡한 계산이나 쿼리를 빠르게 처리할 수 있도록 해주며, 서비스의 성능을 향상시킨다.

캐시는 이러한 방법 외에도 여러 가지 방법으로 활용될 수 있다. 하지만 캐시를 사용할 때는 캐시된 데이터와 원본 데이터가 일치하는지 항상 확인하고, 적절한 만료 시간을 설정하여 캐시가 오래되어 쓸모 없는 데이터를 저장하지 않도록 주의해야 한다.

---

프론트엔드에서 캐시를 사용하는 영역

1. HTTP 캐싱
   • 브라우저에서 서버로 요청하는 데이터에 대해서는 캐싱을 이용하여 적중률을 높일 수 있다. 예를 들어, 이미지나 스타일 시트와 같이 자주 바뀌지 않는 정적인 데이터를 캐싱하여 서버 요청을 줄일 수 있다.
2. 브라우저 캐시
   • 브라우저는 페이지를 로드할 때 자동으로 캐시를 사용하여 웹 페이지를 더 빠르게 로드할 수 있다. 이를 이용하여 빈번하게 사용되는 웹 페이지나 자원들을 캐시해 놓아 더 빠르게 로드할 수 있다.
3. 상태 관리
   • 상태 관리 라이브러리(예: Redux)에서는 애플리케이션 상태를 저장하고 관리하는데 캐싱을 활용할 수 있다. 애플리케이션 상태를 빠르게 업데이트하고, 애플리케이션에서 필요한 데이터를 미리 캐싱해놓으면 더 빠른 렌더링을 제공할 수 있다. 또한, 애플리케이션에서 사용하는 API 데이터도 캐싱하여 중복 요청을 최소화하고 더 빠른 응답 속도를 제공할 수 있다.
4. 이미지 캐싱
   • 이미지 파일은 용량이 크기 때문에 매번 요청할 경우 성능 저하를 초래할 수 있다. 웹 페이지에서 사용되는 이미지를 캐시하여, 같은 이미지를 다시 다운로드하지 않고 캐시된 이미지를 사용한다. 따라서 이미지를 캐싱하여 불필요한 요청을 줄이고, 페이지 로딩 속도를 개선할 수 있다.
5. 컴포넌트 렌더링
   • React나 Vue.js와 같은 프레임워크에서는 컴포넌트를 렌더링할 때 이전에 렌더링한 결과를 캐시할 수 있다. 이를 이용하여 렌더링 속도를 개선할 수 있다.
6. 페이지 캐싱
   • SPA(Single Page Application)의 경우, 첫 번째 페이지 로딩 후에는 서버에서 전체 페이지를 다시 렌더링하지 않고, 클라이언트에서 동적으로 콘텐츠를 로드한다. 이 때, 캐싱을 활용하여 콘텐츠를 더 빠르게 로드할 수 있다. 예를 들어, 사용자가 이전에 방문한 페이지의 캐시를 사용하여 새로운 페이지를 로드하거나, 페이지 내에서 사용자가 자주 접근하는 콘텐츠를 미리 캐싱하는 것이 가능하다.

 

---

출처

https://www.howdy-mj.me/general/http-cache

https://toss.tech/article/smart-web-service-cache

https://mmsesang.tistory.com/entry/%EC%9B%B9-%EC%B5%9C%EC%A0%81%ED%99%94%EB%A5%BC-%EC%9C%84%ED%95%B4-%EC%BA%90%EC%8B%9C%EC%97%90-%EB%8C%80%ED%95%B4-%EA%B3%B5%EB%B6%80%ED%95%B4%EB%B3%B4%EC%9E%90

https://kinsta.com/blog/what-is-cache/

https://feel5ny.github.io/2019/09/30/HTTP_007-1/