주소창에 www.naver.com을 입력하면 일어나는 일

1. 브라우저는 입력된 URI(”www.naver.com”)을 해석합니다.

1. 프로토콜(Protocol) 추출
   • 프로토콜을 생략했으므로 브라우저는 HTTPS와 같은 스킴을 자동으로 함께 전송합니다.
2. 호스트명(Hostname) 추출: www.naver.com
3. 포트(Port) 추출
   • HTTPS의 기본 포트인 443번 포트를 사용하므로, 포트 번호가 생략됩니다.
4. 경로(Path) 추출
5. 쿼리(Query) 추출
6. Fragment 추출
   
   

2. 브라우저는 해당 URI의 DNS(Domain Name System) 주소를 찾기 위해 로컬 캐시나 DNS 서버에 요청합니다.

• DNS 서버 인터넷에서 도메인 이름과 IP 주소를 매핑하는 역할을 담당하는 서버입니다.

1. 브라우저는 로컬 DNS 캐시에 해당 호스트명의 IP 주소가 저장되어 있는지 확인합니다.
   • 로컬 DNS 캐시는 이전에 접속한 사이트의 IP 주소를 저장하는 캐시 메모리입니다. 캐시에 해당 호스트명의 IP 주소가 저장되어 있다면, 브라우저는 DNS 서버에 요청하지 않고 캐시된 IP주소를 사용합니다.
2. 로컬 DNS 캐시에 해당 호스트명의 IP 주소가 없는 경우, 브라우저는 DNS 서버에 호스트명을 포함한 DNS Query를 전송합니다. DNS Query는 브라우저가 호스트명을 IP 주소로 변환하기 위해 DNS 서버에 보내는 요청입니다.
   
   

3. DNS 서버는 입력된 URL의 IP 주소를 찾아 브라우저에게 응답합니다.

1. DNS 서버는 해당 호스트명의 IP 주소를 알고 있으면, 브라우저에게 해당 IP 주소를 응답합니다. DNS 서버는 캐시를 사용하여 이전에 처리한 DNS Query의 결과를 저장합니다. 이전에 처리한 Query 결과가 있으면, DNS 서버는 해당 결과를 캐시에서 가져와 응답합니다.
2. DNS 서버가 해당 호스트명의 IP 주소를 모르는 경우, 더 상위 수준의 DNS 서버에 요청을 전달합니다. 이러한 과정은 계층적으로 구성된 DNS 서버의 구조를 이용하여, 브라우저가 입력한 호스트명의 IP 주소를 찾을 때까지 반복됩니다.
3. DNS 서버는 해당 호스트명의 IP 주소를 찾으면, 브라우저에게 해당 IP 주소를 응답합니다.
   
   

4. 브라우저는 해당 IP 주소로 HTTP 요청을 전송합니다.

1. 브라우저는 요청하는 리소스의 종류와 위치, 브라우저의 정보, 쿠키 등의 정보를 포함하는 HTTP request를 생성합니다.
2. 브라우저는 3-way handshake 과정을 통해 해당 IP 주소로 TCP/IP 연결을 설정합니다. TCP/IP 연결은 웹 서버와 브라우저 간의 안정적인 연결을 제공합니다.
   • TCP/IP 프로토콜 인터넷에서 데이터를 주고받는 데 사용되는 프로토콜입니다. TCP/IP 프로토콜은 TCP(Transmission Control Protocol)와 IP(Internet Protocol) 두 가지 프로토콜로 구성되어 있습니다.
     • TCP 프로토콜 데이터의 안정적인 전송을 보장하기 위해 사용됩니다. 데이터의 무손실 전송과 순서 보장, 중복 제거, 흐름 제어 등을 위한 기능을 제공합니다.
     • IP 프로토콜 데이터의 경로 결정과 패킷 전송을 담당합니다. 데이터의 경로를 결정하는 라우팅과 패킷의 전송을 담당하며, 패킷 전송에 대한 기본적인 기능을 제공합니다.
   • 3-way handshake TCP/IP 프로토콜에서 사용하는 연결 설정 방식으로, 브라우저와 서버 간에 안정적인 연결을 수립하는 과정입니다.
     • SYN(Synchronize) 메시지 전송: 클라이언트(브라우저)는 서버에게 SYN 메시지를 보냅니다. 이 메시지는 클라이언트가 서버와의 연결을 요청하는 메시지입니다. SYN 메시지에는 랜덤한 숫자인 ISN(Initial Sequence Number)이 포함되어 있습니다.
     • SYN-ACK(Synchronize-Acknowledgment) 메시지 전송: 1. 서버는 클라이언트에게 SYN-ACK 메시지를 보냅니다. 이 메시지는 서버가 클라이언트의 요청을 받았다는 것을 의미하는 메시지입니다. SYN-ACK 메시지에는 클라이언트가 보낸 ISN 값에 1을 더한 값인 ISN+1과 서버만의 랜덤한 숫자인 ISN이 포함되어 있습니다.
     • ACK(Acknowledgment) 메시지 전송: 클라이언트는 서버에게 ACK 메시지를 보냅니다. 이 메시지는 서버가 보낸 SYN-ACK 메시지를 받았다는 것을 의미하는 메시지입니다. ACK 메시지에는 서버가 보낸 ISN 값에 1을 더한 값인 ISN+1이 포함되어 있습니다.
3. 브라우저는 HTTP request를 해당 IP 주소로 전송합니다. HTTP request는 TCP/IP 연결을 통해 전송됩니다. 이때, request는 패킷으로 분할되어 전송될 수 있습니다.
   
   

5. Naver 서버는 해당 요청을 받아 처리하고, HTTP 응답을 생성하여 브라우저에게 전송합니다.

1. Naver 서버는 HTTP request를 받고, 요청된 리소스를 찾아 응답합니다. HTTP request를 받은 서버는 요청된 리소스를 찾아서 HTTP response를 생성합니다.
2. 서버는 HTTP response를 해당 IP 주소로 전송합니다. HTTP response는 TCP/IP 연결을 통해 브라우저에게 전송됩니다. 이때, response도 패킷으로 분할되어 전송될 수 있습니다.
   
   

6. 브라우저는 HTTP response를 받고, request한 HTML, CSS, JavaScript, 이미지 파일 등의 리소스를 처리하고 렌더링하여 유저에게 보여줍니다.

1. HTML parsing: 브라우저는 HTML parser를 사용하여 HTML 문서를 parsing합니다. HTML parser는 HTML 태그를 인식하고, 문서의 구조를 이해하혀 DOM(Document Object Model) 트리를 생성합니다.
2. CSS parsing: 브라우저는 CSS parser를 사용하여 CSS 스타일 시트를 parsing합니다. CSS parser는 CSS 규칙을 이해하고, 문서의 스타일 정보를 계산하여 스타일 규칙 트리를 생성합니다.
3. 렌더 트리 생성하기: 브라우저는 DOM 트리와 스타일 규칙 트리를 결합하여 렌더 트리를 생성합니다. 렌더 트리는 문서의 레이아웃 정보를 포함하며, 브라우저의 렌더링 엔진이 화면에 표시할 요소들의 위치, 크기, 색상 등의 정보를 담고 있습니다.
4. 렌더링: 브라우저는 렌더 트리를 기반으로 렌더링 엔진을 사용하여 문서를 화면에 표시합니다. 이때, 렌더링 엔진은 화면에 표시될 요소들의 위치와 크기를 계산하고, 각 요소를 그립니다.