Frontend 개발자 - hyo.loui

캐시(cache) 본문

Web

캐시(cache)

hyo.loui 2023. 3. 29. 13:07

❤️‍🔥TIL : Today I Learned

Cache

캐싱은 자주 사용하는 데이터를 메모리나 디스크에 저장해
성능을 향상 시키기 위해 소프트웨어 개발에 사용되는 기술입니다.

캐시(cache) 의 장점

 

 

- 더 빠른 성능 : 캐싱은 데이터를 가져오고 처리하는 데 필요한 시간을 줄여 성능을 크게 향상 시킬 수 있습니다.

 

- 서버 부하 감소 : 데이터를 캐싱함으로써 서버는 더 적은 수의 요청을  처리할 수 있으므로 서버의 부하를 줄이고 잠재적으로 비용을 낮출 수 있습니다.

 

- 확장성 증대 : 캐싱은 서버의 부하가 줄어들고 성능이 향상되어 애플리캐이션을 개발하는데 있어 더욱 범위를 확장해 개발 할 수 있겠습니다.

 

 


캐시(cache) 의 단점

 

 

- 캐시 무효화 : 캐싱의 가장 큰 문제중 하나는 캐시를 무효화하고 새 데이터를 가져올 시기를 아는 것 입니다. 캐시가 제대로 업데이트 되지 않으면 부실하거나 잘못된 데이터가 될 수 있습니다.

 

- 복잡성 증가 : 캐싱은 애플리케이션에 복잡성을 추가하여 구현 및 유지 관리를 더욱 어렵게 만듭니다.

 

- 스토리지 요구사항 : 캐싱에는 추가 스토리지 공간이 필요할 수 있으므로 대용량 데이터가 있는 애플리케이션에 문제가 될 수 있습니다.

 


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

 

- API response : API responses 를 캐싱하면 성능이 크게 향상되고 서버의 부하가 줄어듭니다. 자주 사용하는 api response를 메모리나 디스크에 저장하면 다시 가져오는 대신 빠르게 재사용 할 수 있습니다.

 

- 이미지 및 미디어 : 브라우저에서 이미지 및 미디어 파일을 캐싱하면 다운로드 및 표시에 필요한 시간을 줄여 성능 향상이 가능하다.

 

- 상태 관리 : 캐싱을 사용하여 애플리케이션 상태를 메모리에 저장하면 성능을 향상하고 구성 요소간에 전달해야 하는 데이터의 양을 줄일 수 있습니다.

 


How?

 

앞서 설명한 API response 데이터를 캐싱 하는 방법은

response headerCache-Control 을 세팅 해줘야 하는데 백엔드에서 수행한다.

 

옵션은 아래와 같습니다.

  • no-cache : 데이터가 최신 데이터인지 확인, 최신이라면 다시 받고, 아니라면 캐싱된 데이터를 사용하도록 한다.
  • no-store: 캐싱하지 않는다는 옵션
  • public : CDN등 다른 매개체를 허용
  • private : public과 대조적으로 중간 매개체를 허용하지 않고 브라우저 환경에서만 캐시를 사용, 외부 캐시 서버 x
  • max-age : 캐싱을 유지하는 유효기간(초단위)

 


 

 최종 정리

  1. 캐시의 장점은 성능이 증대되며 서버 부하가 줄어든다, 반면 캐시메모리는 비용이 비싸며 복사본과 원본이 다른 경우를 염두해 일관성 유지에 유의해야 하는 것 입니다. 
  2. 프론트엔드에서 사용하는 영역은 api response, 이미지와 미디어파일, 상태 관리가 있으나 최대한 static한 데이터를(변동 가능성이 적은) 데이터를 캐싱하는 것이 좋습니다.
  3. 백엔드에서 response header에 cache-control을 세팅해 적용 합니다.

 

'Web' 카테고리의 다른 글

브라우저 저장소(local storage, session storage, cookie)  (0) 2023.03.31
HTTP와 HTTP 메세지  (0) 2023.03.30
프레임워크와 라이브러리 차이점  (0) 2023.03.29
parameter와 argument의 차이  (0) 2023.03.28
Restful API란?  (2) 2023.03.27