웹 페이지가 보여지는 과정

웹 페이지를 통해 궁금한 내용을 검색하거나 상품을 구입하게 됩니다. 그렇다면 웹 페이지는 어떻게 그려져 사용자들에게 보이는 걸까요?
오늘은 그 과정을 살펴보는 시간을 가지겠습니다!

과정

1. 사용자가 url를 입력한다.

• 만약, 웹 페이지에 이미 캐싱 된 값이 저장되어 있다면 프록시 서버를 통해 캐싱 값을 반환한다.(단, 없다면 천천히 웹 페이지가 그려지며 서버를 통해 가지고 온 데이터를 그려주고 캐시에 저장한다.)

  잠깐! 여기서 캐시와 프록시 서버에 대해서 알아보겠습니다.

  캐시란?
  용량이 크고 처리 속도가 느린 데이터를 미리 복사해 놓은 임시 저장소(메모리 영역)

  웹 캐시는 이미지 정보를 불러올 때 데이터 사용량도 들고 시간도 많이 소비되기 때문에 사용자의 컴퓨터 혹은 중간 서버에 저장을 합니다.

  프록시 서버란?
  클라이언트와 서버 사이에서 중개서버로 통신을 관리하는 역할을 수행하는 것

  클라이언트의 요청을 받아 처리하고 보안, 캐싱 등의 목적으로 사용됩니다.
  클라이언트가 요청을 했을 때 메인 서버로 가지 않고 캐싱 되어있는 데이터로 응답을 합니다.
  Node.js의 서버 앞단에는 Ngnix가 프록시 서버로 활용됩니다.

2. 웹 브라우저가 DNS 서버에 접속해 해당 도메인에 대한 ip주소를 받아온다.

• DNS
  도메인 네임을 해당 ip 주소로 매핑하는 역할

  도메인 이름은 사람이 이해하기 쉬운 형식이고 이를 IP 주소로 변환하여 인터넷에서 실제로 통신할 수 있도록 합니다.

  예를 들어,
  www.google.com -> 172.xxx.xxx.xxx 와 같은 형식으로 변환해 줍니다.

• DNS 캐싱
  이전에 요청된 도메인 이름과 해당 도메인 이름에 대한 IP 주소 사이의 매핑 정보를 임시로 저장하여, 동일한 도메인 이름에 대한 반복된 요청 시에 매번 DNS 서버로 질의를 보내지 않고 저장된 캐시를 사용하여 ip 주소를 불러옵니다.

  DNS 캐싱 된 값은 일반적으로 브라우저와 운영체제에 각각 저장되어 사용됩니다.
  이렇게 하면 동일한 도메인 이름에 대한 반복된 요청이 있을 때 매번 DNS 서버로 질의를 보내지 않고 저장된 캐시를 사용하여 빠른 응답을 제공할 수 있습니다.

  [Root DNS] -> [.com DNS] -> [.google DNS] -> [www DNS] 순으로 검색을 하고 ip주소로 매핑합니다.

3. 검색한 ip 주소를 기반으로 라우팅과 ARP를 통해 실제 서버를 찾는다.

• 이때, ARP를 통해 MAC 주소를 검색하게 됩니다.

• ARP란?
  가상주소인 ip 주소를 실제 주소인 MAC 주소로 변환하는 역할

  MAC 주소는 네트워크 인터페이스 카드(NIC)에 할당된 고유한 물리적인 주소입니다. NIC는 노트북마다 존재하는 하드웨어입니다.

4. TCP연결 구축

• TCP 3-way handshake로 연결을 설정합니다.
  (HTTPS의 경우 TLS handshake 연결을 설정합니다.)

5. HTTP(or HTTPS)를 통한 요청과 응답을 받습니다.

6. 서버로부터 전달받은 데이터를 다운로드합니다.

7. 렌더링 과정을 거치며 해당 웹페이지 화면이 그려집니다.

[요약]

1. 사용자가 url를 입력한다.
2. 웹 브라우저가 DNS 서버에 접속해 도메인을 ip 주소로 메핑한다.
3. ip 주소를 기반으로 라우팅과 arp를 통해 서버를 검색한다.
4. TCP 연결을 구축하고 HTTP(or HTTPS)를 통해 요청과 응답을 받는다.
5. 서버로부터 데이터가 다운로드 되고 렌더링 과정을 통해 브라우저가 그려진다.

[참고한 자료]

• https://yeonjewon.tistory.com/87
• https://donologue.tistory.com/380