[CS지식] www.naver.com을 주소창에 치면?

  질문 의도?

프로그래머는 과정을 이해하는 사람. 코드는 화면, Signal, 보고서 등으로 출력될 수 있다. 근본적으로 입력 -> 출력과정을 이해해야만 프로그래머이다.

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 또한 이러한 과정이 캡슐화, 비캡슐화과정을 거쳐서 이뤄지게 됩니다.

대기열?

  브라우저는 주소창 입력에 대한 요청을 대기열에 넣는다. 

캐싱?

  요청된 값의 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술. 공유프록시 캐시와 브라우저 캐시로 나뉘어진다.

• 프록시 캐시 : 원서버에 직접 접근하고자 하면 시간이 많이 걸리므로 접속 국가의 공유 프록시 캐시 서버를 사용한다.
• 브라우저캐시 : 쿠키 로컬스토리지 등을 포함한 캐시이다. 사용자가 HTTP를 통해 다운로는 하는 모든 문서를 브라우저 자체가 보유하는 것이다.

DNS 조회?

  브라우저가 요청의 IP 주소를 확인하는 단계이다. DNS는 도메인 이름과 IP주소를 매칭해주는 서버이다. 바로 DNS로 요청을 전달하는 것이 아닌 컴퓨터 메모리에 있는 호스트 파일 등 캐시를 확인한 후 캐시미스가 일어나면 DNS로 요청. DNS의 장점은 IP가 바뀌어도 똑같은 도메인으로 이동.

• Root DNS -> .com DNS -> .naver DNS -> .www DNS

라우팅?

  라우팅은 IP 주소를 찾아가는 과정이다(홉 바이 홉). 각각의 라우터에 있는 라우팅 테이블의 IP를 기반으로 패킷을 전달하고 다시 전달한다. 통신 장치에 있는 '라우팅 테이블'의 IP를 통해 시작 주소부터 시작하여 다음 IP로 계속해서 이동하는 '라우팅' 과정을 거쳐 패킷이 최동 목적지까지 도달하는 통신이다.

• PC -> 서브 네트워크 -> 라우팅 테이블 -> 서브 네트워크 -> 라우팅 테이블 -> PC

라우팅 테이블 : 송신지에서 수신지까지 도달하기 위해 사용되며 라우터에 들어가 있는 목적지 정보들과 그 목적지로 가기 위한 방법이 들어있는 리스트를 뜻한다. 게이트웨이와 모든 목적지에 대해 해당 목적지에 도달하기 위해 거쳐야 할 다음 라우터 정보를 가지고 있다.

게이트웨이 : 서로 다른 통신망, 프로토콜을 사용하는 네트워크 간의 통신을 가능하게 하는 컴퓨터나 소프트웨어를 말한다.

 

ARP(Address Resolution Protocol)?

  IP주소를 바탕으로 ARP를 통해 물리적인 서버 주소를 찾게 된다. IP주소에서 ARP를 통해 MAC 주소를 찾아 MAC 주소를 기반으로 통신한다.

  이와 반대로 RARP를 통해 실제 주소인 MAC 주소를 가상 주소인 IP 주소로 변환하기도 한다.

 

초기연결?

브라우저가 TCP 3웨이 - 핸드셰이크 및 SSL 연결 등을 통해 연결을 설정한다. 이후 요청을 보낸 후 해당 요청한 서버로부터 응답을 받는다.

• 장치들 사이에 논리적인 접속을 성립하기 위하여 Three-way handsake를 사용한다. 양쪽 모두 데이터를 전송할 준비가 되었다는 것을 보장하고, 실제로 데이터 전달이 시작하기 전에 다른 한쪽이 준비되었다는 것을 알 수 있게 한다.
• Client > Server : TCP SYN(synchronize sequence numbers)
• Server > Client: TCP SYN ACK(acknowledgment)
• Client > Server : TCP ACK

콘텐츠 다운로드?

  브라우저는 서버로부터 응답을 수신한다.

 

브라우저 렌더링?

  크롬의 경우 HTML과 CSS가 각각 파서에 의해 해석되다 DOM 트리를 구축하고 렌더트리를 구축하는 등의 과정이 일어난다.

1. DOM 트리 구축 : Html페이지는 div, span 등 각각의 요소를 가진다. 각 요소는 하나하나 노드(Node)로 설정되어 트리 형태로 저장된다.
2. 렌더트리와 렌더레이어 생성 : DOM 트리와 렌더트리는 1:1 대응이 되며, 렌더트리가 생성된 후 렌더레이어에 올려지게 된다. 렌더레이어가 완성될 때 GPU에서 처리되는 부분이 있으면 이 요소들은 각각 강제적으로 그래픽 레이어로 분리된다.
3. 렌더레이어를 대상으로 Layout 설정 : 좌표는 부모를 기준으로 설정되며 Global Layout은 브라우저 사이즈가 증거하거나 폰트 사이즈가 커지면 변경된다.
4. 렌더레이어를 대상으로 칠하기(Paint) : 픽셀마다 점을 찍듯 칠하며 이를 레스터화라고 한다.
5. 레이어 합치기(composite layer) 및 표기 : 각가의 레이어로부터 비트맵이 생성되고, GPU 텍스처로 업로드 된다. 그 다음 텍스처들은 서로 합쳐져 하나의 이미지로 렌더링되며 화면으로 출력된다.

보내는 요청 값들이 캡슐화 과정을 거쳐 전달되고, 다시 링크 계층을 통해 해당 서버와 통신을 하고, 해당 서버의 링크 계층으로부터 애플리케이션까지 비캡슐화 과정을 거쳐 데이저가 전송된다.

 

캡슐화 과정?

  상위 계층의 헤더와 데이터를 하위 계층의 데이터 부분에 포함시키고 해당 계층의 헤더를 삽입하는 과정이다.

 

비캡슐화 과정?

 하위 계층에서 상위 계층으로 가며 각 계층의 헤더 부분을 제거하는 과정이다.

 

TCP/IP 4계층? 1계층 네트워크 엑세스 계층 : OSI 7계층의 물리계층과 데이터 링크 계층에 해당되며 물리적인 주소로 MAC를 사용. LAN, 패킷망 등에 사용된다. 2계층 인터넷 계층 : OSI 7계층의 네트워크 계층에 해당한다. 통신 노드 간의 IP패킷을 전송하는 기능과 라우팅 기능을 담당. 프로토콜  - IP, ARP, RARP 3계층 전송 계층 : OSI 7계층의 전송 계층에 해당한다. 통신 노드 간의 연결을 제어하고, 신뢰성 있는 데이터 전송을 담당한다. 프로토콜 - TCP, UDP 4계층 응용 계층 : OSI 7계층의 세션 계층, 표현 계층, 응요 계층에 해당한다. TCP/UDP 기반의 응용 프로그램을 구현할 때 사용. 프로토콜 - FTP, HTTP, SSH

더 나아가기

TTFB?

  요청을 한 후 응답받는 첫 번째 바이트까지의 시간(Time to First Byte)을 나타낸다. 캐시, DNS, 초기연결, 요청, 응답 등 걸린 시간(컨텐츠 다운 시작 시간까지). 지금까지 설명한 과정이 "빠르게" 나타나야 한다. 

 

https://blog.naver.com/jhc9639/222700552159

https://www.youtube.com/watch?v=5MM8NDzWHdE&t=53s