이전 글에서 말했듯 모의 면접을 진행했을 때 이 질문이 나왔었지만 제대로 된 대답을 하지 못했습니다.
오늘은 우리가 google.com
에 접속하여 google
이 우리에게 웹페이지를 렌더링하기까지의 과정을 공부해보도록 하겠습니다.
사용자가 google.com
을 웹 브라우저에 입력합니다.
서버, 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 모두 IP 주소
라는 고유한 주소가 있습니다.
IP 주소
에는 3.34.220.186
와 같은 4
개의 번호가 매겨진 부분이 있으며 이를 통해 특정 사이트에 접속할 수 있습니다.
물론 google.com
에 접속할 때에도 IP
를 사용해야 하는데 google.com
은 숫자가 아닌 것이 보이죠?
www.google.com
은 도메인 이름을 기반으로 서버에서 그에 맞는 IP
주소를 찾아줍니다.
이는 우리가 숫자 IP
를 하나하나 암기하여 칠 수고를 덜어주게 됩니다.
google.com
을 주소창에 입력한 뒤 enter
를 치면 웹 브라우저는 해당 도메인에 해당하는 IP
주소를 찾아야 합니다.
입력한 url
을 바탕으로 DNS
서버에 연결할 IP
를 요청하는 것인데 이 때 DNS 조회
라는 작업을 사용합니다.
DNS(Domain Name System)란?
사람이 읽을 수 있는 도메인 이름(예: www.google.com)을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환해주는 것
ISP
의 DNS
서버가 DNS
쿼리로 www.google.com
을 호스팅하는 서버의 IP
주소를 찾습니다.
ISP란?
기업 네트워크 같은 인터넷 서비스 제공업체
쿼리란?
DNS 서버가 이름을 IP 주소로 변환하여 도메인 이름을 웹 브라우저에 입력할 때 최종 사용자를 어떤 서버에 연결할 것인지를 제어하는 요청
웹 브라우저가 인터넷에서 서버를 찾으면 웹 서버와 TCP 연결을 설정하고, HTTP
를 통해 평문 통신을 시작합니다.
TCP/IP(Transmission Control Protocol/Internet Protocol)란?
컴퓨터가 서로 통신하는 경우, 특정 규칙이나 프로토콜을 사용하여 순서대로 데이터를 전송 및 수신할 수 있는데 이 때 전 세계적으로 가장 일상적으로 사용되는 프로토콜 세트 중 하나
그런데 HTTPS
를 사용하는 경우에는 HTTPS
가 HTTP
에서 보안이 더 좋아진 것이기 때문에 주고 받는 데이터의 암호화를 위한 TLS (Transport Layer Security) 핸드셰이크
라는 추가 과정을 수행합니다.
TLS (Transport Layer Security) 핸드셰이크란?
암호화를 할 상호 대상을 확인하는 것
서버가 요청을 처리하고 응답을 보낸다.
서버가 HTTP 응답을 보낸다.
응답은 웹 페이지와 필요한 리소스를 포함합니다.
웹 브라우저가 서버에 연결되면, 웹 브라우저가 페이지에 있는 각종 정보를 요청하기 위해 서버에 HTTP
요청을 전송합니다.
HTTP
요청에는
GET
요청에 대해서는 비어있다. POST
PUT
PATCH
와 같이 리소스를 조작하는 요청의 경우에는 생성 또는 업데이트할 클라이언트의 데이터가 여기에 포함된다.이 세 가지가 있습니다.
또한 요청 라인에는 다음이 포함됩니다.
GET
, POST
, PUT
, PATCH
, DELETE
또는 몇 가지 다른 HTTP
동사 중 하나인 요청 메서드HTTP
버전위에서 HTTP
요청을 보내면 웹 서버는 요청 라인, 헤더, 본문의 정보에 따라 응답하게 되며 응답에는 다음이 포함됩니다.
HTTP
버전과 요청 상태의 숫자 및 텍스트 표현이 모두 포함된다.아래는 HTTP
응답 예시입니다.
HTTP/1.1 200 OK
Date: Tue, 25 May 2021 19:40:59 GMT
Server: Apache
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
Cache-Control: max-age=0, no-cache
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
X-Mod-Pagespeed: 1.13.35.2-0
Content-Encoding: br
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
<!DOCTYPE html>
<html lang="ko">
<head>
나머지 HTML 항목
드디어 브라우저가 사용자에게 웹 페이지를 렌더링하여 보여주게 됩니다.
위에서 응답 헤더라는 것이 브라우저에게 응답 처리 방법을 알려준다고 했는데 바로 이 응답 헤더를 검사하여 어떠한 타입의 리소스를 렌더링할지를 결정합니다.
만약 Content-Type
헤더가 HTML
이라면 HTML
리소스를 렌더링할 것이고,
image
라면 image
파일들을 렌더링할 것입니다.
이러한 과정을 거쳐 지금 우리가 보고 있는 웹 페이지를 사용자에게 제공할 수 있는 것입니다.
이렇게 항상 우리가 봐왔던 google
웹페이지에 접속하기까지의 과정을 짚어보았는데 1초 남짓되는 시간동안 이렇게 다양한 요청과 응답이 있을 줄 몰랐습니다.
또 공부를 하는 동안 TCP/IP
TLS
등 모르는 용어가 상당히 많이 나와 CS
공부에 대한 경각심까지 일깨워진 것 같습니다.
오류가 있을 수 있습니다. 또 부족한 부분도 있을 것인데 알려주시면 감사하겠습니다.
지금까지 읽어주셔서 감사합니다.