결론

브라우저의 주소창에 URL을 입력하고 엔터 키를 누르면 URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 갖는 서버에게 요청을 전송합니다. 서버에서 응답해준 html 파일을 받아서 브라우저는 렌더링을 수행합니다. 이후 사용자는 웹 페이지를 보게 됩니다.

HTTP와 HTTPS에 따라 통신하는 방식에도 차이가 있고, 렌더링하는 방식에도 SSR과 CSR, 2가지가 있습니다.

설명

1. 사용자는 웹 브라우저 주소창에 URL을 입력한 후 엔터 키를 누릅니다.

2. 웹 브라우저는 입력한 URL을 분석합니다.

   1. URL 문법에 맞지 않다면 사용 중인 웹 브라우저의 검색 엔진으로 입력어를 검색합니다.
   2. URL 문법에 맞다면 HSTS(HTTP Strict Transport Security) 목록에 URL이 존재한다면 HTTPS로, 그렇지 않다면 HTTP로 요청을 보냅니다.

3. DNS(Domain Name Server)에 도메인의 IP 주소를 요청합니다.

   1. DNS에 요청을 보내기 전에 먼저 브라우저 캐시와 로컬 hosts 파일을 검사합니다.
   2. 1번 과정 실패 시, DNS로 요청을 보냅니다.
   3. 미리 설정된 Local DNS에 해당 URL 주소의 IP 주소를 요청합니다.
   4. Local DNS에 해당 IP 주소가 없다면 root DNS 서버에 URL의 IP 주소를 요청합니다.
   5. root DNS에 해당 IP 주소가 없다면 하위 DNS에 요청하라고 응답합니다. 응답을 받은 Local DNS는 com 도메인을 관리하는 DNS에 같은 내용을 요청합니다.
   6. com DNS에 해당 IP 주소가 없다면 하위 DNS 서버에 요청하라고 응답합니다. 응답을 받은 Local DNS는 google.com 도메인을 관리하는 DNS에 같은 내용을 요청합니다.
   7. google.com DNS에서 IP 주소를 응답받은 Local DNS는 해당 IP 주소를 캐싱하고 응답합니다.
4. ARP를 통해 IP주소를 MAC주소로 변환합니다. (추가 학습 요망)
5. 대상 서버와 TCP 통신을 통해 socket을 연결합니다. (추가 학습 요망)
6. 서버에서 응답(HTML 문서)을 반환합니다.
7. 브라우저에서 응답을 해석합니다. (렌더링)
8. 사용자는 화면에 띄워진 웹 페이지를 볼 수 있습니다.

추가 학습

• 브라우저의 렌더링 과정
• HTTP vs HTTPS

참고

• [책] 모던 자바스크립트 Deep Dive (38_브라우저의 렌더링 과정)
• 웹 브라우저에 URL을 입력하면 어떤 일이 일어날까?
• [JavaScript] 기본기(1)
• 브라우저에 URL을 입력했을 때 발생하는 일들
• [브라우저에 URL 입력 후 일어나는 일들] 2_DNS 서버 검색
• How the DNS works