브라우저에 URL을 입력하면? 웹사이트를 렌더링하기까지

Jonghyeon·2021년 8월 8일
post-thumbnail

1. URL을 해석한다.

URL의 구성

scheme://<user>:<password>@<host>:<port>/<url-path>

예시

- http://example.com:8761/members
- ftp://admin:1q2w3e4r@email.com/image.png
- mailto:jonghyeon@email.com
- http:programmers.co.kr
// "//"를 생략해도 됨 : URL만든 사람이 그냥 멋있어 보여서 넣었다고 함ㅋㅋㅋㅋ

2. DNS을 조회합니다.

DNS: Domain Name System

  • DNS는 도메인과 IP 주소를 서로 변환해준다.
  • DNS로 요청을 보내기 전에 브라우저 캐시와 hosts 파일을 참조한다.
  • DNS는 보통 통신사(ISP)에서 제공하는 것을 사용한다.
  • DNS를 운영하는 서버를 보통 Name Server라고 부른다.
  • jonghyeon.work, www.jonghyeon.work, mail.jonghyeon.work 전부 도메인은 jonghyeon.work

3. 해당 IP가 존재하는 서버로 이동합니다.

  • 네트워크 장비 라우터를 통해 이동한다.
  • 동적 라우팅을 통해 이동한다.

4. ARP를 이용하여 MAC 주소 변환을 합니다.

  • Address Resolution Protocol
  • 논리 주소인 IP주소를 물리 주소인 MAC주소로 변환하는 프로토콜
  • 실제 통신을 위해 변하지 않는 고유한 MAC 주소가 필요하다.
  • 네트워크 내에 ARP를 Broadcasting하면 IP주소를 가지고 잇는 기기가 MAC주소를 반환한다.

IP주소와 MAC주소

  • IP는 논리적인 주소
  • MAC은 물리적인 주소
  • 기계의 실제 위치를 알기 위해선 MAC주소가 필요하다.
  • 왜 논리적 주소와 물리적 주소로 나눈걸까?

경복궁의 주소는?

  • 지번 도로명 주소

    • 서울 종로구 사직로 161
    • 서울 종로구 세종로 1-91
      이 주소들은 언제든지 바뀔 수 있음 - 논리적 주소(IP)를 비유할 수 있음
      서울 => 종로구 => 사직로 => 161: 대역을 좁혀가면서 위치를 알려줌.
  • GPS 주소

    • 북위 37도 34'43" 동경 126도 58'38" (37.578611, 126.977222)
    • 물리적 주소(MAC)를 비유할 수 있음

5. TCP 통신을 통해 Socket을 열어야 합니다.

  • 네트워크를 통해 해당 기기로 패킷을 전달한다.
  • 3 way handshake로 연결을 요청한다.
  • 요청이 수락되면 기기는 패킷을 받아 처리한다.

6. 서버는 응답을 반환합니다.

  • HTTP 프로토콜로 들어온 패킷을 읽고 처리한다.
  • 요청에 따른 적절한 응답 값을 반환한다.

7. 브라우저가 렌더링합니다.

  • HTML을 읽어 DOM Tree를 구축한다.
  • 만들어진 DOM Tree를 이용하여 화면에 그린다.
  • 스크립트를 실행한다.

Other Keyword

  • OSI 7 계층
  • Routing Table
  • Subnet mask
  • TCP Socket Strem
profile
종현

0개의 댓글