https://browser.engineering 의 Chapter 1을 이해하기 쉽게 슬라이드로 요약한 자료입니다.

1. Browser Engineering
(Ch1. Web Browser Engineering)
Jaeyeol Lee(@malkoG)
Frontend Deep Divers

2. 브라우저가 일반 사용자에게 웹페이지를 표시하기 위해서,
먼저 웹페이지 문서의 카피를 가지고 있어야 한다.
Connecting to a server (1)
Client

3. 브라우저는 OS에다가 인터넷 어딘가에 있는 서버로 연결이 닿을 수 있도록 지시한다.
(인터럽트 발생)
Connecting to a server (2)
Client
Server
example.org
example.org

4. OS는 DNS 서버와 데이터를 주고 받는다.
DNS 서버는 호스트의 이름을 목적지 IP 주소로 변환하는 역할을 한다.
Connecting to a server (3)
Client Server
example.org
93.184.216.34
Name Value
example.org 93.184.216.34
google.com 8.8.8.8
example.org

5. Device Driver를 통해 유선으로든, 무선으로든 신호를 보낸다.
Connecting to a server (4)
Server
example.org
Client
Device
Driver
Connect
93.184.216.34

6. Device Driver를 통해 보낸 시그널은 네트워크 상에 있는 라우터를 타고타고 전송된다.
Connecting to a server (5)
Server
example.org
Client
Device
Driver
Connect
93.184.216.34

7. 라우터를 타고 전달되는 과정에서는,
결과적으로 목적지 IP에 도달하는데 가장 최적인 방향으로 전달된다.
Connecting to a server (5) Cont.
Server
example.org
Client
Device
Driver
Connect
93.184.216.34

8. 클라이언트의 PC를 통해 전달된 메시지가 서버에 도착하게 되면,
클라이언트와 서버 사이의 연결이 만들어지기 시작한다.
Connecting to a server (6)
Client
Server
example.org
Connection Established

9. Requesting Information (1)
Request Line
● HTTP Method
브라우저가 서버에 요청하는 행위
(조회, 생성, 갱신, 삭제 등등)
● Path
어떤 리소스에 대한 요청인지
● HTTP Version
HTTP 0.9, 1.0, 1.1, 2.0, …
HTTP 1.1 : keep-alive 기능이 추가됨
HTTP 2.0

10. Requesting Information (2)
Request Headers
● 이후에 표시되는 N개의 라인은
전부 Request 헤더의 필드를
나타낸다고 봐도 됨.
● 각각의 헤더가 어떤 의미를 가지는지는 RFC 2616을 참고
● ex. Request 헤더의 Host 필드는 어떤 서버에 대한 요청인지를 명시함

11. Requesting Information (3)
A single blank line
● Header들의 Line이 끝나고 나면
"여기까지가 요청의 끝"이라는 의미로
Blank line을 추가해줘야 한다.
(눈으로는 보이지않는 rn)
● 주의 : Blank line이 없으면 서버는 요청 내용이 더 없는지를 기다리며
newline이 올때까지 계속 기다린다.
○ 클라이언트도 역시 서버에서 response가 올 때까지 계속해서 기다리게 된다.

12. The server’s response (1) - Response Line
Response Line
● HTTP Version
● Response Code
○ 1xx : Informational
○ 2xx : Success
○ 3xx : Most of all is Redirection
○ 4xx : Client did wrong request
○ 5xx : Server handled request wrong way
● Response Description

13. The server’s response (2) - Response Headers
요청한 리소스에 대한 정보
● Content-Type
● Content-Length
● Last-Modified

14. The server’s response (3) - Response Headers
서버에 대한 정보
● Server
● X-Cache

15. The server’s response (4) - Response Headers
브라우저가 얼마동안 캐싱해야하는지
● Cache-Control
● Expires
● Etag

16. The server’s response (5) - Body
응답 헤더 뒤에는 반드시 빈칸이 있어야 한다.
빈 칸 뒤에는 response의 body가 포함될 수도 있다.
(Telnet으로 요청보냈을때의 응답)

17. 감사합니다.