HTTP - 캐시(1)

이번 포스트에서는 캐시에 대해서 알아보겠습니다.

 

이전 포스트에서 다룬 쿠키와 같이 매우 많이 들어볼 수 있는 단어입니다.

캐시를 알아두면 어떻게든 도움이 될 것 같습니다.

 

먼저 캐시를 사용하지 않을 때를 살펴보겠습니다.

GET /circle.jpg 라는 요청으로 원 모양의 이미지를 받아올 수 있다고 가정해봅니다.

1. 첫 번째 GET /circle.jpg 요청을 보냄
2. 서버에서는 circle.jpg 이미지를 전송해줌
   
   1. 이 때
   2. HTTP 헤더는 0.1M 바이트
   3. HTTP 바디는 1M 바이트
   4. 총 1.1M 바이트가 필요하다고 가정합니다.
3. 웹 브라우저는 서버에서 전송해준 이미지를 받아서 화면에 표시합니다.
4. 이후 두 번째 GET /circle.jpg 요청이 들어오면
5. 다시 서버에서 circle.jpg 이미지를 전송 → 다시 1.1M 바이트 전송
6. 이렇게 계속된 요청이 있을 때마다 서버에서 1.1M 바이트를 전송

GET /circle.jpg 요청을 할 때 마다 계속해서 서버에서 1.1M 바이트가 전송되어 온다는 것이

약간 비효율적이라고 생각되지 않나요?

실제로 인터넷 네트워크는 매우 느린 편에 속하기 때문에

이런 식으로 요청을 받으면 굉장히 비효율적입니다.

그리고 느린 편에 속해서 브라우저 로딩 속도도 느려지고

사용자도 그다지 좋아하지는 않을 것입니다.

 

이럴 때 필요한 것이 캐시입니다.

그럼 캐시를 적용하면 어떨까요?

1. 첫 번째 GET /circle.jpg 요청을 보냄
2. 서버에서는 circle.jpg 이미지를 전송해줌
3. 웹 브라우저는 서버에서 전송해준 이미지를 받아서 화면에 표시합니다.
4. 그리고 결과를 브라우저 캐시에 저장합니다.
5. 이후 두 번째 GET /circle.jpg 요청이 들어오면?
6. 먼저 브라우저 캐시에 있는지 & 유효 시간을 검증
7. 사용 가능하다면 브라우저에 저장된 캐시를 사용
   → 서버와 통신 안 해도 됨

 

캐시를 사용하면 인터넷 네트워크를 사용하지 않아도 되서

속도가 빠르고, 브라우저 로딩 속도도 빨라질 것이고,

빠른 사용자 경험이 될 것입니다.

 

이 때 캐시의 유효한 시간을 넣을 헤더가 필요합니다.

• cache-control: max-age=600
• cache-control이라는 헤더이고
• 단위는 초(second)입니다.
• 즉, 예시의 경우 600초의 제한 시간을 가지는 캐시라는 것입니다.

 

그리고 아까 캐시의 유효 시간을 검증한다고 했는데

만약 캐시 유효시간이 지났으면 어떻게 될까요?

그러면 어쩔 수 없이 서버와 통신을 해서 다시 데이터를 받아야 합니다.

근데 이런 통신도 자주 하면 결국은 비효율적으로 보일 것입니다.

서버와 좀 더 효율적으로 통신을 할 수 있지 않을까 하는 생각이 듭니다.

 

 

이 부분은 다음 포스트에서 다루겠습니다.

 

 

 

이렇게 HTTP 캐시에 대한 포스트를 마칩니다.

 

 

 

 

 

 

출처 : 모든 개발자를 위한 HTTP 웹 기본지식 by 김영한