[CS] 우리가 google 웹페이지에 접속하기까지의 과정을 알아보자 (웹페이지 접속 과정)

Haeun Noh·2024년 3월 19일
0

CS

목록 보기
2/3
post-thumbnail

0319


이전 글에서 말했듯 모의 면접을 진행했을 때 이 질문이 나왔었지만 제대로 된 대답을 하지 못했습니다.

오늘은 우리가 google.com에 접속하여 google이 우리에게 웹페이지를 렌더링하기까지의 과정을 공부해보도록 하겠습니다.



1. 사용자가 URL을 웹 브라우저에 입력합니다.

사용자가 google.com을 웹 브라우저에 입력합니다.

서버, 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 모두 IP 주소라는 고유한 주소가 있습니다.
IP 주소에는 3.34.220.186 와 같은 4개의 번호가 매겨진 부분이 있으며 이를 통해 특정 사이트에 접속할 수 있습니다.

물론 google.com에 접속할 때에도 IP를 사용해야 하는데 google.com은 숫자가 아닌 것이 보이죠?

www.google.com은 도메인 이름을 기반으로 서버에서 그에 맞는 IP주소를 찾아줍니다.
이는 우리가 숫자 IP를 하나하나 암기하여 칠 수고를 덜어주게 됩니다.



2. 웹 브라우저는 입력한 URL을 바탕으로 DNS 서버에 연결할 IP를 요청합니다.

google.com을 주소창에 입력한 뒤 enter를 치면 웹 브라우저는 해당 도메인에 해당하는 IP주소를 찾아야 합니다.

입력한 url을 바탕으로 DNS서버에 연결할 IP를 요청하는 것인데 이 때 DNS 조회라는 작업을 사용합니다.

DNS(Domain Name System)란?
사람이 읽을 수 있는 도메인 이름(예: www.google.com)을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환해주는 것



3. DNS 서버는 IP 주소를 웹 브라우저에게 응답으로 제공합니다.

ISPDNS 서버가 DNS 쿼리로 www.google.com을 호스팅하는 서버의 IP 주소를 찾습니다.

ISP란?
기업 네트워크 같은 인터넷 서비스 제공업체

쿼리란?
DNS 서버가 이름을 IP 주소로 변환하여 도메인 이름을 웹 브라우저에 입력할 때 최종 사용자를 어떤 서버에 연결할 것인지를 제어하는 요청



4. 웹 브라우저는 DNS 서버에서 받은 IP를 통해 웹 서버와 TCP/IP 연결을 합니다.

웹 브라우저가 인터넷에서 서버를 찾으면 웹 서버와 TCP 연결을 설정하고, HTTP를 통해 평문 통신을 시작합니다.

TCP/IP(Transmission Control Protocol/Internet Protocol)란?
컴퓨터가 서로 통신하는 경우, 특정 규칙이나 프로토콜을 사용하여 순서대로 데이터를 전송 및 수신할 수 있는데 이 때 전 세계적으로 가장 일상적으로 사용되는 프로토콜 세트 중 하나

그런데 HTTPS를 사용하는 경우에는 HTTPSHTTP에서 보안이 더 좋아진 것이기 때문에 주고 받는 데이터의 암호화를 위한 TLS (Transport Layer Security) 핸드셰이크라는 추가 과정을 수행합니다.

TLS (Transport Layer Security) 핸드셰이크란?
암호화를 할 상호 대상을 확인하는 것



5. 웹 브라우저가 HTTP 요청을 서버로 전송합니다.

서버가 요청을 처리하고 응답을 보낸다.
서버가 HTTP 응답을 보낸다.
응답은 웹 페이지와 필요한 리소스를 포함합니다.

웹 브라우저가 서버에 연결되면, 웹 브라우저가 페이지에 있는 각종 정보를 요청하기 위해 서버에 HTTP 요청을 전송합니다.

HTTP 요청에는

  • 요청 라인
    • 브라우저(클라이언트)가 수행하려는 작업이 포함됨
  • 헤더(또는 요청에 대한 메타데이터)
  • 본문
    • 요청의 맨 마지막 부분
    • GET요청에 대해서는 비어있다.
    • POST PUT PATCH와 같이 리소스를 조작하는 요청의 경우에는 생성 또는 업데이트할 클라이언트의 데이터가 여기에 포함된다.

이 세 가지가 있습니다.

또한 요청 라인에는 다음이 포함됩니다.

  • GET, POST, PUT, PATCH, DELETE 또는 몇 가지 다른 HTTP 동사 중 하나인 요청 메서드
  • 요청된 리소스를 가리키는 경로
  • 통신할 HTTP 버전


6. 웹 서버는 받은 HTTP 요청에 응답합니다.

위에서 HTTP 요청을 보내면 웹 서버는 요청 라인, 헤더, 본문의 정보에 따라 응답하게 되며 응답에는 다음이 포함됩니다.

  • 상태 라인: 클라이언트에게 요청 상태를 알려준다.
    • HTTP 버전과 요청 상태의 숫자 및 텍스트 표현이 모두 포함된다.
  • 응답 헤더: 브라우저에게 응답 처리 방법을 알려준다.
  • 리소스: HTML/CSS/JavaScript, image 파일과 같은 콘텐츠 데이터이다.

아래는 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 항목


7. 웹 브라우저는 받은 응답을 바탕으로 사용자에게 웹 페이지를 보여줍니다.

드디어 브라우저가 사용자에게 웹 페이지를 렌더링하여 보여주게 됩니다.

위에서 응답 헤더라는 것이 브라우저에게 응답 처리 방법을 알려준다고 했는데 바로 이 응답 헤더를 검사하여 어떠한 타입의 리소스를 렌더링할지를 결정합니다.

만약 Content-Type헤더가 HTML이라면 HTML리소스를 렌더링할 것이고,
image라면 image파일들을 렌더링할 것입니다.

이러한 과정을 거쳐 지금 우리가 보고 있는 웹 페이지를 사용자에게 제공할 수 있는 것입니다.



이렇게 항상 우리가 봐왔던 google 웹페이지에 접속하기까지의 과정을 짚어보았는데 1초 남짓되는 시간동안 이렇게 다양한 요청과 응답이 있을 줄 몰랐습니다.

또 공부를 하는 동안 TCP/IP TLS등 모르는 용어가 상당히 많이 나와 CS 공부에 대한 경각심까지 일깨워진 것 같습니다.

오류가 있을 수 있습니다. 또 부족한 부분도 있을 것인데 알려주시면 감사하겠습니다.
지금까지 읽어주셔서 감사합니다.



profile
기록의 힘을 믿는 개발자, 노하은입니다!

0개의 댓글