형주의 블로그

브라우저에 URL을 입력하면 일어나는 일

2022-08-10

프론트엔드 기술 면접에서 받았던 질문입니다.

Q. 브라우저에 URL을 입력하면 일어나는 일들을 설명해주세요.
A. 브라우저가 주소창에 입력된 URL 값을 DNS 서버로 전송하여 IP주소를 받아옵니다. 해당 IP 주소로 html과 같은 리소스 파일을 요청합니다. 받아온 리소스 파일을 브라우저가 렌더링하여 사용자에게 보여줍니다.

Q. 그렇다면 브라우저가 받아온 리소스를 어떻게 렌더링하나요?
A. 브라우저가 html 파일을 파싱하여 DOM 트리를 구성합니다. css 파일 또한 파싱하여 CSSOM 트리를 구성하고, 이 두 트리를 합쳐 렌더 트리를 구성합니다. 이 렌더 트리를 기반으로 렌더링하게 됩니다.

제 답이 큰 틀에서 벗어나게 틀린 부분은 없었지만 말하면서도 중간 과정이 많이 생략된 것 같았습니다. 이 주제에 대해 조금 더 자세하게 정리해보겠습니다.

왜 이런 질문을 하는걸까?

  • 웹 브라우저
  • PC의 운영체제
  • 인터넷 서비스 제공업체
  • 웹 사이트를 호스팅하는 서버
  • 해당 서버에서 실행되는 서비스
  • 위의 동작방식을 알고 있는가
  • 실제 문제가 발생할 수 있는 위치와 성능 문제를 찾을 수 있는 위치를 파악할 수 있는가
  • 사용자에게 안전한 경험을 제공하고 있는가

위와 같이 하나의 질문을 통해 많은 것들에 대한 지식을 확인할 수 있습니다.

URL의 구조

https://channy.creation.net/blog/hello-world

통신 규약(Protocol) https:// 는 통신 프로토콜을 나타냅니다.

도메인(Domain) channy.creation.net은 웹 사이트의 도메인 이름입니다.

경로(Path) blog는 hello-world라는 리소스로 이어지는 경로입니다. 이는 컴퓨터의 파일 구조처럼 blog라는 디렉토리 내부에 hello-world라는 파일이 있는 것과 동일합니다.

리소스(Resource) hello-world는 웹 사이트가 요청한 .html과 같은 파일 확장자를 갖는 데이터입니다.

URL은 브라우저가 어떤 방법(protocol)으로 어떤 서버에(domain) 서버의 어떤 경로(path)에 위치한 파일(resource)을 요청하는지를 표현합니다.

1. 웹 브라우저가 도메인 명의 IP 주소 조회

DNS를 통해 도메인을 이용하여 웹 사이트를 호스팅하는 서버의 IP 주소를 알 수 있습니다. DNS는 매우 복잡하고 빨라야 하기 때문에 DNS 데이터를 웹 브라우저 사이의 서로 다른 계층과 인터넷의 다양한 위치에 임시로 저장됩니다. 웹 브라우저는 고유한 캐시, 운영 체제 캐시, 라우터의 로컬 네트워크 캐시, 회사 네트워크 또는 인터넷 서비스 제공업체(ISP)의 DNS 서버 캐시를 확인합니다.

웹 브라우저는 먼저 캐시 계층에서 도메인에 해당하는 IP 주소가 존재하는지 확인합니다. IP 주소가 존재하지 않은 경우 ISP의 DNS 서버가 인터넷에 있는 여러 DNS 서버에 검색을 요청하여 IP 주소를 찾을 때 까지 재귀적 DNS 조회를 수행합니다.

특정 웹 브라우저는 DNS-Prefetch 기능을 가지고 있습니다. 이는 사용자가 링크를 따라가기 전에 미리 도메인 네임을 확인하는 기능입니다. third party 서버에 요청이 많은 웹 사이트에서 사용하면 요청 전에 도메인 이름을 resolve하여 latency를 개선할 수 있습니다.

2. 웹 브라우저가 서버와의 TCP 연결 시작

인터넷에 연결된 웹 브라우저 요청 패킷은 일반적으로 TCP/IP라고 하는 전송 제어 프로토콜을 사용하여 라우터, 인터넷 서비스 제공회사 교환기를 통해 이동됩니다.
통신 회사간 경로인 라우팅 테이블을 따라서 연결할 IP 주소가 있는 웹 서버를 찾습니다. traceroute domain-name 명령어를 통해 거쳐야 하는 라우터의 정보를 알 수 있습니다.

hyeongju@jeonghyeongjuui-MacBookAir ~ % traceroute nokiahub.site
traceroute: Warning: nokiahub.site has multiple addresses; using 34.142.199.10
traceroute to nokiahub.site (34.142.199.10), 64 hops max, 52 byte packets
 1  172.30.1.254 (172.30.1.254)  22.903 ms  7.487 ms  6.114 ms
 2  14.52.217.254 (14.52.217.254)  10.673 ms  26.740 ms  12.266 ms
 3  121.138.235.145 (121.138.235.145)  14.728 ms  14.330 ms  25.882 ms
 4  61.78.42.167 (61.78.42.167)  10.197 ms  36.568 ms  40.978 ms
 5  112.189.15.197 (112.189.15.197)  15.947 ms
    112.189.29.121 (112.189.29.121)  57.949 ms
    112.189.28.121 (112.189.28.121)  8.687 ms

웹 브라우저가 라우팅 테이블을 따라 웹 서버를 찾게 됩니다. 그 후에 웹 서버와 TCP 연결을 설정하고, HTTP를 통해 평문 통신을 시작합니다. HTTPS를 사용하는 경우에는 TLS 핸드셰이크라는 과정을 통해 데이터를 암호화 하여 통신합니다. 서버와의 연결 설정 후에는 리소스를 가져오기 위한 HTTP 요청 전송을 합니다.

3. 웹 브라우저가 HTTP 요청을 서버로 전송

페이지의 컨텐츠를 요청하기 위해 서버에 HTTP 요청을 전송합니다.

HTTP 요청 구성요소
  • 요청 라인
  • 요청 헤더
  • 본문

요청 라인
HTTP의 요청 라인에 클라이언트가 수행하려는 작업에 대한 정보를 포함합니다.

GET /blog/hello-world HTTP/1.1

요청 헤더

Host: 호스트
User-Agent: 사용자 에이전트
Accept: 클라이언트가 이해 가능한 컨텐츠 타입이 무엇인지를 나타냄

4. 웹 서버가 요청을 처리하고 응답을 다시 전송

웹 서버는 받은 요청 정보를 통해 경로에 위치한 콘텐츠를 클라이언트에게 응답합니다.
응답에는 다음이 포함됩니다.

  • 요청 상태
  • 응답 처리 방법을 알려주는 응답 헤더
  • 리소스

5. 웹 브라우저가 콘텐츠 렌더링

웹 브라우저가 서버로부터 받은 응답의 헤더를 검사하여 리소스의 타입을 알아낸 후, 해당 타입의 리소스를 렌더링하는 방법을 확인합니다.
응답 처리 방법을 알려주는 응답 헤더인 Content-Type은 이러한 리소스의 타입을 나타냅니다.
Content-Type을 보고 웹 브라우저가 어떤 방식으로 렌더링을 할지 정하게 됩니다.

받은 HTML 파일이 다른 CSS, Javascript를 참조할 수 있고, 이에 대한 추가적인 요청을 해야할 수 있습니다. 추가적으로 웹 브라우저는 CSS 파일을 요청하게 되고 요청에 대해 또 다시 Content-Type 헤더가 브라우저에게 CSS 파일은 어떤 방식으로 렌더링 할지 정하게 됩니다.

참고자료

Amazon Web Services - 웹 브라우저에 URL을 입력하면 어떤 일이 생기나요?
mdn - Using dns-prefetch