[Web] 브라우저에서 도메인을 입력하면 일어나는 일

만약 Naver 홈페이지에 접속하고 싶을 때 우리는 브라우저의 주소창에 다음과 같이 입력을 하는데 이때 어떤 과정을 통해서 Naver에 접근할 수 있을까?

먼저 그림으로만 표현해보자면 다음과 같다.

우리가 입력하는 주소(www.naver.com)는 웹 상에서 사람들이 편하게 사용하기 위한 도메인이다. 하지만 우리가 해당 홈페이지에 접근하기 위해서는 결국 접근하고자 하는 곳의 IP를 알아야 한다.

우리가 주소를 입력하고 Enter를 누르게 되면 먼저 우리의 PC에 존재하는 Hosts 파일을 살펴본다. 도메인과 IP가 매핑되어있지 않다면 DNS를 통해 IP주소를 받아와야 한다.

DNS (Domain Name System)
웹 사이트의 IP주소와 도메인 주소를 이어주는 시스템
- 계층적 구조로 되어 있으며 상위 도메인은 그 하위 도메인을 관리하는 트리 구조 형태이다.
- 기본적으로 DNS 프로토콜을 사용하며 UDP방식이다.
- Default 포트는 53번이다.

DNS 서버에서 받아온 IP를 받아올 때 Root DNS 서버부터 하위의 도메인으로 계속 찾게 되는데 같은 도메인에 접근할 때 이런 과정을 반복하는 것은 너무 비효율적이고 DNS 서버에 부하를 주기 때문에 Cache하게 된다. 만료시기에 따라 다르겠지만 최근에 방문한 주소의 경우 이 캐시를 활용한다.

IP 주소를 알게 되고 해당 서버로 요청을 하기 위해 TCP 연결을 시도한다.(HTTP 기반이므로)

TCP 연결이 정상적으로 이루어지고 request가 날라가고 서버에서는 요청에 따른 response를 받아온다.

🖥 브라우저에서는!

브라우저의 랜더링엔진의 HTML파서는 받아온 서버에서 response로 받은 파일 중 HTML 파일을 토큰화, 렉싱 과정을 거치며 DOM 트리로 변환한다. 또한 CSS파서도 HTML파서와 유사한 방법을 거치며 CSSOM 트리를 만든다. 만들어진 DOM, CSSOM은 결합되어 Render 트리가 생성되고 이를 토대로 그려진다. HTML파서는 위에서부터 순차적으로 해석되는데 중간에 script 태그를 만나 Javascript가 필요한 경우 DOM 생성 프로세스를 중지하고 자바스크립트 엔진에게 제어권을 넘겨주며 Javascript가 해석된다.

DOM 트리가 생성되는 과정을 보면 HTML을 읽고, 토큰화, 렉싱을 거치고 상하관계를 표현하며 트리로 생성된다.

토큰화는 마크업을 "start tag", "end tag", "text" 등과 같은 개별 토큰으로 변환한다.

렉싱은 토큰을 해당 속성과 규칙을 정의하는 노드 객체로 변환하는 과정이다.

렉싱을 통해 나온 결과물인 노드 객체들의 상하 관계가 맺어지면서 DOM 트리가 생성된다

이와 거의 동일한 과정을 거치며 CSSOM도 생성된다.

생성된 DOM과 CSSOM은 결합되어 Render 트리가 생성된다.

1. DOM 트리의 루트에서 시작하여 화면에 표시되는 노드를 탐색한다. 이때 화면에 표시되지 않는 노드, CSS에 의해 나타나지 않는 요소들은 Render 트리에 반영되지 않는다.
2. 화면에 표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.
3. 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 내보낸다.

렌더 트리가 생성되고, 뷰포트에 렌더 트리의 노드가 정확한 위치와 크기를 계산하는 과정을 Layout(Reflow)라고 한다. 이때 모든 상대적인 단위은 절대적인 픽셀 단위로 변환된다. 이후 각 노드를 화면의 실제 픽셀로 나타내는 과정을 Painting(rasterizing)라고 한다. Painting 과정이 이루어지면 브라우저 화면에 UI가 나타나게 된다.

📚 참고

https://www.youtube.com/watch?v=GAyZ_QgYYYo

https://hwan-shell.tistory.com/320

DNS에 대한 설명(디테일 하게....)

DNS란 무엇일까요?? Domain Name System의 약자로 인터넷 주소창에 Host Domain Name을 입력했을 때(ex, naver.com, google.com 등..) 해당 문자를 IP주소로 변환해 주는 시스템을 말합니다. 저는 URL창에 Host Domain Name

hwan-shell.tistory.com

https://www.youtube.com/watch?v=sJ14cWjrNis