비전공자의 전공자 따라잡기 - 네트워크, HTTP

쿠키

Cookie(쿠키)

HTTP는 무상태기 때문에 기억을 하지못한다.
쿠키라는 헤더를 이용해서 브라우저에 정보를 저장하는 것이다.
cookies 탭을 누르면 쿠키가 저장된 것을 볼 수 있다.
쿠키의 정보를 포함한다. (도메인, 쿠키의 사이즈 등)
도메인이나 path로 어떤 때 쿠키를 가져가고 안 가져가는지 정할 수 있다.

쿠키의 형식?

키=값; 옵션1; 옵션2; …

쿠키를 가져간다는 것이 뭘까?

네트워크 탭에서 set-cookie말고 Cookie를 보면 매번 요청때마다 서버로 요청이 된다.
한 번 설정된 쿠키는 만료되기 전까지는 매번 서버에 요청을 하게 된다.
데이터 낭비다. 꼭 필요한 것만 Cookie에 저장하자.

Expires : 만료

쿠키도 만료될 수가 있다.
Expires가 Session이면 길게 저장하는 것이 아니라 컴퓨터를 끄면 쿠키가 날라간다.

쿠키 정보 - 기타

HTTPOnly : 자바스크립트에서 가져갈 수 있는가다.
true라면 JS에서는 접근 불가라는 것이다.

Secure : HTTPS일 때만 접근이 가능하다는 의미다.
Max age는 초, Expires는 정확한 시간이라고 알아두자.
요즘은 Max age를 쓴다. 같이 쓰면 Max age가 우선순위다.

SameSite : 도메인이 같은 걸 의미하는데 다른 도메인 쿠키를 받는 것을 허용할지 말지 설정하는 것이다. 개인정보유출 관련
SameSite : Lax(기본값 - 다른 사이트는 안되지만 Link를 클릭할 때는 허용)
Strict(자기 사이트 안에서만)
None(Secure)은 HTTPS일 때 사용가능 한 것인데 다른 사이트 쿠키까지 허용해주는 것이다.

깨알…

MDN공식문서를 볼 때 영어로 보도록 노력하자.
왜냐하면, 번역을 해서보면 최신버전이 아닐 수가 있다.
MDN문서에서 한국어로 변경하는 것도 있지만 업데이트가 안 된 것들이 있어서 원문인 영어로 보는 것이 좋다.

Firfox에서는 HTTPS가 아니더라도 Secure사용가능하다.

캐시(Cache-Control)

Cache(캐시)

캐시라는 것은 저장소라고 보면 된다. (DB, 메모리, 파일)
서버로 바로 요청이 가는 것이 아니라 캐시를 본다.
응답을 받았었던 게 있는지 확인하는 과정을 거친다.
캐시는 데이터 비용을 아낄 수 있다는 것이 장점이다.

Cache Hit, Cache Miss

적중 / 미적중, 부적중

저장된 것이 없으면(미적중이면) 서버로 바로 간다.
저장된 것이 있으면(적중) 서버로 통신을 하는 것이 아니라 저장소에서 가져오는 것이 된다.

과정은
GET / users » Cache » 서버
올 때도 서버 » Cache » HTTP 1.1 200 ok

적중, 부적중 말고 캐시가 너무 오래된 경우가 있다.
캐시가 오래된 경우, 최신버전의 데이터를 가져올 수 없다.
저장된 데이터를 그대로 가져오게 되기 때문에 최신 데이터가 아닌 저장된 데이터를 가져오게 될 수 있는 것이 단점이다.
서버에서는 데이터가 다를 수 있다. 캐시를 얼마나 오래 저장할 것인가가 중요하다.

캐시 - 다른 경우들

캐시가 만료가 됐더라도 서버에서 변경이 없는 경우 : 써도 된다고 하는 응답 304(Not Modified)가 온다.
캐시가 만료가 됐고 변경이 있는 경우 : 200 ok로 응답이 온다. 새로운 데이터를 주는 것이다.

Cache-Control

캐시에 제한을 둘 수 있는 것이다.

Cache-Control에 max-age = 6으로 하면 캐시를 6초동안 저장한다는 뜻이다.(must-revalidate는 나중에!)
실제로는 이렇게 짧게 저장하지는 않고 상황에 따라 다르다.
예시로 게시물을 몇 개월, 몇 년 단위로 저장을 한다. 계속 변경이 필요한 것은 짧게 저장한다.

Link! -> MDN - Cache-Control
Cache-Control에 쓸 수 있는 제한들은 MDN을 통해서 확인하자.
Cache-Control 속성들을 알고 싶다면 어떤 속성이 언제 사용하는 것인지 확인하는 것이 좋다.

Cache-Control 헷갈릴 만한 것은 max-age는 Cache-Control에 있는 내부속성이고 Expires는 헤더다.
요청헤더에 쓰는 것과 응답헤더에 쓰는 것과 역할이 조금씩 다르고 대부분은 응답헤더에서 쓰는 경우가 훨씬 많다.
요즘은 시간오차때문에 max-age를 더 선호한다.

Pragma

더이상 쓰지 않는다. 옛날 HTTP 1.0 버전에 있었다.
적혀있다면 정말 옛날 거라고 생각하고 무시하면 된다.
캐시를 더 상세하게 하기 위해 만든 것이 Cache-Control이다.

헷갈릴 만한 속성

캐시 스펙도 이름을 잘못지은 것이 있다.
no-cache : 캐시는 저장해도 되지만 항상 신선도를 검사하라는 것이다.
캐시의 유효기간을 무시하라는 의미다.
캐시를 하지 말고 항상 서버에서 새로운 데이터를 가져오라는 의미일 것으로 생각할 수 있지만 틀렸다.
그것은 no-store를 써야한다.

must-revalidate

must-revalidate와 no-cache가 헷갈릴 수 있다.
must-revalidate : 기간이 지나면 꼭 신선도를 검사하라는 의미다. (지나지 않았으면 캐시 사용가능)
must-revalidate의 의미를 신선도를 반드시 다시 검사하라는 것으로 오해할 수 있다.
캐시가 기간이 지났지만 서버에서 지난 것을 그대로 주는 경우가 있을 수 있기때문에 must-revalidate가 존재한다.

private과 public

캐시 저장은 private이 기본값이다.
저장이 우리의 파일, 메모리 등에 저장되기때문에 남들과 공유가 되지 않는다.
public으로 설정하면 공유될 가능성이 생긴다.
언제 public을 쓰는지 생각하면, wiki나 MDN같은 공식문서에는 개인정보가 담겨있지 않고 공유가 가능한 것이기때문에 public을 쓰면 좋다.
잘못 사용하면 로그인을 통해서만 볼 수 있는 데이터를 남들에게 공유하게 될 수 있다.
그것을 캐시에 저장했는데 public으로 했다면 다른사람이 로그인을 하지 않아도 그 데이터를 받을 수 있게 된다.

public 제한도 있다. Authorization라는 헤더가 있는 경우에는 public을 썼다 하더라도 public에 저장이 되지 않는다.
private으로 자동전환한다.

stale-while-revalidate

캐시가 기간이 지났지만 서버에서 지난 것을 그대로 주는 경우에서 또 다른 것이 있다.
stale-while-revalidate라면 일단 오래된 데이터를 받고,
서버한테 물어봐서 새 데이터가 있으면 몰래 업데이트를 해놓으라는 의미다.
일단 서버를 통해 데이터를 가져오는 것보다 캐시가 훨씬 빠르기때문에 사용한다.
오래된 것을 사용하지만 어쩔 수 없이 감수한다.
캐시는 서버에게 새 데이터가 맞는지 확인을 하고 그 때 스스로 캐시가 업데이트가 된다. 결국에는 희생자가…

Stale-If-erroer

오래된 데이터를 준다.
서버가 에러여도 에러표시 대신에 캐시에 기간이 오래된 데이터라도 있으면 그것으로 응답을 한다.
Stale-If-erroer에 지정한 기간이 지난다면 그 때는 서버가 에러표시를 한다.