[Network] 웹 브라우저의 요청 흐름(feat. HTTP 메시지)

웹 브라우저 요청 흐름과 HTTP 메시지에 대해서 알아보자!

웹 브라우저가 서버에 요청을 보내면?

1. 브라우저 주소창에 주소 입력! 🖥️🖱️

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

2. HTTP 요청 메시지 전송 (웹 브라우저 ➡️ 서버)

(1) DNS 서버 조회

• IP 주소 찾아낸다.
  
  

(2) HTTP 요청 메세지 생성

GET/search?q=hello&hl=ko HTTP/1.1
Host: www.google.com

1. 웹 브라우저가 HTTP 메시지 생성
2. SOKET 라이브러리를 통해 전달
3. TCP/IP 패킷 생성, HTTP 메시지 포함

(3) 요청 패킷 전달

(4) 요청 패킷 서버에 도착

• 서버는 요청 패킷이 도착하면 TCP/IP 패킷 다 까서 버린다.
• 그리고 HTTP 메시지를 끄집어 낸다.
• 그걸로 해석하고, 데이터를 찾는다.
  
  

3. HTTP 응답 메시지 (서버 ➡️ 웹 브라우저)

(5) HTTP 응답 메세지 생성

HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
Content-Length: 3423

< html >
< body >...< /body >
< /html >

(6) 응답 패킷 전달

(7) 응답 패킷 도착

• 서버에서 보낸 응답 패킷을 웹 브라우저가 보게된다.
• HTTP 응답 메시지를 열면 HTML 데이터가 들어있다.
• 이걸 까서 웹 브라우저는 HTML 렌더링을 한다.

4. 최종적으로 HTML 결과 웹 브라우저 화면에 렌더링

웹 브라우저의 요청 흐름을 살펴봤다. 클라이언트와 서버가 데이터를 주고받을 때 HTTP 메시지를 이용한다. HTTP 메시지 구조가 어떻게 생겼는지 알아보자! 🚀🚀🚀

HTTP 메시지

• HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식
• HTTP 메시지 타입에는 요청(requests)과 응답(responses)이 있다.
  • 요청은 클라이언트가 서버로 전달해서 서버의 액션이 일어나게끔 하는 메시지
  • 응답은 요청에 대한 서버의 답변
• HTTP 메시지는 HTTP에서 핵심적인 역할

🚀 시작 라인(start-line)

요청 메시지의 시작 라인 = request-line

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

1) HTTP 메서드(GET, POST, PUT, DELETE 등)

• 서버가 수행해야 할 동작 지정
• GET: 리소스 조회 (리소스 가져옴)
• POST: 요청 내역 처리 (데이터 전송)
  
  

2) 요청 대상(/search?q=hello&hl=ko)

• 리소스 경로
• 절대경로[?쿼리]
• 절대경로 = "/"로 시작하는 경로
  
  

3) HTTP 버전 (HTTP/1.1)

응답 메시지의 시작라인 = status-line

HTTP/1.1 200 OK

1) HTTP 버전

2) HTTP 상태코드

• 요청의 성공 여부
• 200: 성공
• 400: 클라이언트 요청 오류
• 500: 서버 내부 오류

3) 이유 문구

• 사람이 이해할 수 있는 짧은 상태 코드 설명 글
  
  

🚀 헤더

• HTTP 전송에 필요한 모든 부가정보
• 예) 메시지 바디의 내용이나 크기, 인증, 요청 브라우저 정보, 캐시 관리 정보 등

🚀 공백 라인(CRLF)

• 공백 라인은 무조건 들어가야 한다.
• 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄

🚀 메시지 바디(선택 사항)

• 실제 전송할 데이터
• 요청 메시지도 body 본문 가질 수 있다. (전송할 데이터 없으면 공백)
• HTML 문서, 이미지, 영상, JSON 등등 byte로 표현할 수 있는 모든 데이터 전송 가능

참고

모든 개발자를 위한 HTTP 웹 기본 지식 (인프런 김영한님 강의)
HTTP 메시지(MDN)
HTTP란 무엇입니까?