2023. 3. 29. 14:11ㆍ웹개발 메모장
캐시란?
캐시는 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치다.
웹 요청이 캐시에 도착했을 때, 캐시된 로컬 사본이 존재한다면,
그 문서는 원서버가 아니라 캐시로부터 제공된다.
- 불필요한 데이터 전송을 줄여서, 네트워크 요금으로 인한 비용을 줄여준다.
- 캐시는 네트워크 병목을 줄여준다. 대역폭을 늘리지 않고도 페이지를 빨리 불러올 수 있게 된다.
- 캐시는 원서버에 대한 요청을 줄여준다. 서버는 부하를 줄일 수 있으며 더 빨리 응답할 수 있게 된다.
- 캐시는 거리로 인한 지연을 줄여준다. 페이지를 먼 곳에서 불러올수록 시간이 많이 거린다.
데이터, 값 등을 미리 복사해두는 임시장소 또는 그러한 동작
- 메모리캐시 : RAM에 데이터를 저장해두고 읽는 방식
- 디스크캐시 : 파일에 데이터를 저장해두고 읽는 방식
👉 둘 중에 어떤 방식이 사용되는가는 파일 사이즈에 따라 브라우저 자체의 알고리즘으로 결정됨
장단점
장점 : 트래픽 절감 및 빠른 로딩 속도에 도움,
단점 : 소스 바뀐 걸 사용자가 바로 확인 불가.
캐시의 종류
| 종류 | 위치 | 설명 |
| 브라우저 캐시 | 브라우저 | 한 번 받아온 리소스들을 재사용하여 속도가 빨라짐 |
| 프록시 캐시 | 브라우저와 ISP | 조직 내에서 접속하는 웹 사이트의 리소스들을 캐시하여 속도가 빨라지고 네트워크 사용량을 줄임 |
| 트랜스패어런트 캐시 | ISP | ISP는 이 캐시를 이용하여 ISP간 대역폭 낭비를 줄임 |
| 리버스 프록시 캐시 | ISP와 웹 서버 | 원본 서버로의 트래픽을 줄이고, 사용자에게 빠른 응답을 준다. |
웹 캐시 동작 원리
웹 캐시는 네트워크 상 웹 서버와 브라우저의 중간에 위치합니다. 원본 콘텐츠 요청을 서버로부터 받은 후 복사본을 만들어 저장하고 클라이언트에게 응답합니다.
그 후에 같은 요청이 오면 웹 서버에 요청하지 않고 저장해놓은 복사본을 사용자에게 응답합니다. 이렇게해서 웹 서버의 부하는 줄어들고 요청에 대한 응답속도는 빨라집니다.
다만, 사용자에 따라 개인화된 페이지나 콘텐츠가 자주 변하는 페이지의 경우에는 캐시를 하지 않는 것이 좋습니다.
캐시 확인방법
F12로 개발자도구를 열고, main.chunk.js 나 기타 리소스 파일을 열어서 header 부분을 확인해본다.
cache-control이라는 항목의 내용이 헤더에 들어있어야 캐시 관리가 되고있다는 의미이다.
- no cache : 캐시 사용 전 서버 검사 후 사용결정
(사용하지 않는다는 의미가 아니다! 헷갈리지 말기~)
- no-store : 캐시 사용 X
- public: 모든 환경에서 캐시 사용 가능
- private : 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가
- max-age : 초(second) 단위의 캐시 유효 시간
max-age=0은 no-cache와 같다.
max-age가 지나도 서버는 캐시를 여전히 가지고는 있는다. "얘 만료됐는데, 사용해도 괜찮아?" 하고 물어봄
아래 참고사이트는 꼭 다시 한번 보자!
'웹개발 메모장' 카테고리의 다른 글
| this 가 동작하는 원리와 용법 그리고 차이 (0) | 2023.03.31 |
|---|---|
| HTTP 란? HTTPS 는? (0) | 2023.03.30 |
| 프레임워크와 라이브러리 (0) | 2023.03.29 |
| parameter 매개변수와 argument 인수의 차이 (0) | 2023.03.28 |
| Hoisting 호이스팅과 TDZ (0) | 2023.03.28 |