toss tech : resources에 출처 있습니다.
Cache-Control
no-cache && no-storeno-cache : max-age=0과 동일한 뜻. → cache는 저장하지만 사용하려고 할 때마다 서버에 재검증 요청을 보내야 한다. 재검증 요청을 보낼 때는 조건부 요청(conditional request)를 통해 캐시가 유효한지 확인한다. cache가 유효하다면 서버는 304 Not Modified 요청을 내려준다. → 이 요청은 HTTP 본문을 포함하지 않아서 매우 빠르게 내려받을 수 있다.
재검증 요청의 헤더로는 If-None-Match, If-Modified-Since가 있다.
If-None-Match : 캐시된 리소스의 ETag 값과 현재 서버 리소스의 Etag 값이 같은지 확인한다.If-Modified-Since : 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인한다.
ETagHTTP 응답 헤더 : 특정 버전의 리소스를 식별하는 식별자
웹 서버의 변경 사항이 없으면 cache를 더 효율적으로 사용할 수 있다. 만약 특정 URL의 리소스가 변경되었으면 새로운ETag가 생성된다. → fingerprint 역할을 한다. 다른 서버들도 이 특징을 이용해 추적하는 용도로 사용하기도 한다.
no-store : cache를 절대 해서는 안 되는 리소스일 때 사용한다. 어떤 경우에도 cache storage에 해당 리소스를 저장하지 않는다.
Cache의 위치
CDN과 같은 중앙 서버를 이용할 때, cache는 여러 곳에 생길 수 있다.
CDN(Content Delivery Network) : 많은 장소에 걸쳐 분산된 서버들의 그룹
서버들은 데이터의 중복 복사본들을 저장하여, 서버가 최종 사용자와 가장 가까운 서버를 기준으로 데이터 요청을 처리할 수 있다. → Bootstrap, jQuery 같은 라이브러리들의 스타일시트 및 JS 파일(정적 asset)을 전송하는데 널리 쓰인다.
- 라이브러리 자체 서버에 요청 부담이 줄어든다.
- CDN들은 이미 적절한 cache 설정이 되어 있어 자체 서버의 정적 asset을 위한 추가적인 설정을 하지 않아도 된다.
서버가 가지고 있는 원래 응답을 CDN이 cache한다. CDN의 캐쉬된 응답은 사용자 브라우저가 다시 가져와서 캐시한다. → HTTP cache는 여러 레이어에 저장될 수 있어서 조심히 다뤄야 한다.
CDN Invalidation
캐시를 없애기 위해 수행하는 작업을 CDN Invalidation이라고 한다. CDN에 저장된 cache를 삭제한다는 뜻인데, 브라우저의 캐쉬와는 다른 곳에 위치해 CDN의 cache를 삭제한다고 해서 브라우저의 cache가 삭제된다는 건 아니다.
중간 서버나 CDN이 여러 개 있는 경우에는 전체 캐시를 날리려면 중간 서버 각각에 대해서 캐시를 삭제해주어야 한다. → 따라서 Cache-control의 max-age 값은 신중히 설정해줘야 한다.
- Invalidate
- 콘텐츠 업데이트했지만 같은 URL 유지할 때
- 캐싱된 콘텐츠는 제거되지만, 다음 요청 시 원본 서버에서 최신 버전으로 업데이트- Purge
- 캐시를 완전히 삭제하여 원본 서버로 모든 요청 전달
- 잘못된 콘텐츠 긴급 제거 || 원본 서버에서 요청을 강제로 처리할 때
cache-control: public & private
중간 서버에서 특정 리소스를 캐시할 수 있는지 여부를 지정하기 위해 Cache-control header 값으로 public이나 private를 추가할 수 있다.
only-if-cached : 새로운 데이터를 내려받지 않는다. client는 캐시된 응답만을 원하고, 최신 복사본이 존재하는 지 알기 위해 서버에 요청해서는 안된다. 사용 예시 : Cache-Control: public, max-age=86400
s-maxage
중간 서버에서만 적용되는 max-age 값 설정 → s-maxage 사용
사용 예시 : Cache-Control: public, s-maxage=3153600, max-age=0
JS, CSS 파일
Javscript나 CSS 파일은 프론트엔드 웹 서비스를 빌드할 때마다 생기는데, 토스에서는 임의의 버전 번호를 URL 앞부분에 붙여 빌드 결과물마다 고유한 URL을 갖도록 설정했다. 이렇게 되면 그 버전에 대해서는 리소스가 고유하기 때문에 max-age에 최대값인 31536000을 설정하여 브라우저가 캐싱에 저장된 JS 파일을 계속 사용하게 할 수 있다. → HTTP 리소스 로드가 빨라지고 트래픽 비용도 절감된다.
docker build -t vuln-apache-php .
docker run -it -p 8080:80 --name vuln-apache-php vuln-apache-php
구조 분해 할당
배열이나 객체에서 요소를 해체해 개별 변수에 그 값을 담을 때 사용한다.
스프레드 연산자와 rest 매개변수 - ...
... : spread 연산자, 전개 연산자라고도 부른다 - 반복이 가능한 객체에서 값을 개별 요소로 분리하는 연산자
let a = [1,2,3];
let arrA = [...a, 4,5,6];
console.log(arrA) // [1,2,3,4,5,6]
rest 매개변수 : 개별 요소를 다시 배열로 묶는 매개변수 (나머지 매개변수)
→ spread 연산자랑은 다르게 개별 요소를 배열로 묶는다.
웹 서비스 캐시 똑똑하게 다루기(박서진 ∙ 토스 Head of Frontend)
CDN Cache Invalidate 작업이란?