01. URL 검색 시 동작 원리

URL 검색 시 밀리초 안에 펼쳐지는 마법

 

 

 

 

URL을 브라우저 주소 표시줄에 입력하고 Enter 키를 누르면 발생하는 일련의 과정에 대한 내용을 요약한 것입니다. 아래는 해당 내용을 번역한 것입니다:

 

"URL의 여정: 키보드에서 웹 페이지로 완전히 로드되는 과정! 🌐

 

브라우저의 주소 표시줄에 URL을 입력하고 Enter 키를 누르면 어떤 마법이 몇 밀리초 동안 벌어지는지 궁금했던 적이 있나요? 🤔

 

밀리초 동안 펼쳐지는 마법을 해석해보겠습니다! ⏱️

 

🌐 DNS(Domain Name System)의 역할:

 

브라우저는 DNS의 레코드의 캐시를 확인 하여 www.mypage.com 의 주소를 찾습니다.

1. 브라우저는 DNS레코드를 찾기 위해 순서대로 4개의 캐시를 확인합니다.

1. 브라우저 캐시를 확인합니다. 이전에 방문한 웹사이트에 대해 고정된 기간 동안 DNS 레코드 저장소를 유지 관리합니다.
2. OS 캐시를 확인합니다. 브라우저는 기본 컴퓨터 OS에 시스템 호출(예: Windows의 경우 gethostname)을 보내 레코드를 가져옵니다.
3. 라우터 캐시를 확인합니다. 자체 DNS레코드 캐시를 유지 관리하는 라우터와 통신합니다.
4. ISP 캐시를 확인합니다. ISP는 DNS 레코드 캐시를 포함하는 자체 DNS 서버를 유지 관리합니다. URL을 찾기위한 마지막 희망으로 이를 확인합니다.

Cashe는 네트워크 트래픽을 조절하고 데이터 전송 시간을 개선하는 데 필수적이므로 많은 수준에서 관리하고 있습니다.

 

ISP란 (Internet service provider; ISP 인터넷 서비스 제공자) 인터넷에 접속하는 수단을 제공하는 주체를 가리키는 말입니다. 그 주체는 영리를 목적으로 하는 사기업인 경우가 대다수이나 비영리 공동체가 주체인 경우도 있습니다.

 

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

DNS query의 목적은 여러 다른 DNS 서버들을 검색해서 해당 사이트의 IP 주소를 찾는 것입니다. 이러한 검색을 recursive search(재귀적 검색) 라고 합니다. IP 주소를 찾을 때 까지 DNS 서버에서 다른 DNS 서버를 오가면 서 반복적으로 검색을 시도합니다. 못 찾을 경우는 에러를 반환합니다 .

 

이 상황에서, ISP의 DNS 서버를 DNS recursor라고 부릅니다. 다른 DNS 서버들은 name server 라고 부릅니다.

 

 

각 레벨별로 자신들만의 name 서버가 있습니다.

 

www.mypage.com에 대해서,

1. DNS recursor가 root name server에 연락
2. root name server는 .com name server로 리다이렉트
3. .com name server는 mypage.com name server로 리다이렉트
4. mypage.com name server는 DNS 기록에서 www.mypage.com에 매칭되는 IP 주소를 찾고 DNS recursor로 전송
5. DNS recursor는 이를 사용자의 브라우저로 전송

이 모든 요청들은 작은 데이터 패킷들을 통해서 보내집니다. 패킷 안에는 보내는 요청의 내용과 DNS recursor의 IP 주소가 포함되어 있습니다. 이 패킷들은 원하는 DNS 기록을 가진 DNS 서버에 도달할 때 까지 클라이언트와 서버를 여러번 오갑니다. 패킷들이 움직이는 것도 Routing table에 기반합니다. Routing table을 통해서 어떤 길로 가야 가장 빠른지 확인할 수 있습니다. 만약 패킷이 도중에 loss되면 request fail error가 발생하게 됩니다.

 

🖥️ 클라이언트 측 마법:

1. TCP 연결 설정: 브라우저는 연결을 설정하기 위해 TCP/IP 3-way 핸드셰이크 (SYN, SYN-ACK, ACK)를 시작합니다.
2. HTTP 요청: 서버에 GET 요청이 전송됩니다.
3. 브라우저 엔진: 브라우저 엔진이 네트워크 작업과 렌더링 엔진 간의 조정을 담당합니다.

🖥️ 서버 측 마법:

서버 응답: 서버는 상태 코드와 함께 응답합니다:

• 1xx: 정보 메시지
• 2xx: 성공
• 3xx: 리디렉션
• 4xx: 클라이언트 오류
• 5xx: 서버 오류

🌍 웹 페이지 렌더링:

1. Tokenizer 및 DOM 트리: HTML이 구문 분석되고 DOM 트리가 생성됩니다.
2. CSSOM 트리: CSS가 CSS 개체 모델 (CSSOM) 트리로 구문 분석됩니다.
3. 렌더 트리: DOM 및 CSSOM 트리가 결합됩니다.
4. 레이아웃 및 페인팅: 최종 레이아웃이 계산되고 화면에 그려집니다.

웹 페이지가 로드됩니다!

 

핵심 개념을 빠뜨렸을까요?

reference

• https://medium.com/@maneesa/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a
• https://devjin-blog.com/what-happen-browser-search/
• https://www.linkedin.com/feed/update/urn:li:activity:7104787767296942081/