Post

브라우저 주소창에 google.com을 입력한다면?

브라우저 주소창에 google.com을 입력한다면?

브라우저 주소창에 google.com을 입력한다면?

브라우저 주소창에 google.com을 입력하면 어떤 일이 벌어질까요? URL 입력부터 웹 페이지가 화면에 나타나기까지의 전체 과정을 7단계로 나누어 살펴보겠습니다.


1. DNS 캐시 확인

DNS(Domain Name System)는 URL의 이름과 IP 주소를 저장하고 있는 데이터베이스입니다. 인터넷에 있는 모든 URL에는 고유의 IP 주소가 지정되어 있습니다. 이 IP 주소를 통해서 해당 웹 사이트를 호스팅하고 있는 서버 컴퓨터에 접근할 수 있습니다.

google.com의 IP 주소를 알아보려면 터미널에서 nslookup google.com을 입력합니다.

2022-11-12-image1 nslookup 명령어 실행 결과

DNS의 가장 큰 목적은 사람들에게 편리함을 주기 위함입니다. 숫자로 된 IP 주소를 작성해도 원하는 웹 사이트에 접속할 수 있지만, 사람은 네이버, 다음, 구글처럼 이름을 외우는 것에 더 친숙합니다.

웹 사이트 이름을 브라우저에 검색하면 브라우저는 DNS 기록을 4가지 캐시에서 순차적으로 확인합니다:

  1. 브라우저 캐시: 브라우저는 일정 기간 동안의 DNS 기록을 저장
  2. OS 캐시: 브라우저 캐시에서 IP 주소가 발견되지 않으면 systemcall을 통해 OS 캐시에 접근
  3. Router 캐시: 컴퓨터에서 DNS 기록을 찾지 못하면 router와 통신
  4. ISP 캐시: ISP는 DNS 서버를 구축하고 있고, 브라우저는 마지막으로 여기서 DNS 기록을 찾음

캐시는 네트워크 트래픽을 조절하고 데이터 전송 시간을 줄이기 위해 매우 중요합니다.


2. DNS Query 실행

요청한 URL이 캐시에 없으면, ISP의 DNS 서버가 google.com을 호스팅하고 있는 서버의 IP 주소를 찾기 위해 DNS query를 날립니다.

DNS Query의 목적은 여러 DNS 서버를 검색해서 해당 사이트의 IP 주소를 찾는 것입니다. 이러한 검색을 recursive search라고 부릅니다. IP 주소를 찾을 때까지 DNS 서버에서 다른 DNS 서버를 오가면서 반복적으로 검색합니다.

2022-11-12-image2 도메인 이름의 계층 구조

google.com DNS 조회 과정:

  1. DNS recursor가 root name server에 연락
  2. root name server는 .com 도메인 name server로 리다이렉트
  3. .com name server는 google.com name server로 리다이렉트
  4. google.com name server는 DNS 기록에서 google.com에 매칭 되는 IP 주소를 찾고 DNS recursor로 전송

3. TCP Connection 수립

브라우저가 올바른 IP 주소를 받게 되면 서버와 connection을 빌드하게 됩니다. 웹 사이트의 HTTP 요청에는 일반적으로 TCP를 사용합니다.

클라이언트와 서버 간 데이터 패킷이 오가려면 TCP connection이 되어야 합니다. 이는 TCP/IP three-way handshake 프로세스를 통해 이뤄집니다.

  1. SYN: 클라이언트가 서버에 connection을 열어달라고 요청
  2. SYN/ACK: 서버가 새로운 connection을 시작할 수 있는 포트가 있다면 응답
  3. ACK: 클라이언트가 SYN/ACK를 받으면 서버에게 확인 패킷 전송

이 과정이 끝나면 TCP connection이 완성됩니다.


4. HTTP 요청 전송

TCP로 연결이 되었다면 이제 데이터를 전송할 차례입니다. 클라이언트의 브라우저는 GET 요청을 통해 서버에게 google.com 웹 페이지를 요구합니다. 비밀 자료를 포함하거나 form을 제출하는 상황에서는 POST 요청을 사용할 수도 있습니다.

요청에 포함되는 정보는 다음과 같습니다.

  • User-Agent: Browser identification
  • Accept: 받아들일 요청의 종류
  • Connection: 추가적인 요청을 위해 TCP connection 유지 요청
  • Cookie: 저장된 쿠키 정보

5. 서버의 요청 처리

서버는 웹 서버(NginX, NodeJs, Apache, IIS 등)를 가지고 있습니다.

  1. 브라우저로부터 요청을 받음
  2. 요청을 Python, Go, JS, JAVA 등으로 작성된 프로그램에 전달
  3. 요청의 헤더, 쿠키를 읽어서 요청 내용 파악
  4. 필요시 서버에 정보 업데이트
  5. 특정 포맷으로 응답 작성 (JSON, XML, HTML 등)

6. HTTP Response 반환

서버의 response에는 요청한 웹 페이지, Status code, Compress type, Cache-Control, 설정할 쿠키, 개인 정보 등이 포함됩니다.

2022-11-12-image3 샘플 HTTP response headers


7. HTML 렌더링

브라우저는 HTML content를 단계적으로 보여줍니다.

  1. HTML 스켈레톤 렌더링
  2. HTML tag 체크
  3. 추가 필요한 웹 페이지 요소들 GET 요청 (CSS, JavaScript, 이미지 등)
  4. 정적 파일 브라우저 캐싱
  5. google.com 완성!

정적 파일들은 브라우저에 의해 캐싱되어 나중에 해당 페이지를 방문할 때 다시 서버로부터 불러오지 않아도 됩니다.


결론

google.com을 검색하고 웹 페이지가 뜰 때까지 엄청 많은 일이 일어나지만, 이 모든 과정은 1초도 안 걸려요.

This post is licensed under CC BY 4.0 by the author.