What happens when you type a URL in the web browser? (검색창에 http://google.com 을 검색하면, DNS에서 어떤 일이 일어나나요?)

브라우저에 URL을 입력하면 어떤 일이 일어나는지 궁금해 본 적이 있는가? 그것은 기술 면접에서 흔히 하는 질문입니다. 이 블로그에서는 URL을 입력하면 백그라운드에서 어떤 일이 일어나는지 차근차근 확인할 수 있습니다. 시작하겠습니다.

1. You enter the URL in the browser. (브라우저에 URL을 입력한다.)

당신이 애프터아카데미의 웹사이트를 방문하고 싶다고 가정해보자. 따라서 브라우저의 주소 표시줄에 afteracademy.com을 입력합니다. URL을 입력하면 기본적으로 웹 사이트가 호스팅되는 서버에 연결할 수 있습니다.

 

2. The browser looks for the IP address of the domain name in the DNS(Domain Name Server).
(브라우저가 DNS(Domain Name Server)에서 도메인 이름의 IP 주소를 찾는다.)

DNS는 URL의 목록이며 전화번호부처럼 해당 IP 주소가 사람의 이름에 해당하는 전화번호를 가집니다. 우리는 IP 주소를 입력하면 웹사이트에 바로 접속할 수 있지만, 어떤 웹사이트든 방문할 수 있는 번호들을 기억한다고 상상해보세요. 그래서 우리는 웹사이트 이름만 기억하고 이름과 IP 주소의 매핑은 DNS에서 합니다.

 

DNS는 다음 위치에서 IP 주소를 확인합니다.

1. Check Browser Cach(브라우저 캐시 검사): 브라우저는 일정 시간 동안 DNS 레코드의 캐시를 유지합니다. DNS 쿼리를 실행하는 첫 번째 위치입니다.
2. Check OS Cache(OS 캐시 확인): 브라우저에 캐시가 없는 경우 OS가 DNS 레코드의 캐시를 유지 관리하므로 기본 운영 체제에 요청합니다.
3. Router Cache(라우터 캐시): 컴퓨터에 캐시가 없는 경우 라우터가 DNS 레코드의 캐시를 가지고 있는 것처럼 라우터를 검색합니다.
4. ISP(Internet Service Provider) Cache(ISP(인터넷서비스 제공자) 캐시) : 위 3곳에서 IP주소가 발견되지 않으면 ISP가 DNS 레코드를 유지 관리하는 캐시에서 검색합니다. 여기서도 찾을 수 없는 경우 ISP의 DNS 재귀 검색이 수행됩니다. DNS 재귀 검색에서 DNS 서버는 IP 주소를 찾기 위해 여러 다른 DNS 서버와 통신하는 DNS 쿼리를 시작합니다.

 

3. The Browser initiates a TCP connection with the server.
(브라우저가 서버와의 TCP 연결을 시작한다.)

브라우저가 IP 주소를 수신하면 인터넷 프로토콜을 사용하여 브라우저와 서버 간의 연결을 구축합니다. 가장 일반적으로 사용되는 프로토콜은 TCP 프로토콜이다. 연결은 3방향 handshake를 사용하여 설정됩니다. 그것은 3단계의 과정이다.

1단계(SYN): 클라이언트가 연결을 설정하고자 할 때 서버에 SYN(Synchronize Sequence Number)을 전송하여 클라이언트가 통신을 시작하고자 함을 알립니다.
2단계(SYN + ACK): 서버가 연결을 허용할 준비가 되어 있고 열린 포트가 있는 경우, 서버가 SYN-ACK 패킷과 함께 보낸 패킷을 승인합니다.
3단계(ACK): 마지막 단계에서 클라이언트는 ACK 패킷을 전송하여 서버의 응답을 확인합니다. 따라서 신뢰할 수 있는 연결이 설정되고 데이터 전송이 지금 시작될 수 있습니다.

 

4. The browser sends an HTTP request to the server.
(브라우저가 HTTP 요청을 서버로 전송합니다.)

브라우저는 afteracademy.com 웹페이지를 요청하는 GET 요청을 서버로 보냅니다. 또한 이 도메인에 대해 브라우저가 가지고 있는 쿠키를 보냅니다. 쿠키는 웹 사이트가 상태 정보를 기억하거나(아마존과 같은 웹 사이트의 쇼핑 카트 또는 위시리스트에 있는 항목) 사용자의 검색 기록 등을 기록하도록 설계되었다. 또한 요청 헤더 필드(User-Agent)와 같은 추가 정보가 있어 클라이언트가 요청 및 클라이언트 자체에 대한 정보를 서버로 전달할 수 있습니다. Accept-Language 헤더와 같은 다른 헤더 필드는 클라이언트가 이해할 수 있는 언어를 서버에 알려줍니다. 이러한 모든 헤더 필드가 함께 추가되어 HTTP 요청을 형성합니다.

 

HTTP 요청 예제: 이제 HTTP 요청을 형성하기 위해 이 모든 것을 종합해 보겠습니다. 아래의 HTTP 요청은 afteracademy.com에서 실행 중인 웹 서버에서 abc.html 페이지를 가져옵니다.

GET /abc.htm HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.afteracademy.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

5. The server handles the incoming request and sends an HTTP response.
(서버는 수신 요청을 처리하고 HTTP 응답을 발송합니다.)

서버는 HTTP 요청을 처리하고 응답을 발송합니다. 첫 번째 줄을 상태 줄이라고 합니다. 상태 줄은 프로토콜 버전(예: HTTP/1.1)과 숫자 상태 코드(예: 200) 및 관련 텍스트 구문(예: OK)으로 구성됩니다. 상태 코드는 응답 상태를 담고 있기 때문에 중요합니다.

1xx: 정보: 요청이 접수되어 절차가 진행 중임을 의미합니다.
2xx: 성공: 액션이 성공적이었다는 뜻입니다.
3xx: 리디렉션: 즉, 요청을 완료하기 위해 추가 조치를 취해야 합니다. 클라이언트를 다른 URL로 리디렉션할 수 있습니다.
4xx: 클라이언트 오류: 고객 측에서 뭔가 착오가 있었다는 뜻이에요.
5xx: 서버 오류: 서버 쪽에 오류가 있다는 뜻입니다.

 

또한 서버, 위치 등과 같은 응답 헤더 필드를 포함합니다. 헤더 필드는 서버에 대한 정보를 제공합니다. Content-Length 헤더는 HTTP 본문의 정확한 바이트 길이를 나타내는 숫자입니다. 이러한 모든 헤더는 일부 추가 정보와 함께 HTTP 응답을 형성하기 위해 추가됩니다.

 

HTTP 응답 예제: 이제 afteracademy.com에서 실행되는 웹 서버로부터 abc.htm 페이지를 가져오는 요청에 대한 HTTP 응답을 형성하기 위해 이 모든 것을 종합해 보겠습니다.

HTTP/1.1 200 OK
Date: Tue, 28 Jan 2020 12:28:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Wed, 22 Jul 2019 19:15:56 GMT
Content-Length: 88
Content-Type: text/html
Connection: Closed

6. The browser displays the HTML content.
(브라우저에 HTML 콘텐츠가 표시됩니다.)

이제 브라우저가 응답을 받고 HTML 웹 페이지가 단계적으로 렌더링됩니다. 먼저 HTML 구조를 가져온 다음 임베디드 링크, 이미지, CSS, 자바스크립트 파일 등을 가져오기 위해 여러 GET 요청을 보냅니다. 웹 페이지가 렌더링되며, 이 경우 방과 후 웹 페이지가 표시됩니다.

이 모든 단계는 URL을 입력할 때마다 수행됩니다. 이 모든 프로세스는 백그라운드에서 밀리초 이내에 수행됩니다.

 

https://afteracademy.com/blog/what-happens-when-you-type-a-url-in-the-web-browser

What happens when you type a URL in the web browser?