본 글은 김영한 님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하고 공부한 내용을 정리하기 위해 작성되었습니다.

Background

웹 브라우저의 요청 흐름

1. DNS 조회(IP 주소 찾기) & PORT 정보 확인 (HTTPS의 경우 기본적으로 443 포트 사용)
2. HTTP 요청 메시지 생성
3. HTTP 메시지 전송

   HTTP 메시지 전송

   1. 웹 브라우저가 HTTP 메시지 생성
   2. SOCKET 라이브러리를 통해 전달
   3. TCP/IP 패킷 생성 (출발지 IP, PORT, 목적지 IP, PORT, HTTP 메시지(전송데이터) 포함)

4. 서버에 TCP/IP 패킷 도착
5. 서버에서 응답 패킷 전달
6. 웹 브라우저에서 HTTP 응답 메시지(응답 패킷)를 받아서 웹 브라우저 HTML 렌더링
   
   

HTTP (HyperText Transfer Protocol)

• W3 상에서 정보를 주고받을 수 있는 프로토콜
• HTTP/1.1과 HTTP/2는 TCP를 기반 프로토콜로 사용하고, HTTP/3는 UDP를 기반 프로토콜로 사용한다.

참고

• F12 > Network > Name > Protocol을 체크하면 기반 프로토콜을 확인할 수 있는데, h3는 HTTP/3를 의미한다.
  

HTTP 특징

1. 클라이언트 서버 구조

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

Q. 클라이언트와 서버를 분리하는 게 좋은 이유는?
A. 비즈니스 로직, 데이터는 서버에 사용성, UI는 클라이언트에 집중시킬 수 있다.
→ 클라이언트와 서버가 각각 독립적으로 진화하는 것이 가능하다.

2. 무상태 프로토콜 (stateless)

• 서버가 클라이언트의 상태를 보존하지 않는다.
  • 장점: 서버 확장성이 높다 (스케일 아웃에 유리) → 갑자기 클라이언트의 요청이 증가해도 서버를 대거 투입할 수 있다.
  • 단점: 클라이언트가 추가 데이터를 전송해야 한다.
• 상태 유지는 최소화하여 설계하는 것이 좋으며, 꼭 상태를 유지해야 하는 상황(로그인 등)에는 브라우저 쿠키와 서버 세션 등을 사용하여 상태를 유지한다.

Stateful vs. Stateless

• Stateful: 항상 같은 서버가 유지되어야 한다.
• Stateless: 상태를 보관하지 않기 때문에 아무 서버나 호출해도 된다.

3. 비연결성 (connectionless)

• HTTP는 기본적으로 연결을 유지하지 않는 모델으로 불필요한 서버 자원 소모 없이 최소한의 자원을 사용하여 연결을 지원하며, 일반적으로 초 단위의 이하의 빠른 속도로 응답한다.
• 장점
  • 1시간 동안 수천명이 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수십개 이하인 경우가 많기 때문에, 서버 자원을 효율적으로 사용하는 것이 가능하다.
• 단점
  • 매번 TCP/IP 연결을 새로 맺기 때문에 3 way handshake 시간이 추가된다.
  • 웹 브라우저로 사이트를 요청하면 HTML 뿐만 아니라 javascript, css, 추가 이미지 등
    등 수 많은 자원이 함께 다운로드 되기 때문에 더 많은 시간이 낭비된다.
  • 현재는 HTTP 지속 연결(Persistent Connections)로 문제 해결을 해결하였으며, HTTP/2, HTTP/3에서 더 많은 최적화가 일어났다.

    지속 연결
    연결 후 HTML, javascript, css 등의 파일을 모두 응답 받은 후 종료

    
    

HTTP 메시지 구조

HTTP-message   = start-line
                 *( header-field CRLF )
                 CRLF
                 [ message-body ]

start-line

1. request-line

method SP request-target SP HTTP-version CRLF

GET /search?q=hello&hl=ko HTTP/1.1

1. HTTP 메서드: 서버가 수행해야 할 동작을 지정한다.
   • GET: 리소스 조회
   • POST: 요청 내역 처리
2. 요청 대상 (request-target)
   • absolute-path[?query] (절대경로[?쿼리])
     • 절대경로: "/" 로 시작하는 경로
3. HTTP Version

2. status-line

HTTP-version SP status-code SP reason-phrase CRLF

HTTP/1.1 200 OK

• HTTP 버전
• HTTP 상태코드(status-code): 요청 성공 또는 실패 여부를 나타낸다.
  • 200: 성공
  • 400: 클라이언트 요청 오류
  • 500: 서버 내부 오류
• 이유 문구(reason-phrase): 사람이 이해할 수 있도록 짧게 상태 코드를 설명하는 문구

header

field-name ":" OWS field-value OWS 
  * OWS: Optional Whitespace
  * field-name은 대소문자를 구분하지 않는다.

Host: www.google.com
Content-Type: text/html;charset=UTF-8
Content-Length: 3423

• HTTP 전송에 필요한 모든 부가정보를 저장
  • e.g. 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트(브라우저) 정보, 서버 애플리케이션 정보, 캐시 관리 정보
• 필요시 임의의 헤더를 추가할 수 있다.

message body

• 실제 전송할 데이터가 들어있다.
• HTML, 텍스트, 이미지, 음성, 영상, 파일, JSON, XML (API) 등 거의 모든 형태의 데이터 전송이 가능하다.
• 서버간에 데이터 통신에도 대부분 HTTP를 사용한다.

---

Source

• 모든 개발자를 위한 HTTP 웹 기본 지식
• https://tools.ietf.org/html/rfc7230#section-3
• https://en.wikipedia.org/wiki/List_of_HTTP_header_fields