2021 08 31

2021-08-31

HTTP 구구 수업

• HTTP 개요 - 클라이언트-서버 프로토콜 - 사람이 읽을 만큼 간단 - 헤더는 확장 가능 - 클라/서버 합의한다면 새로운 헤더 사용가능 - HTTP 상태 없음 - TCP 기반 연결

• HTTP 활용하여 개선하기 - 불필요한 다운로드 제거 - 리소스 최적화 및 압축 - HTTP 캐싱

• 불필요한 다운로드 제거 1. 전송할 필요 없는 리소스는 제거하자 2. JS 코드 분할을 사용하여 사용자에게 필요한 부분만 전송 3. css/js를 하나로 만들고 압축해 배포하기 4. 이미지 아이콘 대신 CSS, SVG 활용하기 5. 여러 이미지를 하나의 이미지로 합쳐서 관리

• 리소스 최적화 및 압축 1. html/css/js 리소스 최적화(minify) 2. GZIP을 활용한 텍스트 리소스 압축 - GZIP: 모든 바이트 스트림에 적용할 수 있는 범용 압축 프로그램 - 텍스트 기반 리소스인 CSS/JS/HTML에서 최상의 성능

• GZIP 적용 - 스프링에선 다음과 같이 적용하자

  server:
      compression:
        enabled: true
  

• HTTP 캐싱 - 응답 리소스의 복사본을 재사용하기 - GET 응답만 캐싱할 것 - 캐싱키는 GET 요청과 URI

• HTTP 캐시 기본 헤더 - Cache-Control: public: 브라우저 캐시 O, 중간 프록시/CDN 캐시 O - Cache-Control: private: 브라우저 캐시 O, 중간 프록시/CDN은 캐시 X - Cache-Control: public, max-age: 31536000: 초 단위로 캐시하는 시간 범위를 설정 - Expires: Mon, 25 July 2021 21:31:12 GMT: 이때까지만 캐시 허용, 이후 새로우 복사본 요청

• 조건부 요청 - 브라우저가 서버에 업데이트된 리소스가 있는지 요청을 보내는 것 - 업데이트 된 거 없다면 HTTP status 304(Not Modified)와 빈 응답 본문 생성 - Time-Based - Last-Modified: Mon, 03 Jan 2011 17:45:57 GMT: 조건 활성화 - If-Modified-Since: Mon, 03 Jan 2011 17:45:57 GMT: 날짜를 저장해두고 다음에 해당 리소스를 요청 - Content-Based - ETag: "15f0fff99ed5aae4edffdd6496d7131f": 조건 활성화 - If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f": 요청 전송