본문으로 건너뛰기

모든 개발자를 위한 HTTP 웹 기본 지식

이 글은 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 정리한 내용입니다.

1. 소개​

  • 웹 개발은 HTTP 기반위에서 개발하는데 언젠가 한번은 정리해야 함

강의 목표​

  • HTTP 전체 흐름 이해
  • 실무에 필요한 핵심 내용
  • 쉽게 설명

2. 인터넷 네트워크​

인터넷 통신​

  • 인터넷에서 컴퓨터 둘은 어떻게 통신할까?

IP(인터넷 프로토콜)​

  • 지정한 IP 주소(IP Address)에 데이터 전달
  • 패킷(Packet)이라는 통신 단위로 데이터 전달
  • 통신에는 클라이언트와 서버의 IP가 필요하다.

IP 프로토콜의 한계​

  • 비연결성
    • 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 -> 받을 수 있는 상태인지 모름
  • 비신뢰성
    • 중간에 패킷이 사라지면? -> 패킷이 소실되어도 모름
    • 패킷이 순서대로 안오면?
      • 일반적으로 1.5KB 이상이면 끊어서 보내는데, 메세지의 순서가 다르게 도착해도 모름
  • 프로그램 구분
    • 같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상이면?

TCP, UDP​

위 IP 프로토콜의 단점을 TCP가 해결해준다

인터넷 프로토콜 스택의 4계층​

  • 애플리케이션 계층 - HTTP, FTP
  • 전송 계층 - TCP, UDP
  • 인터넷 계층 - IP
  • 네트워크 인터페이스 계층 - LAN 카드, 드라이버, 장비
  1. 프로그램이 Hello, world! 메시지 생성 - Application
  2. SOCKET 라이브러리를 통해 전달 - Application -> OS
  3. TCP 세그먼트 생성, 메시지 데이터 포함 - OS
  4. IP 패킷 생성, TCP 데이터 포함 - OS
  5. 이더넷 프레임 생성(MAC 주소 포함), IP 데이터 포함 - LAN

MAC과 IP​

  • MAC(Media Access Control) 주소: 네트워크 카드에 부여된 하드웨어 주소

    • 변하지 않는 식별자 (물론 수동으로 변경 가능하지만 일반적으로 고정)
    • 로컬 네트워크(LAN)에서만 의미 있음

  • IP(Internet Protocol) 주소: 네트워크 상의 논리 주소

    • 동적으로 할당 가능 (예: DHCP)
    • 인터넷 또는 내부 네트워크에서 사용

둘은 1:1, 1:N, N:1, N:M등 다양하게 매핑되어 ARP, RARP 프로토콜을 통해 연결되어 있다.

TCP 특징​

전송 제어 프로토콜(Transmission Control Protocol)

  • 연결지향 - TCP 3 way handshake(가상 연결)

    1. SYN: 접속 요청 - 클라이언트 -> 서버
    2. SYN + ACK: 서버의 요청 수락 및 클라이언트 접속 요청 - 서버 -> 클라이언트
    3. ACK: 클라이언트의 승인(최적화로 함께 데이터 전송) - 클라이언트 -> 서버
    • 과거에는 랜선을 직접 꽂아줬다고 하는데(물리적 연결), TCP 연결은 수많은 노드들을 거치지만 가상연결

  • 데이터 전달 보증

  • 순서 보장

    • 패킷 순서가 달라지면 달라진 패킷부터 다시 보내달라고 요청 보냄(내부적 최적화가 있을수도)

  • 데이터 전달 보증, 순서 보장을 해주기에 신뢰할 수 있는 프로토콜

  • 현재는 대부분 TCP 사용

UDP​

  • 하얀 도화지에 비유(기능이 거의 없음)

  • 연결지향 X - TCP 3 way handshake X

  • 데이터 전달 보증 X

  • 순서 보장 X

  • 데이터 전달 및 순서가 보장되지 않지만, 단순하고 빠름

  • 정리

    • IP와 거의 같다. + PORT + 체크섬정도만 추가
    • 애플리케이션에서 추가 작업 필요

  • HTTP/3는 UDP 위에서 동작함

  • HTTP/2까지는 TCP위에서 동작하지만 TCP의 한계

    • 연결 설정에 3-way handshake 필요 → 느림
    • TCP 연결은 OS 커널 레벨에서 관리 → 브라우저/앱에서 자유롭게 개선 불가
    • TCP 멀티플렉싱 시 한 패킷 손실이 모든 스트림에 영향을 줌(HOL Blocking)

PORT​

  • 한번에 둘 이상 연결해야 하면?
  • PORT - 같은 IP 내에서 프로세스 구분
  • 0 ~ 65535 할당 가능
  • 0 ~ 1023: 잘 알려진 포트, 사용하지 않는 것이 좋음
    • FTP - 20, 21
    • TELNET - 23
    • HTTP - 80
    • HTTPS - 443

내 로컬에 클라이언트, 서버 둘다 띄우고 통신할 때 HTTP로 통신하지만 당연히 요청이 외부를 거치지는 않는다. 이때는 OS가 주소를 해석하여 localhost,127.0.0.1 내부라면, 실제 NIC(이더넷, 와이파이 등)를 사용하지 않고, 루프백 인터페이스를 통해 요청 전송하여, 해당 포트로 라우팅 함

DNS​

3. URI와 웹 브라우저 요청 흐름​

URI​

  • URI(Uniform Resource Identifier)

  • "URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다"

  • URI는 자원을 식별하는 문자열

  • URL(Resource Locator): foo://example.com:8042/over/there?name=ferret#nose

    • URL - Locator: 리소스가 있는 위치를 지정
    • 앞으로 URI를 URL과 같은 의미로 이야기하겠음

  • URN(Resource Name): urn:example:animal:ferret:nose

    • URN - Name: 리소스에 이름을 부여

URL​

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]

  • https://www.google.com:443/search?q=hello&hl=ko

  • 프로토콜(https)

    • 프로토콜: 어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙

  • 호스트명(www.google.com)

  • 포트 번호(443)

  • path(/search)

    • 계층적 구조

  • 쿼리 파라미터(q=hello&hl=ko)

    • 키 밸류

  • fragment

    • html 내부 북마크 등에 사용
    • 서버에 전송하는 정보 아님

웹 브라우저 요청 흐름​

  1. HTTP 요청 메세지 생성
  2. TCP/IP 4계층 따라 메세지 -> 패킷 -> 프레임으로 변환되어 LAN으로 전달
  3. 전달 받은 서버는 응답 메세지를 생성해 역으로 클라이언트에 전송

4. HTTP 기본​

모든 것이 HTTP​

  • HTML, TEXT

  • IMAGE, 음성, 영상, 파일

  • JSON, XML (API)

  • 거의 모든 형태의 데이터 전송 가능

  • 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용

  • 지금은 HTTP 시대!

  • HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X

  • HTTP/1.0 1996년: 메서드, 헤더 추가

  • HTTP/1.1 1997년: 가장 많이 사용, 우리에게 가장 중요한 버전

    • RFC2068 (1997) -> RFC2616 (1999) -> RFC7230~7235 (2014)

  • HTTP/2 2015년: 성능 개선

  • HTTP/3 진행중: TCP 대신에 UDP 사용, 성능 개선

특징​

  • 클라이언트 서버 구조
  • 무상태 프로토콜(스테이스리스), 비연결성
  • HTTP 메시지
  • 단순함, 확장 가능

클라이언트 서버 구조​

  • Request Response 구조
  • 클라이언트는 서버에 요청을 보내고, 응답을 대기
  • 서버가 요청에 대한 결과를 만들어서 응답

Stateful, Stateless​

  • 서버가 클라이언트의 상태를 보존X

  • 장점: 서버 확장성 높음(스케일 아웃)

  • 단점: 클라이언트가 추가 데이터 전송

  • 상태 유지: 중간에 다른 점원으로 바뀌면 안된다. (중간에 다른 점원으로 바뀔 때 상태 정보를 다른 점원에게 미리 알려줘야 한다.)

  • 무상태: 중간에 다른 점원으로 바뀌어도 된다.

    • 갑자기 고객이 증가해도 점원을 대거 투입할 수 있다.
    • 갑자기 클라이언트 요청이 증가해도 서버를 대거 투입할 수 있다.

  • 무상태는 응답 서버를 쉽게 바꿀 수 있다. -> 무한한 서버 증설 가능 -> 수평 확장(scale out)

실무 한계​

  • 모든 것을 무상태로 설계 할 수 있는 경우도 있고 없는 경우도 있다.
  • 무상태
    • 예) 로그인이 필요 없는 단순한 서비스 소개 화면
  • 상태 유지
    • 예) 로그인
  • 로그인한 사용자의 경우 로그인 했다는 상태를 서버에 유지
  • 일반적으로 브라우저 쿠키와 서버 세션등을 사용해서 상태 유지
    • JWT가 주류가 된 이유
  • 상태 유지는 최소한만 사용

비 연결성(connectionless)​

  • HTTP는 기본이 연결을 유지하지 않는 모델
  • 일반적으로 초 단위의 이하의 빠른 속도로 응답
  • 1시간 동안 수천명이 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수십개 이하로 매우 작음
    • 예) 웹 브라우저에서 계속 연속해서 검색 버튼을 누르지는 않는다.
  • 서버 자원을 매우 효율적으로 사용할 수 있음

한계와 극복​

  • TCP/IP 연결을 새로 맺어야 함 - 3 way handshake 시간 추가
  • 웹 브라우저로 사이트를 요청하면 HTML 뿐만 아니라 자바스크립트, css, 추가 이미지등 수 많은 자원이 함께 다운로드
  • 지금은 HTTP 지속 연결(Persistent Connections)로 문제 해결
  • HTTP/2, HTTP/3에서 더 많은 최적화

HTTP 메시지​

  • HTTP는 단순하다. 스펙도 읽어볼만...

  • HTTP 메시지도 매우 단순

  • 크게 성공하는 표준 기술은 단순하지만 확장 가능한 기술

  • HTTP 메시지에 모든 것을 전송

  • HTTP 역사 HTTP/1.1을 기준으로 학습

  • 클라이언트 서버 구조

  • 무상태 프로토콜(스테이스리스)

  • HTTP 메시지

  • 단순함, 확장 가능

  • 지금은 HTTP 시대

상세​

  • start-line = request-line / status-line
    • request-line = method SP(공백) request-target SP HTTP-version CRLF(엔터)
    • HTTP 메서드
      • 서버가 수행해야 할 동작 지정
      • GET: 리소스 조회
      • POST: 요청 내역 처리
    • 요청 대상 (/search?q=hello&hl=ko)
    • HTTP Version
  • HTTP 헤더
    • header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용)
    • field-name은 대소문자 구문 없음
    • HTTP 전송에 필요한 모든 부가정보
      • 예) 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트(브라우저) 정보, 서버 애플리케이션 정보, 캐시 관리 정보...
    • 표준 헤더가 너무 많음(https://en.wikipedia.org/wiki/List_of_HTTP_header_fields)
    • 필요시 임의의 헤더 추가 가능
  • HTTP body
    • 실제 전송할 데이터
    • HTML 문서, 이미지, 영상, JSON 등등 byte로 표현할 수 있는 모든 데이터 전송 가능

5. HTTP 메서드​

HTTP API를 만들어보자​

  • restful 네이밍 설명
  • 가장 중요한 것은 리소스 식별

API URI 고민​

URI(Uniform Resource Identifier)

  • 회원을 등록하고 수정하고 조회하는게 리소스가 아니라 회원이라는 개념 자체가 바로 리소스다.
  • 회원을 등록하고 수정하고 조회하는 것을 모두 배제 - 동작은 리소스가 아님
  • 회원이라는 리소스만 식별하면 된다. -> 회원 리소스를 URI에 매핑

리소스 식별, URI 계층 구조 활용

  • 회원 목록 조회 /members
  • 회원 조회 /members/{id}
  • 회원 등록 /members/{id}
  • 회원 수정 /members/{id}
  • 회원 삭제 /members/{id}
  • 참고: 계층 구조상 상위를 컬렉션으로 보고 복수단어 사용 권장(member -> members)

HTTP 메서드 종류​

  • GET: 리소스 조회
  • POST: 요청 데이터 처리, 주로 등록에 사용
  • PUT: 리소스를 대체, 해당 리소스가 없으면 생성
  • PATCH: 리소스 부분 변경
  • DELETE: 리소스 삭제

HTTP 메서드 - GET, POST​

GET​

  • 리소스 조회
  • 서버에 전달하고 싶은 데이터는 query(쿼리 파라미터, 쿼리 스트링)를 통해서 전달
  • 메시지 바디를 사용해서 데이터를 전달할 수 있지만, 지원하지 않는 곳이 많아서 권장하지 않음

POST​

  • 스펙: POST 메서드는 대상 리소스가 리소스의 고유 한 의미 체계에 따라 요청에 포함 된 표현을 처리하도록 요청합니다. (구글 번역)

  • 요청 데이터 처리

  • 메시지 바디를 통해 서버로 요청 데이터 전달

  • 서버는 요청 데이터를 처리

  • 메시지 바디를 통해 들어온 데이터를 처리하는 모든 기능을 수행한다.

  • 주로 전달된 데이터로 신규 리소스 등록, 프로세스 처리에 사용

    1. 새 리소스 생성(등록): 서버가 아직 식별하지 않은 새 리소스 생성
    1. 요청 데이터 처리
    • 단순히 데이터를 생성하거나, 변경하는 것을 넘어서 프로세스를 처리해야 하는 경우
    • 예) 주문에서 결제완료 -> 배달시작 -> 배달완료 처럼 단순히 값 변경을 넘어 프로세스의 상태가 변경되는 경우
    • POST의 결과로 새로운 리소스가 생성되지 않을 수도 있음
    • 예) POST /orders/{orderId}/start-delivery (컨트롤 URI)
    1. 다른 메서드로 처리하기 애매한 경우
    • 예) JSON으로 조회 데이터를 넘겨야 하는데, GET 메서드를 사용하기 어려운 경우
    • 애매하면 POST

HTTP 메서드 - PUT, PATCH, DELETE​

PUT​

  • 리소스를 있으면 대체/없으면 생성
  • 클라이언트가 리소스를 식별
    • 클라이언트가 리소스 위치를 알고 URI 지정
    • POST와 차이점

HTTP 메서드의 속성​

  • 안전(Safe Methods)

    • 호출해도 리소스를 변경하지 않는다.
    • Q: 그래도 계속 호출해서, 로그 같은게 쌓여서 장애가 발생하면요?
    • A: 안전은 해당 리소스만 고려한다. 그런 부분까지 고려하지 않는다

  • 멱등(Idempotent Methods)

    • **서버의 상태(state)**가 요청에 의해 변하지 않거나, 결과가 동일한 상태로 유지된다면 멱등하다
    • 한 번 호출하든 두 번 호출하든 100번 호출하든 결과가 똑같다
    • 멱등은 외부 요인으로 중간에 리소스가 변경되는 것 까지는 고려하지는 않는다.

  • 캐시가능(Cacheable Methods)

    • 응답 결과 리소스를 캐시해서 사용해도 되는가?
    • 실제로는 GET 정도만 캐시로 사용

6. HTTP 메서드 활용​

클라이언트에서 서버로 데이터 전송​

데이터 전달 방식은 크게 2가지

  • 쿼리 파라미터를 통한 데이터 전송
    • GET
    • 주로 정렬 필터(검색어)
  • 메시지 바디를 통한 데이터 전송
    • POST, PUT, PATCH
    • 회원 가입, 상품 주문, 리소스 등록, 리소스 변경

클라이언트에서 서버로 데이터 전송​

4가지 상황

  • 정적 데이터 조회
    • 이미지, 정적 텍스트 문서
  • 동적 데이터 조회
    • 주로 검색, 게시판 목록에서 정렬 필터(검색어)
  • HTML Form을 통한 데이터 전송
    • 회원 가입, 상품 주문, 데이터 변경
  • HTTP API를 통한 데이터 전송
    • 회원 가입, 상품 주문, 데이터 변경
    • 서버 to 서버, 앱 클라이언트, 웹 클라이언트(Ajax)

HTML Form 데이터 전송​

  • HTML Form submit시 POST 전송 - 회원 가입, 상품 주문, 데이터 변경
  • Content-Type: application/x-www-form-urlencoded 사용
    • form의 내용을 메시지 바디를 통해서 전송(key=value, 쿼리 파라미터 형식)
    • 전송 데이터를 url encoding 처리- abc김 -> abc%EA%B9%80
  • HTML Form은 GET 전송도 가능
  • Content-Type: multipart/form-data
  • 파일 업로드 같은 바이너리 데이터 전송시 사용
  • 다른 종류의 여러 파일과 폼의 내용 함께 전송 가능(그래서 이름이 multipart)
  • 참고: HTML Form 전송은 GET, POST만 지원

HTTP API 데이터 전송​

  • 서버 to 서버 - 백엔드 시스템 통신
  • 앱 클라이언트 - 아이폰, 안드로이드
  • 웹 클라이언트
    • HTML에서 Form 전송 대신 자바 스크립트를 통한 통신에 사용(AJAX)
    • 예) React, VueJs 같은 웹 클라이언트와 API 통신
  • POST, PUT, PATCH: 메시지 바디를 통해 데이터 전송
  • GET: 조회, 쿼리 파라미터로 데이터 전달
  • Content-Type: application/json을 주로 사용 (사실상 표준)
    • TEXT, XML, JSON 등등

HTTP API 설계 예시​

  • HTTP API - 컬렉션
    • POST 기반 등록 - 서버가 리소스 URI 결정
    • 예) 회원 관리 API 제공
  • HTTP API - 스토어
    • PUT 기반 등록 - 클라이언트가 리소스 URI 결정
    • 예) 정적 컨텐츠 관리, 원격 파일 관리
  • HTML FORM 사용
    • 순수 HTML + HTML form 사용
    • GET, POST만 지원
    • 컨트롤 URI
      • GET, POST만 지원하므로 제약이 있음
      • 이런 제약을 해결하기 위해 동사로 된 리소스 경로 사용
      • POST의 /new, /edit, /delete가 컨트롤 URI
      • HTTP 메서드로 해결하기 애매한 경우 사용(HTTP API 포함)

회원 관리 시스템​

API 설계 - POST 기반 등록

  • 회원 목록 /members -> GET
  • 회원 등록 /members -> POST
  • 회원 조회 /members/{id} -> GET
  • 회원 수정 /members/{id} -> PATCH, PUT, POST
  • 회원 삭제 /members/{id} -> DELETE

POST는 등록 될 자원의 URI를 모르고 PUT은 알아야 함

참고하면 좋은 URI 설계 개념​

restful api 설계 개념

  • 문서(document)
    • 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row)
    • 예) /members/100, /files/star.jpg
  • 컬렉션(collection)
    • 서버가 관리하는 리소스 디렉터리
    • 서버가 리소스의 URI를 생성하고 관리
    • 예) /members
  • 스토어(store)
    • 클라이언트가 관리하는 자원 저장소
    • 클라이언트가 리소스의 URI를 알고 관리
    • 예) /files
  • 컨트롤러(controller), 컨트롤 URI
    • 문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스 실행
    • 동사를 직접 사용
    • 예) /members/{id}/delete

7. HTTP 상태코드​

HTTP 상태코드 소개​

  • 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능

  • 비즈니스 에러의 경우 200에 에러메세지를 담아 보냄(데이터독같은 서비스에서 200이 아니면 에러로 나오기 때문)

  • 1xx (Informational): 요청이 수신되어 처리중

  • 2xx (Successful): 요청 정상 처리

  • 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요

  • 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음

  • 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함

  • 클라이언트가 인식할 수 없는 상태코드를 서버가 반환하면 클라이언트는 상위 상태코드로 해석해서 처리

  • 299 ??? -> 2xx (Successful)

  • 451 ??? -> 4xx (Client Error)

  • 599 ??? -> 5xx (Server Error)

2xx - 성공​

  • 200 OK
  • 201 Created - 새로운 리소스가 생성
  • 202 Accepted - 요청이 접수되었으나 처리가 완료되지 않았음
  • 204 No Content

3xx - 리다이렉션​

  • 웹 브라우저는 3xx 응답의 결과에 Location 헤더가 있으면, Location 위치로 리다이렉트 함

  • 301 Moved Permanently

  • 302 Found

  • 303 See Other

  • 304 Not Modified - 캐시

  • 307 Temporary Redirect

  • 308 Permanent Redirect

영구 리다이렉션 301, 308​

  • 리소스의 URI가 영구적으로 이동
  • 원래의 URL를 사용X, 검색 엔진 등에서도 변경 인지
  • 301은 리다이렉트시 요청 메서드가 GET으로 변하고, 본문이 제거될 수 있음(MAY)
  • 308은 리다이렉트시 요청 메서드와 본문 유지(처음 POST를 보내면 리다이렉트도 POST 유지)

일시적인 리다이렉션 302, 307, 303​

  • 리소스의 URI가 일시적으로 변경

  • 따라서 검색 엔진 등에서 URL을 변경하면 안됨

  • 중복 요청을 방지해야 할 때, redirect 시켜서 막음

  • 302 Found -> GET으로 변할 수 있음

  • 307 Temporary Redirect -> 메서드가 변하면 안됨

  • 303 See Other -> 메서드가 GET으로 변경

  • 역사

    • 처음 302 스펙의 의도는 HTTP 메서드를 유지하는 것
    • 그런데 웹 브라우저들이 대부분 GET으로 바꾸어버림(일부는 다르게 동작)
    • 그래서 모호한 302를 대신하는 명확한 307, 303이 등장함(301 대응으로 308도 등장)

  • 현실

    • 307, 303을 권장하지만 현실적으로 이미 많은 애플리케이션 라이브러리들이 302를 기본값으로 사용
    • 자동 리다이렉션시에 GET으로 변해도 되면 그냥 302를 사용해도 큰 문제 없음

4xx - 클라이언트 오류, 5xx - 서버 오류​

4xx​

  • 클라이언트의 요청에 잘못된 문법등으로 서버가 요청을 수행할 수 없음
  • 오류의 원인이 클라이언트에 있음
  • 중요! 클라이언트가 이미 잘못된 요청, 데이터를 보내고 있기 때문에, 똑같은 재시도가 실패함

400 Bad Request​

  • 클라이언트가 잘못된 요청을 해서 서버가 요청을 처리할 수 없음
  • 요청 구문, 메시지 등등 오류 - 요청 파라미터가 잘못되거나, API 스펙이 맞지 않을 때
  • 클라이언트는 요청 내용을 다시 검토하고, 보내야함

401 Unauthorized​

클라이언트가 해당 리소스에 대한 인증이 필요함

  • 인증(Authentication) 되지 않음
  • 401 오류 발생시 응답에 WWW-Authenticate 헤더와 함께 인증 방법을 설명
  • 참고
    • 인증(Authentication): 본인이 누구인지 확인, (로그인)
    • 인가(Authorization): 권한부여 (ADMIN 권한처럼 특정 리소스에 접근할 수 있는 권한, 인증이 있어야 인가가 있음)
    • 오류 메시지가 Unauthorized 이지만 인증 되지 않음 (이름이 아쉬움)

403 Forbidden​

  • 주로 인증 자격 증명은 있지만, 접근 권한이 불충분한 경우
  • 어드민 등급이 아닌 사용자가 로그인은 했지만, 어드민 등급의 리소스에 접근하는 경우

404 Not Found​

  • 요청 리소스가 서버에 없음
  • 또는 클라이언트가 권한이 부족한 리소스에 접근할 때 해당 리소스를 숨기고 싶을 때

5xx (Server Error)​

  • 서버 문제로 오류 발생
  • 서버에 문제가 있기 때문에 재시도 하면 성공할 수도 있음(복구가 되거나 등등)

500 Internal Server Error​

  • 서버 내부 문제로 오류 발생
  • 애매하면 500 오류

503 Service Unavailable​

  • 서버가 일시적인 과부하 또는 예정된 작업으로 잠시 요청을 처리할 수 없음
  • Retry-After 헤더 필드로 얼마뒤에 복구되는지 보낼 수도 있음

8. HTTP 헤더1 - 일반 헤더​

HTTP 헤더 개요​

  • header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용)
  • field-name은 대소문자 구문 없음
  • HTTP 전송에 필요한 모든 부가정보(메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보...)
  • 표준 헤더가 너무 많음
  • https://en.wikipedia.org/wiki/List_of_HTTP_header_fields
  • 필요시 임의의 헤더 추가 가능
  • helloworld: hihi

헤더 분류​

  • General 헤더: 메시지 전체에 적용되는 정보, 예) Connection: close

  • Request 헤더: 요청 정보, 예) User-Agent: Mozilla/5.0 (Macintosh; ..)

  • Response 헤더: 응답 정보, 예) Server: Apache

  • Entity 헤더: 엔티티 바디 정보, 예) Content-Type: text/html, Content-Length: 3423

    • 메시지 본문(message body)은 엔티티 본문(entity body)을 전달하는데 사용
    • 엔티티 본문은 요청이나 응답에서 전달할 실제 데이터
    • 엔티티 헤더는 엔티티 본문의 데이터를 해석할 수 있는 정보 제공
    • 데이터 유형(html, json), 데이터 길이, 압축 정보 등등

  • 엔티티(Entity) -> 표현(Representation)

  • Representation = representation Metadata + Representation Data

  • 표현 = 표현 메타데이터 + 표현 데이터

엔티티 헤더라는 말은 거의 들어본적 없는데 과거에 사용되었던 용어이고 현재는 표현이라 함

  • 메시지 본문(message body)을 통해 표현 데이터 전달
  • 메시지 본문 = 페이로드(payload)
  • 표현은 요청이나 응답에서 전달할 실제 데이터
  • 표현 헤더는 표현 데이터를 해석할 수 있는 정보 제공
  • 데이터 유형(html, json), 데이터 길이, 압축 정보 등등

표현​

  • Content-Type: 표현 데이터의 형식
    • text/html; charset=utf-8
    • application/json
    • image/png
  • Content-Encoding: 표현 데이터의 압축 방식
    • 데이터를 전달하는 곳에서 압축 후 인코딩 헤더 추가
    • 데이터를 읽는 쪽에서 인코딩 헤더의 정보로 압축 해제
    • gzip, deflate, identity
  • Content-Language: 표현 데이터의 자연 언어
  • Content-Length: 표현 데이터의 길이
    • 바이트 단위
    • Transfer-Encoding(전송 코딩)을 사용하면 Content-Length를 사용하면 안됨
  • 표현 헤더는 전송, 응답 둘다 사용

콘텐츠 협상​

클라이언트가 선호하는 표현 요청

  • Accept: 클라이언트가 선호하는 미디어 타입 전달
  • Accept-Charset: 클라이언트가 선호하는 문자 인코딩
  • Accept-Encoding: 클라이언트가 선호하는 압축 인코딩
  • Accept-Language: 클라이언트가 선호하는 자연 언어
  • 협상 헤더는 요청시에만 사용

협상 우선순위​

  • Quality Values(q) 값 사용

  • 0~1, 클수록 높은 우선순위

  • 생략하면 1

  • Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7

  • 구체적인 것이 우선한다.

  • Accept: text/_, text/plain, text/plain;format=flowed, _/*

    1. text/plain;format=flowed
    2. text/plain
    3. text/*
    4. */*

전송 방식​

  • 단순 전송
  • 압축 전송 - Content-Encoding: gzip
  • 분할 전송 - Transfer-Encoding: chunked
  • 범위 전송
    • 대용량 데이터를 분할해서 각각 개별 범위로 전송
    • Range: bytes=1001-2000
    • Content-Range: bytes 1001-2000 / 2000

일반 정보​

  • From: 유저 에이전트의 이메일 정보
    • 요청에서 사용
    • 일반적으로 잘 사용되지 않음
    • 검색 엔진 같은 곳에서, 주로 사용
  • Referer: 이전 웹 페이지 주소
    • 요청에서 사용
    • 현재 요청된 페이지의 이전 웹 페이지 주소
    • A -> B로 이동하는 경우 B를 요청할 때 Referer: A 를 포함해서 요청
    • Referer를 사용해서 유입 경로 분석 가능
  • User-Agent: 유저 에이전트 애플리케이션 정보
    • 요청에서 사용
    • 클라이언트의 애플리케이션 정보(웹 브라우저 정보, 등등)
    • 통계 정보
    • 어떤 종류의 브라우저에서 장애가 발생하는지 파악 가능
  • Server: 요청을 처리하는 오리진 서버의 소프트웨어 정보
    • 응답에서 사용
  • Date: 메시지가 생성된 날짜
    • 응답에서 사용

특별한 정보​

  • Host: 요청한 호스트 정보(도메인)
    • 요청에서 사용
    • 필수
    • 하나의 서버가 여러 도메인을 처리해야 할 때
    • 하나의 IP 주소에 여러 도메인이 적용되어 있을 때
  • Location: 페이지 리다이렉션
    • 웹 브라우저는 3xx 응답의 결과에 Location 헤더가 있으면, Location 위치로 자동 이동(리다이렉트)
    • 응답코드 3xx에서 설명
    • 201 (Created): Location 값은 요청에 의해 생성된 리소스 URI
    • 3xx (Redirection): Location 값은 요청을 자동으로 리디렉션하기 위한 대상 리소스를 가리킴
  • Allow: 허용 가능한 HTTP 메서드
    • 405 (Method Not Allowed) 에서 응답에 포함해야함
    • Allow: GET, HEAD, PUT
  • Retry-After: 유저 에이전트가 다음 요청을 하기까지 기다려야 하는 시간
    • 503 (Service Unavailable): 서비스가 언제까지 불능인지 알려줄 수 있음
    • Retry-After: Fri, 31 Dec 1999 23:59:59 GMT (날짜 표기)
    • Retry-After: 120 (초단위 표기)

인증​

클라이언트 인증 정보를 서버에 전달

  • 인증 방식마다 값이 다르다
  • Authorization: Basic xxxxxxxxxxxxxxxx

쿠키​

  • Set-Cookie: 서버에서 클라이언트로 쿠키 전달(응답)
  • Cookie: 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달
    • 사용자 로그인 세션 관리
    • 광고 정보 트래킹
  • 쿠키 정보는 항상 서버에 전송됨
    • 네트워크 트래픽 추가 유발
    • 최소한의 정보만 사용(세션 id, 인증 토큰)
    • 서버에 전송하지 않고, 웹 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지 (localStorage, sessionStorage) 참고
  • 보안에 민감한 데이터는 저장하면 안됨(주민번호, 신용카드 번호 등등)
  • 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지
  • 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지

쿠키 - 도메인​

  • 명시: 명시한 문서 기준 도메인 + 서브 도메인 포함
    • domain=example.org를 지정해서 쿠키 생성
    • example.org는 물론이고
    • dev.example.org도 쿠키 접근
  • 생략: 현재 문서 기준 도메인만 적용
    • example.org 에서 쿠키를 생성하고 domain 지정을 생략
    • example.org 에서만 쿠키 접근
    • dev.example.org는 쿠키 미접근

쿠키 - 경로​

  • 이 경로를 포함한 하위 경로 페이지만 쿠키 접근 - path=/home
  • 일반적으로 path=/ 루트로 지정
    • path=/home 지정
    • /home -> 가능
    • /home/level1 -> 가능
    • /home/level1/level2 -> 가능
    • /hello -> 불가능

쿠키 - 보안​

  • Secure
    • 쿠키는 http, https를 구분하지 않고 전송
    • Secure를 적용하면 https인 경우에만 전송
  • HttpOnly
    • XSS 공격 방지
    • 자바스크립트에서 접근 불가(document.cookie)
    • HTTP 전송에만 사용
  • SameSite - 나름 최신
    • XSRF 공격 방지
    • 요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키 전송

9. HTTP 헤더2 - 캐시와 조건부 요청​

캐시 기본 동작​

캐시가 없으면 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다.

  • 인터넷 네트워크는 상대적으로 매우 느리고 비싸다.
  • 로딩 속도가 느림, 느린 사용자 경험

캐시 적용 시 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다.

  • 비싼 네트워크 사용량을 줄일 수 있다.
  • 상대적으로 로딩 속도가 매우 빠르다, 빠른 사용자 경험

검증 헤더와 조건부 요청1​

  • 캐시 유효 시간이 초과해서 서버에 다시 요청하면 다음 두 가지 상황이 나타난다.
  1. 서버에서 기존 데이터를 변경함 -> 새로 받아야 함
  2. 서버에서 기존 데이터를 변경하지 않음

  • 데이터가 같다는 사실을 확인하면 캐시를 재사용 할 수 있다.

  • 검증 헤더는 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터를 담는 헤더이다.

  • 검증 헤더로 조건에 따른 분기

  • Last-Modified, ETag

  • If-Modified-Since: Last-Modified 사용

  • If-None-Match: ETag 사용

  • 조건이 만족하면 200 OK

  • 조건이 만족하지 않으면 304 Not Modified

검증헤더 Last-Modified​

  • 응답 메세지에 검증헤더 추가 Last-Modified: 2020년 11월 10일 10:00:00

  • 해당 리소스의 요청헤더에 if-modified-since: 2020년 11월 10일 10:00:00 자동 추가 -> 응답에는 304 및 body 없음

    • 캐시 유효 시간이 초과해도, 서버의 데이터가 갱신되지 않으면
    • 304 Not Modified + 헤더 메타 정보만 응답(바디X)
    • 클라이언트는 서버가 보낸 응답 헤더 정보로 캐시의 메타 정보를 갱신
    • 클라이언트는 캐시에 저장되어 있는 데이터 재활용
    • 결과적으로 네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드

  • Nginx는 정적 파일 서빙 시 기본적으로 **파일 시스템의 mtime(수정 시간)**을 보고 Last-Modified 헤더를 자동으로 응답에 추가한다 함

검증 헤더와 조건부 요청2​

Last-Modified, If-Modified-Since 단점​

  • 1초 미만(0.x초) 단위로 캐시 조정이 불가능
  • 날짜 기반의 로직 사용
  • 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우
  • 서버에서 별도의 캐시 로직을 관리하고 싶은 경우
  • 예) 스페이스나 주석처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경우

ETag​

  • ETag(Entity Tag)
  • 캐시용 데이터에 임의의 고유한 버전 이름을 달아둠
    • 예) ETag: "v1.0", ETag: "a2jiodwjekjl3"
  • 데이터가 변경되면 이 이름을 바꾸어서 변경함(Hash를 다시 생성)
    • 예) ETag: "aaaaa" -> ETag: "bbbbb"
  • 진짜 단순하게 ETag만 보내서 같으면 유지, 다르면 다시 받기!
  • 캐시 제어 로직을 서버에서 완전히 관리, 클라이언트는 단순히 이 값을 서버에 제공(클라이언트는 캐시 메커니즘을 모름)
    • 서버는 배타 오픈 기간인 3일 동안 파일이 변경되어도 ETag를 동일하게 유지
    • 애플리케이션 배포 주기에 맞추어 ETag 모두 갱신

캐시와 조건부 요청 헤더​

캐시 제어 헤더​

  • Cache-Control: 캐시 제어
    • max-age: 캐시 유효 시간, 초 단위
    • no-cache: 데이터는 캐시해도 되지만, 항상 원(origin) 서버에 검증하고 사용
    • no-store: 데이터에 민감한 정보가 있으므로 저장하면 안됨
  • Pragma: 캐시 제어(하위 호환) - HTTP 1.0 하위 호환
  • Expires: 캐시 유효 기간(하위 호환) - 캐시 만료일 지정
    • 지금은 더 유연한 Cache-Control: max-age 권장
    • Cache-Control: max-age와 함께 사용하면 Expires는 무시

프록시 캐시​

  • 원서버 - 프록시 캐시 서버 - 클라이언트
  • 속도 향상을 위해 컨텐츠를 사용자와 물리적으로 가까운 프록시 캐시 서버에서 반환하게 동작
  • Cache-Control:
    • public: public 캐시에 저장되어도 됨
    • private: 응답이 해당 사용자만을 위한 것임, private 캐시에 저장해야 함(기본값)
    • s-maxage: 프록시 캐시에만 적용되는 max-age
    • Age: 60 (HTTP 헤더): 오리진 서버에서 응답 후 프록시 캐시 내에 머문 시간(초)

캐시 무효화​

  • Cache-Control: no-cache, no-store, must-revalidate
    • 내가 알기론 no-store만 써도 된다