#46 TIL 캐시

캐시

캐시(데이터나 값을 미리 복사해 놓는 임시 장소)가 없을 경우 앞의 사례처럼 동일한 이미지를 요청하는데 네트워크를 통해 같은 데이터를 또 다운받아야 합니다욜량이 클 수록 비용이 커지고 브라우저의 로딩속도가 느려진다.캐시를 적용해서 어떻게 나아지는 지 다음에서 알아봅시다

• 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야함
• 인터넷 네트워크는 매우 느리고 비쌈
• 브라우저 로딩 속도가 느림
• 느린 사용자 경험 제공

캐시 적용

캐시(cache)는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킵니다.

첫번째요청
캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용합니다.
캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 더 빠른 속도로 데이터에 접근할 수 있습니다.
브라우저에 캐시를 저장할 땐 헤더에 cache-control 속성을 통해 캐시가 유효한 시간을 지정할 수 있습니다.
이 경우 60초로 설정한다면 60초 동안은 해당 캐시가 유효하다는 의미가 됩니다.

두번째 요청 (캐시 적용 - 캐시 시간이 초과했을 경우)
이제 두 번째 요청에선 캐시를 우선 조회하게 됩니다.
캐시가 존재하고 아직 60초가 지나지 않아 유효한 캐시라면 해당 캐시에서 데이터를 가져옵니다.

• 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.
• 비싼 네트워크 사용량을 줄일 수 있음
• 브라우저 로딩 속도가 매우 빠름
• 빠른 사용자 경험 제공

세번째 요청 (캐시 적용 - 캐시 시간이 초과했을 경우)
이 경우에는 다시 서버에 요청을하고 60초간 유효한 logo.jpg 이미지를 응답받습니다.
이때 다시 네트워크 다운로드가 발생하게 됩니다.
응답 결과를 브라우저가 렌더링하면 브라우저 캐시는 기존 캐시를 지우고 새 캐시로 데이터를 업데이트합니다.
이 과정에서 캐시 유효 시간이 다시 초기화됩니다.

• 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신함 이때 다시 네트워크 다운로드가 발생함