google.com을 주소창에 입력했을 때 일어나는 일

www.google.com 을 주소창에 입력했을 때 일어나는 일

꼭 구글이 아니더라도, 우리는 어떤 주소를 브라우저의 주소창에 입력했을 때, 페이지가 바로 뜨는 것을 당연하게 생각하고 있다.

어떤 식으로 그 페이지를 불러오는지에 대해 고민해 본 적이 있던가?

브라우저의 렌더링 과정에 대해 다시 공부하다보니 이 과정이 궁금해지기도 했고,

프론트엔드 개발자라면 반드시 알고 있어야 할 내용인 것 같아 한번 정리해보려고 한다.

 

결국 웹페이지에 우리가 원하는 화면이 보이려면 서버에서 데이터를 가져와야 한다.

데이터를 받아오기 위한 과정을 나열해보자!

 

 

www.google.com로부터 IP 주소 얻어오기

도메인

도메인이라는 것을 한번쯤 들어봤을 것이다.

쉽게 말하면 각각의 IP 주소에 붙은 이름표 같은 것이다.

IP 주소는 사람이 이해하고 기억하기 어렵기 때문에, 각각의 이름을 붙였고 이것을 도메인이라고 한다.

예를 들어 우리가 잘 아는 네이버는 naver.com이라는 이름을 가지고 있지만, 실질적인 IP 주소는 따로 있다.

네이버의 실제 IP 주소들

위 IP 중에 하나를 주소창에 입력하면 바로 네이버로 들어갈 수 있다.

 

 

DNS로부터 IP 주소 받아오기

다시 돌아와서, 브라우저는 www.google.com 이라는 도메인 이름을 가지고 DNS(Domain Name Server)에 IP주소를 요청한다.

DNS는 해당 도메인의 IP를 반환한다.

출처 https://www.keycdn.com/support/dns-cache

 

 

서버에 요청하기

브라우저는 이제 받아온 IP 주소로 HTTP 요청을 보내게 되면,

구글 서버에서는 이 요청에 대한 응답을 보낼 것이다.

출처 https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

 

 

렌더링 하기

브라우저는 서버로부터 받은 html, css, js 등의 리소스를 이제 파싱, 레이아웃 생성 등의 과정을 거쳐서 렌더링 한다.

이 부분에 대해서는 따로 포스팅을 한 적이 있기 때문에 생략!

그럼 우리는 아래와 같은 익숙한 구글 페이지를 볼 수 있는 것이다.

 

 

요약

위 과정을 잘 요약한 사진이 있어 따로 첨부한다.

요약하면 이렇다.

• 사용자가 브라우저의 주소창에 google.com 검색
• 브라우저에서 DNS 서버에 IP 주소 요청, DNS 서버의 IP 주소 반환
• 브라우저가 호스팅 서버에 HTTP 요청, 서버의 HTTP 응답
• 브라우저의 렌더링

이렇게 간략하게 google.com을 주소창에 입력했을 때 일어나는 일에 대해서 정리를 해보았다.

잠깐의 깜빡이는 순간에 이런 많은 일들이 일어난다니.. 🤔

 

 

 

출처

도메인이란? - 생활코딩

DNS란 뭐고, 네임서버란 뭔지 개념정리 | 살살살림