브라우저가 주소창에 입력된 URL을 어떻게 처리하나요?

브라우징 중 특정 네이티브 앱을 사용하는 경우를 제외하면 대부분의 웹 페이지는 브라우저로 브라우징됩니다. 그렇다면 특정 URL을 브라우저에서 열 때, 브라우저가 콘텐츠를 로드하고 표시하는 과정은 어떻게 이루어질까요? 이벤트가 발생하는 순서에 따라 브라우저가 수행한 작업을 보여드리겠습니다.

사용자 입력: 브라우저에서 URL 입력#

이전 블로그 게시물에서 우리는 URL의 구성 요소, 호스트/도메인 (예: www.google.com blog.logto.io 등)에 대해 설명했습니다.

호스트/도메인으로 IP 주소 조회#

브라우저는 호스트/도메인을 직접 이해하고 해당 리소스를 찾을 수 없으며, 웹 페이지에 필요한 리소스의 위치를 찾기 위해 특정 IP 주소를 알아야 합니다.

브라우저는 도메인 이름 시스템(DNS)을 통해 호스트/도메인에 해당하는 IP 주소를 찾습니다.

IP 주소를 가능한 한 빠르게 찾기 위해 호스트/도메인과 IP 주소 간의 대응 관계는 브라우저 캐시, 운영 체제 캐시 등 다양한 캐시를 사용합니다.

캐시 조회가 실패하면 정규 DNS 조회 과정을 통해 호스트/도메인의 IP 주소를 찾습니다. 단계는 다음과 같습니다:

1. 사용자가 웹 브라우저에 blog.logto.io를 입력하면, 웹 브라우저는 DNS 서비스에 IP 주소를 요청하고 해당 쿼리는 DNS 해석기가 받습니다.
2. DNS 해석기는 루트 서버 (.)에 DNS 조회를 합니다.
3. 루트 서버는 최상위 도메인(TLD) DNS 서버(.io의 경우)와 관련 정보를 반환합니다.
4. DNS 해석기는 .io TLD 서버에 조회를 합니다.
5. .io TLD 서버는 logto.io 이름 서버 주소를 응답합니다.
6. DNS 해석기는 logto.io 도메인 이름 서버에 요청을 보냅니다.
7. logto.io 도메인 이름 서버는 blog.logto.io 주소를 응답합니다.
8. DNS 해석기는 blog.logto.io IP 주소를 웹 브라우저에 반환합니다.

웹 브라우저는 그 후 서버에서 해당 리소스를 요청하고, 웹사이트를 렌더링하여 사용자가 볼 수 있도록 합니다.

TCP 연결 설정#

DNS 서비스를 통해 탐색할 도메인에 해당하는 IP 주소를 얻은 후, 웹 브라우저는 서버와 TCP 연결을 시작하고 설정합니다.

리소스 가져오기 및 웹 페이지 렌더링#

TCP 연결을 설정한 후, 브라우저는 서버에 네트워크 요청을 보내 필요한 리소스를 가져오고, 얻은 리소스를 기반으로 웹 페이지 콘텐츠를 렌더링하여 사용자가 열람할 수 있게 합니다.