목차
웹 캐시란 무엇인가?(Web Cache)
사용자(client)가 웹사이트( server)에 접속할때 정적컨텐츠(이미지, js, css등) 특정 위치(client, network 등)에 저장하여,
웹사이트 서버에 해당 컨텐츠를 매번 요청하여 받는것이 아니라, 특정 위치에서 블러옴으로써 사이트 응답시간을 줄이고
서버트래픽 감소 효과를 볼 수 있는 것을 말합니다.
1. cache가 없을 때 동작
캐시가 없을때 브라우저에서 서버로 'star.jpg'라는 이미지를 가져와달라고 요청했다고 가정해볼게요
초기에 서버에 star.jpg를 달라고 요청합니다
두번째 동일한 star.jpg를 요청하면 또 서버에가서 달라고 요청합니다.
이렇게 캐시가 없을 경우에는 star.jpg가 필요한 경우 계속 서버로 요청하게 됩니다.
위와 같은 request가 많은 경우 서버 부하가 생길 수 있습니다.
캐시가 없을 경우 발생하는 단점은 아래와 같습니다.
- 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야합니다.
- 브라우저 로딩 속도가 느려집니다.
- 사용자가 필요요청 데이터를 받는데 느려지니 불편함을 경험할 수 있습니다.
아래 부터는 캐시를 사용하면 어떠한 효과가 있는지 어떤 이점이 있는지 살펴보겠습니다.
2. cache를 사용할때( 캐시 사용시간이 유효시간 내 일 경우)
첫번째 요청에서 star.jpg가 이전에 요청된 적이 없다면 서버에서 받아와서 브라우저 캐시에 저장합니다.
두번째 요청에서는 이전에 star.jpg가 요청된 적이 있으므로 서버에 요청하지 않고 브라우저 캐시에서 조회해서 가져옵니다.
위와같이 캐시를 적용했을 경우 장점은 아래와 같습니다.
- 캐시 가능 시간동안 네트워크를 사용하지 않아도 됩니다.
- 비싼 네트워크 사용량을 줄일 수 있습니다.
- 브라우저 로딩 속도가 매우 빠릅니다.
- 사용자가 보다 빠른 경험을 할 수 있습니다.
3. cache를 사용할때( 캐시 사용시간이 유효시간 초과 된 경우)
위와 같이 서버 요청시 header에 같이 보내는 "cache-control: max-age"를 통해 캐시에 저장된 데이터를 사용할 수 있는 유효시간을 정할 수 있는데, 이 시간이 초과하면 더이상 조회할 수 없으므로 서버를 통해 데이터를 다시 조회하고 캐시에 재저장하게 됩니다. 또한 캐시 유효시간에 갱신되는데 물론 이때 다시 네트워크 다운로드가 발생됩니다.
가만히 생각해보면 "만약 시간이 초과가 되었지만 브라우저의 데이터는 변하지 않았을 경우" 이 경우에도 서버로 요청을 해서 데이터와 캐시를 갱신해야되면 비효율적이라고 생각할 수 있습니다.
4. 캐시(cache)사용 유효시간 초과시 데이터가 같다면?
유효시간이 지났을 때 데이터가 같다면 이미 저장해 두었던 캐시를 재사용하기 위해서 클라이언트 데이터와 서버 데이터가 같다는 사실을 확인 할 수 있는 방법이 필요합니다.
4.1 검증 헤더 추가
위와 같이 Last-Modified라는 속성을 추가해서 최종 수정일을 header에 추가하는 방법입니다.
첫번째 요청 시 데이터 최종 수정일을 header에 담아 캐시에 저장합니다
두번째 요청 시 캐시 데이터를 요청 했는데 요청 시간이 초과 되었다면, 다시 서버로 해당 데이터를 요청( 데이터 및 캐시 갱신 요청)을 합니다.
위와 같이 서버로 요청할 때 if-modified-since라는 데이터 최종 수정일 데이터도 같이 담아 요청합니다.
위와 같이 서버의 데이터 최종 수정일의 시간과 캐시에 담겨져있던 데이터 최종 수정일이 같은 것을 확인하여
데이터가 아직 수정 되지 않았다는 사실을 압니다.
이제 다음과 같이 서버에서는 '304 Not modified라는 변화가 없다' ㄹㅣ다이렉트 코드를 전송합니다.
이 때 데이터가 수정되지 않았기 때문에 캐시를 사용할 거라 HTTP body없이 돌아 옵니다.
304 Not Modified가 담긴 요청 헤더만 클라이언트로 보내어 캐시의 유효시간만 갱신해줍니다.
그러면 이제 클라이언트는 서버에서 변화가 없었다는 상태값을 받았기 때문에 유효시간이 갱신된 캐시데이터를 재사용합니다.
참고게시글: https://jeongkyun-it.tistory.com/174
잘못된 정보에 대한 피드백은 언제나 환영입니다 (´▽`ʃƪ)♡
'내직업은 IT종사자 > 기타' 카테고리의 다른 글
| 로드밸런싱(Load Balancing)이란? L4 vs L7의 차이점, 로드밸런싱 알고리즘 (1) | 2023.05.20 |
|---|---|
| URL 의 오타인줄만 알았던 URI , URL과 URI의 차이점 (0) | 2023.05.19 |
| [Memory] cache란? 캐시(cache)의 동작원리, 캐싱전략(caching strategies) (0) | 2023.04.27 |
| [MacOS] M1 node, nvm 설치(homebrew, nvm:command not found) (1) | 2023.04.20 |
| [MacOS] M1 homebrew 설치(install) + next steps (0) | 2023.04.19 |
