브라우저 rendering, storage, security와 HTTP cache, CORS 같은 웹 플랫폼 개념을 점검합니다.

3600초 동안 fresh한 캐시로 보고 재검증 없이 사용할 수 있다

캐시를 절대 저장하지 말라는 뜻이다

브라우저가 응답 body를 압축한다는 뜻이다

리소스가 없어졌으니 캐시를 삭제하라는 뜻

서버의 리소스가 바뀌지 않았으니 캐시된 body를 재사용해도 된다는 뜻

요청이 CORS 정책에 막혔다는 뜻

브라우저가 DNS lookup에 실패했다는 뜻

저장 자체를 절대 하지 말라는 뜻

캐시를 쓸 수 있지만 사용 전 서버에 재검증하라는 뜻

서로 다른 출처의 문서가 임의로 민감한 응답을 읽지 못하게 막는 것

모든 cross-origin 요청 자체를 네트워크 단계에서 삭제하는 것

HTTP 요청을 항상 GET으로 바꾸는 것

응답을 제공하는 서버가 CORS header로 허용 범위를 알려준다

요청하는 프론트엔드 코드가 마음대로 허용한다

React router가 자동으로 처리한다

단순 요청 범위를 벗어난 method나 header를 쓰는 cross-origin 요청

같은 출처로 GET 요청을 보내는 모든 경우

이미 캐시된 이미지를 다시 그리는 경우

localStorage는 브라우저를 닫아도 남을 수 있고, sessionStorage는 탭 세션 단위로 사라진다

sessionStorage만 문자열을 저장할 수 있다

localStorage는 매 요청마다 서버로 자동 전송된다

둘 다 HttpOnly 옵션을 줄 수 있다

HttpOnly는 JavaScript에서 cookie를 읽지 못하게 하는 데 도움을 준다

Secure는 HTTP에서도 cookie를 강제로 전송하게 한다

SameSite는 cookie 저장 용량을 늘린다

HttpOnly를 쓰면 CSRF가 자동으로 완전히 사라진다

공격자가 삽입한 script가 사용자의 브라우저에서 실행되는 공격

서버가 다른 origin의 응답을 읽지 못하게 하는 정책

DNS 응답을 빠르게 캐시하는 기법

브라우저가 인증 cookie를 자동으로 붙여 보내는 요청을 공격자가 유도할 수 있을 때

사용자가 localStorage 값을 직접 지울 때

서버가 응답을 gzip으로 압축할 때

reflow는 layout 계산, repaint는 색상 같은 시각적 변경을 다시 그리는 것에 가깝다

repaint는 항상 JavaScript parse를 다시 한다

reflow는 네트워크 요청을 다시 보내는 것이다

둘은 브라우저 rendering과 관계가 없다

async는 다운로드 후 가능한 빨리 실행되고, defer는 HTML parse 후 순서를 지켜 실행된다

defer는 다운로드를 막고 async는 다운로드하지 않는다

async와 defer는 module script에서만 사용할 수 있다

둘 다 CSSOM 생성을 막기 위한 속성이다

페이지와 별도 생명주기를 가지며 fetch를 가로채 cache/offline 전략을 구현할 수 있다

DOM을 직접 수정하는 전용 API이다

React component 안에서만 동작한다

HTTP cookie를 암호화하는 header이다

도메인 이름을 IP 주소로 해석하는 것

TCP는 연결과 신뢰성을 제공하고, UDP는 더 단순하게 datagram을 보낸다

UDP는 항상 TCP보다 보안성이 높다

TCP는 IP 주소를 사용하지 않는다

둘 다 브라우저 rendering 단계이다

서버 인증과 암호화 통신에 사용할 키/알고리즘

하나의 연결 위에서 여러 요청/응답을 동시에 주고받을 수 있다

모든 요청을 GET으로 바꿔 캐시한다

TLS handshake를 없애 HTTP를 암호화하지 않는다

브라우저가 JavaScript를 실행하지 않게 한다

WebSocket은 양방향 연결, SSE는 서버에서 클라이언트로 흐르는 단방향 stream에 가깝다

polling은 서버가 연결 없이 클라이언트에 먼저 데이터를 밀어 넣는 방식이다

SSE는 브라우저에서 절대 사용할 수 없다

WebSocket은 HTTP cache header를 대체하는 기능이다