Develop/FrontEnd

브라우저에 google.com을 검색하면 무슨 일이 생기나요? [2]

KimBangg 2021. 7. 5. 11:30

머릿말

 

하단의 글에서 이미 같은 글을 작성 했었습니다. 하지만, 번역을 하면서도 그 이후에도 명확히 이해가 가지 않아서 다시 정리하고자 글을 올리게 되었습니다. 요새 느끼는거지만, 애매하게 아는건 아예 모르는 것보다 못하다는 것을 느낍니다.

 

뭔가를 배울 때는, 누군가를 앉혀놓고 설명 할 수 있는 수준까지 깊게 학습 하는 것이 중요하다고 생각합니다 !

   

   

 

본문

자 그럼 이제부터 브라우저에 URL를 입력하고, Enter를 눌렀을 때 일어 나는 일에 대해 이야기 해보겠습니다.

 

  

1. 브라우저의 URL 파싱

 

최초에 브라우저는 사용자가 "단순 검색을 한 것인지", "URL" 을 입력 했는지 확인합니다. 

URL인 경우에는  https:(protocol) google.com (URL) : 443(Port) 

 

다음과 같이  [ 프로토콜, URL, Port ] 의 정보가 주어지기에 이를 파싱합니다. Port 번호는 별도의 입력이 없을 때 기본 값을 선정 하게 됩니다. HTTP는 80번, HTTPS 443번 포트겠죠 ? :D

  

  

2. URL을 IP 주소로 변경

 

"www.google.com" 으로는 컴퓨터 간의 통신이 이루어 질 수 없습니다. 그리하여, URL -> IP 주소로 변경 함으로써 통신을 가능 하게 합니다.  

 

브라우저는 하단의 순서로 캐시를 확인합니다. 

브라우저 캐시 > SystemCall - OS의 캐시 > Router의 캐시 > ISP의 캐시

 

이를 통해, 모든 URL을 DNS 서버를 통해 검색하는 불필요한 연산을 방지 할 수 있습니다.

 

존재하지 않는다면 도메인 주소를 IP주소로 변환해주는 DNS(Domain Name System) 서버에 요청하여 해당 URL을 IP주소로 변환합니다. 

DNS 서버로 요청하는 과정

1. 미리 설정 된 Local DNS에 해당 URL 주소의 IP주소를 요청합니다.

2. Local DNS에 해당 IP주소가 존재한다면 이를 응답하고, 없다면 다른 DNS 서버와 통신합니다. 
   root DNS 서버에 해당 URL의 IP주소를 요청합니다.

3. root DNS서버에 해당 IP주소가 없다면 하위 DNS 서버에 요청하라고 응답합니다. 
   이 응답을 받은 Local DNS는. com 도메인을 관리하는 DNS 서버에  같은 내용을 요청합니다.

4. .com DNS 서버에 해당 IP주소가 없다면 하위 DNS 서버에 요청하라고 응답합니다.
   이 응답을 받은 Local DNS는 google.com 도메인을 관리하는 DNS 서버에 같은 내용을 요청합니다.

5. google.com DNS 서버에서 IP주소를 응답받은 Local DNS는 해당 IP주소를 캐싱하고 응답합니다.

 


DNS의 작동방식을 애니메이션으로 만든 영상이 있어서, 이를 통해 이해 하시면 좋을 것 같습니다.

  

  

 

3. 라우터를 통해 해당 서버의 게이트웨이까지 이동

 

희망 목적지인 "IP주소"는 얻었지만 어떻게 가야 할지 경로는 알 수 없습니다. 이 요청이 네트워크를 타고 어떻게 이동할지는 네트워크 장비인 라우터의 라우팅을 통해 이루어집니다.

 

라우터는 각자 자신만의 라우팅 테이블을 가지고 있습니다. 이 테이블을 바탕으로, 최단거리를 구하는데 이 때 사용되는 알고리즘은 대표적으로 "다익스트라 알고리즘" 이 존재합니다.

 

* 관련 포스팅

 

https://kimbangg.tistory.com/261

 

[ Network ] 라우팅 알고리즘 ( 라우터 & Link State 편 )

1. 라우터(Router) 란? Router는 1) 최적의 길을 찾아주는 Path Determine 과 2) 패킷을 전송하는 Switching 이렇게 2가지의 기능을 수행합니다. 우리가 여기서 다룰 내용은 최적의 길을 찾는 방법인 라우팅 프

kimbangg.tistory.com

https://kimbangg.tistory.com/263

 

[ Network ] 라우팅 프로토콜

머릿말 이전 게시물을 통해, 거리벡터 & 링크상태 알고리즘에 대해서 다루었습니다. 이번에는 IGP 에서 사용되는 라우팅 프로토콜인 RIP(!== Rest In Peace)과 OSPF 과 EGP 에서 사용되는 BGP 프로토콜까지

kimbangg.tistory.com

  

 

4. ARP를 통해 IP주소를 MAC주소로 변환

 

실질적인 통신을 하기 위해서는 논리 주소인 IP주소를 물리 주소인 MAC 주소로 변환해야 합니다. 이를 위해 해당 네트워크 내에서 ARP를 브로드 캐스팅합니다. 해당 IP주소를 가지고 있는 노드는 자신의 MAC 주소를 응답합니다.

 

그렇다면 왜 LAN에서는 ARP 테이블을 통해서 MAC Address로 바꿔야 될까요?

그 이유는 IP Address는 메일 주소와 같은 거라 장소가 바뀌거나, 와이파이가 끊기면 변동이 일어 나기 때문입니다.

반면 MAC Address는 고유하기에 LAN까지 전달이 잘 이루어졌다면, MAC 주소를 통해 패킷을 명확히 전달 할 수 있습니다.

 

실제로 아래와 같이 와이파이만 변경 했음에도 불구하고 IP 주소가 변경 되는 모습을 볼 수 있습니다 

 

5. 대상 서버와 TCP 소켓 연결

이제 대상 서버와 통신하기 위해 TCP 소켓 연결을 진행합니다. 소켓 연결은 3-way-handshake라는 과정을 통해 이루어집니다.

 

하지만 지금 하는 요청은 HTTPS 요청입니다. 그렇기 때문에 서로 암호화 통신을 위한 TLS 핸드쉐이킹이 추가됩니다. 이를 통해 서버와 클라이언트는 암호화 통신을 진행할 수 있습니다.

 

   

  

  

 

6. HTTP(HTTPS) 프로토콜로 요청, 응답

이제 연결이 확정되었으니 드디어 해당 페이지 www.google.com를 달라고 서버에게 요청합니다. 서버에서 해당 요청을 받고, 이 요청을 수락할 수 있는지 검사합니다. 그리고 서버는 이 요청에 대한 응답을 생성하여 브라우저에게 전달합니다.

  

  

  

 

7. 브라우저에서 응답을 해석

서버에서 응답한 내용은 HTML, CSS, Javascript 등으로 이루어져 있습니다. 이를테면 아래와 같이 우리가 웹 페이지라고 인식하기 어려운 문자들로 구성되어 있습니다.  이를 해석하여, 브라우저 렌더링을 하게 됩니다.

 

* 렌더링 과정

 

https://kimbangg.tistory.com/253

 

브라우저의 렌더링

[1] 브라우저의 공통구조 User InterFace : 주소 표시줄, 이전 / 다음/ 새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용 Browser Engine : UI와 Rendering Engine을 연결 Rendering Engine : HTML과 CSS..

kimbangg.tistory.com

 

 

참고자료

 

https://www.youtube.com/watch?v=oGoWqdlaOMI

https://stackoverflow.com/questions/66290232/why-do-we-need-mac-addresses-when-you-have-local-ip-addresses

 

Why do we need MAC addresses when you have local IP addresses

From what I understood, MAC addresses are physical addresses only used in LAN to identify a device. However, local IP addresses can also identify a device on a local network as it is unique. So why...

stackoverflow.com

https://aws-hyoh.tistory.com/entry/ARP-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

 

ARP 쉽게 이해하기

주소 결정 프로토콜(Address Resolution Protocol, ARP)은 네트워크 상에서 IP 주소를 물리적 네트워크 주소로 대응(bind)시키기 위해 사용되는 프로토콜이다. 여기서 물리적 네트워크 주소는 이더넷 또는

aws-hyoh.tistory.com