클라이언트가 요청하고 응답까지 받는 과정

클라이언트가(브라우저가) 어떻게 웹 페이지를 여는가?

1. API호출해서 서버로부터 응답을 받는다. (웹페이지에 대한 응답)

-- Client Server architecture 라고 한다.

2. Google map 에 접속한다고 치자. 아래 URL은 아래를 의미한다.

-- https://www.google.com/maps

https = protocol

www.google.com = Domain name

maps = Resource

DNS 통해서 www.google.com 을 해석함 (DNS Lookup). 그 후 real ip를 알아낼 수 있음.

그 후에, Server와 Client의 TCP/IP Connection 을 맺는다.

-- TCP/IP가 하는일

--- 요청과 응답을 여러개의 작은 단위로 나눈다.

--- 이 단위들이 목적지에 도달했을 때 재조립한다.

--- IP 프로토콜은 이 단위들이 인터넷 프로토콜을 통해서 움직일 수 있도록 한다.

그 후 HTTP Request를 한다. 

-- Start line = HTTP Method + request target + HTTP Version

-- HTTP Request headers (Host, User-Agent, Accept-Language

-- BODY = Request body (서버에 데이터 보낼때 있음 (Post 같은 메소드로)

서버로부터 HTTP Response가 온다.

-- Start line = HTTP Version , Status code, Status message

-- HTTP response headers (Date, Content-type, Transfer-Encoding.. )

-- BODY 

이제 브라우저가 HTML, CSS, JS로 렌더링한다.

Static vs Dynamic Website

정적 웹사이트

-- 서버가 갖고 있는 데이터로, 클라가 요청한 대로 준다.

-- 백엔트 코드는 별로 안거치는..그냥 서빙만 한다

-- HTML, CSS, JS를 건네준다.

동적 웹사이트

-- 데이터베이스를 갖고 있다.

-- 데이터를 DB에서 가져와서, 웹사이트를 만들어준다. 그리고 서빙한다.

-- 서버 사이드 렌더링이라고도 한다.

-- DB에 있는 데이터에 따라서 웹사이트가 달라지기도 한다. (유튜브 개인화 대문느낌?)

-- 서버에서 조립 후 HTML, CSS, JS를 건네준다.

API powered website

-- DB에서 동적 웹사이트처럼 가져와서 조합하지만, HTML, CSS, JS를 건네주지 않는다

-- JSON을 건넨다

-- 클라가 JSON으로 받은 데이터로 그려준다 

-- 클라이언트 사이드 렌더링.