WEB3 - HTTP Cache
옮
---
https://youtube.com/playlist?list=PLuHgQVnccGMAM6VAWEKtaUnvzePCxnUVo
WEB3 - HTTP Cache
www.youtube.com
---
1.소개
HTTP 수업 의존
HTTP protocol의 기능중 하나인 Cache, 저장한다
웹 이후 남의 컴퓨터의 문서를 내 컴퓨터에 저장된 문서인양 볼 수 있었다
웹성장 -> 전송되는 정보 크기 급격히 팽창 -> 데이터의 전송 속도 높여야 해
그 노력중의 하나가 CACHE
페이지를 열때마다 오랜시간이 걸려 -> 이미 다운로드 받은 파일을 왜 또 받아
한번받은걸 컴퓨터에 저장(캐시)했다가 같은 주소로 접속할 때 캐시해둔 파일을 사용하면 네트워크를 통하지 않는다.
문제 : 우리가 웹사이트 개편해도 사용자들은 과거의 파일을 보고 있을 수 있다
캐시를 최신상태로 유지하는 것이 어렵다
캐시만드는 법 + 캐시를 섬세하게 조정을 살펴볼 것
그래서
웹-최신상태유지
앱-눈깜짝할사이실행
이 두 장점을 갖춘 웹앱만들거야
---
2.준비
일부러 체감하려고 웹사이트 늦게 뜨게하기 설정
크롬 > 우클릭검사 > Network > Online > Slow 3G(통신방법의 이름이 3G)
그 다음 캐시를 설정하려면 웹서버의 설정을 바꿔줘야 한다
Apache 웹서버쓸것
Bitnami쓰는 사람
이렇게 생긴 컨트롤에
Manage Servers > Configure > Open Conf file 설정 파일 열여서 설정 바꿀 것. httpd.conf 파일이 열리고 파일의 제일 끝에다가 쓸거고, 설정할 때마다
Apache Web Server를 Restart해줘야한다. 그래야 읽고 동작
---
3.캐쉬 금지(Cache Control:no store)
설정 파일에
Header set : 헤더값을 바꿀거야
Cache-Control "no-store" : 파일이 요청될때마다 응답할 때 Cache-Control이란 헤더를 추가해서 no-store 저장하지말것 이라고 하는 값을 보내, 웹서버가 웹브라우저한테
SetEnv no-gzip 1 (안중요)아파치가 파일을 압축해서 전송하는 기능으로 인해 캐시에 영향을 줘서 혼란스러울 수 있으니 압축기능 끈 것. 실전에선 켜야해
"캐시를 하지 말것"이라는 뜻
저장
Restart : 내용 반영
---
Fast 3G로 바꾸고
Preserve log 체크 - reload할 때마다 기록들이 초기화 되는걸 막는다
이제 reload한다, 근데 그냥 reload하면 캐시가 살아있을 수 있어
Hard Reload : 캐시를 지워버리고 다시 다운받는 리로드
이대로 다른 페이지 클릭
이미 다운로드 받았던 이미지인데 다시 다운로드를 받고 있어
갖고 있다가 똑같은 주소로 접속할 땐 접속하지 말고 다운로드 받아놨던 파일을 읽으면 얼마나 좋을까?
---
이거 클릭해보면
Response Headers : 웹서버가 응답할 때
Cache-Control: 의 값 no-store으로 웹브라우저에게 주고 있다
->아까 그 우리가 설정한 것에서 온 것
웹브라우저는 no-store라는 값을 보면 1.html이라는 파일을 캐시에 저장하지 않는다
그래서 그다음에 또 요청
Cache-Control은 HTTP 1.1표준에 정의돼 있는 표준화된 지시자라고 생각하면 된다
꼭 나쁜건 아냐 개편됐을 때 사용자들이 바로바로 볼 수 있다
---
4.1.캐쉬 이용 (Cache Control : maxAge)
이걸 하기 위해 HTTP caching에 대한 문서를 검색해봄
여기에
수명 지정하는 부분. 숫자는 초단위. 저 숫자 1년임
저장
Restart
Hard Reload
from disk cache, 5ms, 0ms
200회색 : 200은 200인데 네트워크를 사용하지 않았다
사용자는 반응성이 좋고
서비스제공자는 통신요금 절약한다
---
근데 신선도의 문제가 있어
에디터에서 내용 바꾸고 Inspect의 network키고 reload(링크를 눌러서 리로드, 리로드 버튼 말고)
근데 내용 안바뀜.1.html의 내용을 from disk cache했기 때문
신선하지 않은 정보를 갖고 있다
성능이 좋으면서도 신선도를 유지할 수 있나?
---
4.2.캐쉬 이용 (Cache Control : maxAge)
1년으로 정하면 1년에 한번 개편된 모습을 본다
5초에 한번
근데 왜 3.1KB, 994KB 였는데
191B 192B야?
수정하고 하니까
3.1KB됨
뭘까?
---
다시 Hard Reload로 깔끔하게 다운받고
응답헤더 보면 Last-Modified가 있다
우리가 갖고 있는 서버쪽 1.html이 마지막으로 언제 수정됐는가 시간정보
를 웹서버가 웹브라우저에게 알려주고 있다
그럼 웹브라우저는 1.html을 캐시에 저장할 때 이 파일은 마지막으로 언제 수정된 파일이다 라는것도 함께 저장한다
5초가 지난 다음엔 캐시를 쓸 수 없으니 버리는게 아니라 웹브라우저가 웹서버한테 이렇게 물어본다
If-Modified-Since:
내가 지금 갖고 있는 1.html파일은 이 시간에 마지막으로 수정된 파일인데 이 시간 이후로 서버쪽에서 저 파일이 수정된 적이 있어?
만약에 있다면 내용을 전송해줘
없다면 전송하지 말고 말만해
그랬더니 웹서버가
어 변경된거 없어 하는 뜻으로 304번을 전송해준다. 컨텐츠 자체도 전송하지 않는다
웹브라우저와 웹서버가 헤더만 주고 받고 있다. 덩치가 큰 컨텐츠는 주고받고 있지 않다
---
웹서버가 수정하고 웹브라우저가 접속하면 웹브라우저의 물음을 받고 어 그 이후로 수정한 적 있어
그럼 그 파일의 내용을 200번 코드와 함께 응답해준다
동시에 이 파일이 언제 마지막으로 수정됐는지도 알려줘
max-age값을 잘 조정해서 신선하고 성능좋게 적당히 만들 수 있다
max-age=0으로 지정하면 요청을 할 때마다 확인하고 수정됐을 때만 다운로드 진행되게 하고 싶을 때
이것과 똑같은 의미가 no-cache
---
5.ETag
웹서버가 주는 이 초까지만 표시해주는것과
웹브라우저가 저장하고 있는 정보 비교로 최신인지 아닌지 보는것
근데 컴퓨터는 초당 수천번 동작할 수 있어
초까지만 표시해주는 최종수정시간은 경우에 따라서 부정확
이때 도와주는게 ETag, 저기 b0시작 80으로 끝나는것
웹브라우저는 ETag와 함께 1.html이라는 파일을 캐시로 저장
그리고 그 다음에 웹서버한테 요청할 땐 Request Headers가
If-None-Match: 아까 웹서버가 줬던 ETag
웹서버는 지금 내가 서비스 해야하는 1.html의 ETag값이 같다면
304라고 보내주고
다르다면 200보내면서 새로운 내용을 보냄
---
ETag를 어떻게 만드는지는 우리가 신경안써도 돼. 웹서버가 내가 서비스하는 파일에 대한 고유 ETag를 만들어서 웹브라우저에게 보내줘야 한다
---
웹서버는 ETag라는 값과, Last-Modified라는 두개의 값을 줘
웹브라우저는
이 두개의 헤더값을 보내줌. 브라우저가 ETag값, Last-Modified값 모두 갖고 있기 때문에 두개 다 보내준 것
웹서버는 저 둘중에 하나라도 값이 다르면 파일을 보내준다
이런것으로 조건에 따라 다르게 동작하는 웹브라우저, 캐싱시스템을 만들 수 있다. 더 똑똑해짐
---
6.캐쉬정책
추천하는 글이 하나 있어서 소개 + 결정틀 소개
밑에 언어 고를 수 있음
---
여기에 재밌는 글이 있음
Cache-Control
- 파일을 받았는데 또 써야되냐, 그럴필요 없냐(no-store쓰세요)
- validate유효성 검사, 캐시에서 유효성이란 것은 로컬에있는것과 서버에있는것이 다르면 유효하지 않은 것. 매번 유효성을 검사해야되냐? Yes면 no-cache쓰세요
- (수업의 범위를 조금 벗어나긴 하는데)캐시를 하다보면 캐싱서버같은걸 사용하기도 한다, intermediate 중간, 중개자
소비자가 엄청 멀리 떨어져 있으면 느릴테니 내가 소비자와 가까이 있는곳에 캐싱서버라는걸 두는 것
내 웹서버의 내용을 캐싱서버에다 캐싱해두면 사용자들은 내 웹사이트에 직접 접속하는게 아니라 캐싱서버에 접속하는걸 통해서 빠르게 가능
그럼 내 컴퓨터에 저장하는 캐시가 있고, 중간인 캐싱서버에 저장하는 캐시가 있다. 사용자에게 전달해야하는 데이터가 보안을 요구하고 어딘가 중간에 저장되면 안된다면 Cache-Control의 값을 private로 지정하면 중간에 있는 캐싱서버가 그걸 저장하지 않는다. public으로 두면 캐싱서버가 그걸 저장하는걸 통해서 속도를 향상시켜준다
- maximum cache lifetime? 캐쉬의 수명을 정할 수 있냐 : max-age의 값을 지정하면 된다
Add ETag header : 무슨 뜻인지 모르겠네요 이건 항상 넣으란 뜻일까요?
---
7.마치며
HTTP의 성능을 향상시키고 귀한 인터넷 자원을 아껴쓸수 있는 기능인 캐시!
캐시를 잘 설정했는지 파악하는 가장 쉬운 방법 검사를 받는 것. 캐시를 테스트해주는 여러 도구들이 있다. 많은 브라우저의 개발자 도구가 검사기능을 갖고 있다
검색을 해보면 이런 서비스들도 많아
캐시를 더 적극적으로 활용하려는 시도들이 나오고 있다
Offline Application
Prograssive Web Application = PWA
이런 유행들
Application Cache라는 최신기술을 이용해서 인터넷이 끊겨있어도 캐시된 데이터를 이용해서 웹앱이 동작하게 할 수 있다
웹인데 마치 앱처럼
---
또 지금까지 본건 웹브라우저 측에서 동작하는 캐시, 서버측에서 동작하는 캐시도 있다
Caching Server라는 키워드로 검색하면 많은 서비스가 존재
Memcached라는 유명한 서비스는 캐시 데이터를 HDD나 SSD같은 저장장치가 아니라 메모리에 저장했다가 같은 페이지에 대한 요청이 있으면 메모리에 저장된 데이터를 웹서버 대신에 응답해준다. 훨씬 빨라. 웹서버의 부담을 획기적으로 줄이면서 사용자들에게 데이터도 빠르게 제공
---
이런 캐싱서버를 전세계에 배치해놓으면 사용자의 요청이 있을 때 가장 가까운 캐싱서버가 응답하는걸 통해서 네트워크의 속도를 획기적으로 줄일수도 있다
이런 서비스를 컨텐트를 배달해주는 네트워크 Content Delivery Network이라고 부른다.고객이 다른지역에 있다면 CDN이라는 키워드로 검색해보기. 여러가지 좋은 서비스들이 많다.