네트워크 기초 브라우저 렌더링 과정

5taecoo·2022년 3월 22일
1
post-thumbnail

네트워크

네트워크 기초와 브라우저 렌더링 과정에 대하여

URL

URL(Uniform Resource Locator)는 네트워크 상에서 해당 자원이 어디에 위치해 있는지 알려주는 규약입니다.

HTTP 맥락에서 URL은 "웹 주소" 또는 "링크"라고 불립니다.

😮제 벨로그 주소인 https://velog.io/dnrxorla 또한 URL 중 하나..!

DNS

DNS(Domain Name System) 는 인터넷 상에서 접근하는 도메인에 대해 찾아가야 할 IP 주소로 변환해 주는 시스템입니다.

DNS로 요청을 보내기 전 참조

  • 브라우저 캐시
    브라우저가 웹 사이트의 에셋을 저장하는 것. 웹 캐시의 일종으로 정적 자산(Static Asset)을 캐싱
  • hosts 파일
    호스트 이름에 대응하는 IP 주소가 저장되어 있어서 도메인 이름 시스템(DNS) 에서 주소 정보를 제공받지 않고도 서버의 위치를 찾게 해주는 파일.

DNS는 ISP에서 제공하는 것을 사용

DNS를 운영하는 서버를 보통 Name Server라고 부른다.

DNS 서버로 요청하는 과정

DNS 서버로 요청하는 과정

  1. 미리 설정 된 Local DNS에 해당 URL 주소의 IP주소를 요청합니다.
  1. Local DNS에 해당 IP주소가 존재한다면 이를 응답하고, 없다면 다른 DNS 서버와 통신합니다. root DNS 서버에 해당 URL의 IP주소를 요청합니다.
  1. root DNS서버에 해당 IP주소가 없다면 하위 DNS 서버에 요청하라고 응답합니다. 이 응답을 받은 Local DNS는. net 도메인을 관리하는 DNS 서버에 같은 내용을 요청합니다.
  1. .net DNS 서버에 해당 IP주소가 없다면 하위 DNS 서버에 요청하라고 응답합니다. 이 응답을 받은 Local DNS는 daum.net 도메인을 관리하는 DNS 서버에 같은 내용을 요청합니다.
  1. daum.net DNS 서버에서 IP주소를 응답받은 Local DNS는 해당 IP주소를 캐싱하고 응답합니다.

DNS 구조

역트리 구조로 최상위 루트부터 Top-Level 도메인, Second-Level 도메인, Third-Level 도메인 과 같이 하위 레벨로 원하는 주소를 단계적으로 찾아갑니다.

서버 이동

라우터를 이용해 서버의 게이트웨이까지 이동

DNS 서버에게 IP주소를 받고 해당 서버로 요청을 보냅니다.

ARP로 MAC 주소 변환

실직적인 통신을 하기 위해서는 논리 주소인 __IP주소물리 주소인 MAC 주소 로 변환해야 합니다. 이를 위해 해당 네트워크 내에서 ARP를 브로드 캐스팅합니다.

TCP 통신

대상 서버와 통신을 위해 TCP Socket 연결을 합니다.

Socket 연결은 3-way-handshake 라는 과정을 통해 이루어짐.

서버 응답

HTTP 프로토콜 로 서버에 요청 -> 요청을 검사한 후 적절한 응답값을 반환 -> 브라우저에게 전달

브라우저 렌더링

HTML, CSS, JavaScript로 이루어진 문자들을 해석하여 DOM Tree 를 구축한 후 브라우저에 그려집니다.

🧐 DOM Tree?
브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM Tree라 부른다.

참고

profile
프론트엔드를 꿈꾸며 개발을 공부 합니다.

0개의 댓글