📌 브라우저는 어떻게 작동할까?

노트북에서 크롬,사파리등의 브라우저를 키고 원하는 웹사이트로 이동할 때 과연 어떻게 작동할까?

처음 개발을 배울때는 매-우 간단한 방식으로 설명을 들었다. URL을 입력을하면 서버에 요청을 해서 정보를 받아 화면에 띄운다 정도의 지식이다.

틀린말은 아니지만 조금더 복잡한 과정이 있음을 최근에 알게 되었고, 정리를 하려 한다.

브라우저에 URL을 입력한 후 웹 사이트가 뜨기까지의 과정을 정리했다.

1️⃣ URL을 해석한다.

이 블로그의 URL 이다.
https://velog.io/@chloe41297

URL은 scheme,계정정보,호스트,포트 등의 정보로 이루어져있다.

특히 http/https등의 scheme는 프로토콜이 들어간 영역이다.

개발 TMI // 슬레쉬 두개는 필수사항이 아닙니다!! 멋있어 보여서 넣은게 학계의 정설!

이처럼 URL을 입력받은 브라우저는 다양한 정보를 담고있는 URL을 해석한다.

2️⃣ DNS를 조회한다.

DNS란?

Domain Name System 으로 도메인과 IP주소를 서로 변환해 주는 시스템 이다.

DNS 요청 전 브라우저 자체의 체크사항

브라우저가 URL을 해석하고 바로 DNS를 요청하나요? NOPE
요청하기 전 몇가지를 체크하고 넘어갑니다.

• 해당 Domain을 알고 있는지 확인 (yes => IP 변환/No => 다음단계)
• local컴퓨터의 host파일을 참조 후 IP 정의 확인(yes => IP 변환/No => 다음단계)
• DNS호출 (Root,TLD,Authoritative 서버순으로 탐색한다)

3️⃣ 찾은 IP가 존재하는 server로 이동 한다.

4️⃣ ARP를 이용하여 MAC주소로 변환 한다.

ARP란?

Address Resolution Protocol 로 IP주소를 물리주소인 MAC 주소로 변환해 주는 프로토콜이다.

MAC 주소?

IP주소는 논리적 주소이다. 예를들면, 도로명 주소 같은 것이다. 시대, 사회에 따라 부르는 주소가 달라지듯이 IP주소로 기계의 실제 위치를 알 수 없다.
반면 MAC주소는 지도상의 GPS처럼 기계의 실제 위치를 알 수 있는 주소이다.

ARP를 이용하여 IP주소를 MAC주소로 변환 한 뒤, 해당 서버로 이동한다.

5️⃣ TCP통신을 위해 서버의 socket을 연다.

서버에 바로 접근이 불가하고 socket을 열고 허락을 받아야 data를 전달할 수 있다.

이때 TCP연결을 허락받기 위해 3way handshake가 일어난다.

여기서 요청을 허락받으면, data를 서버에 보낸다.

6️⃣ 서버가 응답을 반환 한다.

서버는 앞선 과정을 통해 받은 data를 읽고 요청에 따라 처리합니다.
예를들어, URL을 요청받았다면, HTML을 응답합니다.

7️⃣ HTML을 받은 Browser가 DOM tree를 구축한다.

서버의 응답에의해 요청한 HTML파일을 기반으로 DOM tree를 구축해 화면에 렌더링을 합니다.
참고로, JS가 있다면 같이 실행 합니다.

이 과정 외에도 다양한 조건들을 고려해 봐야 합니다.
예를 들어, OSI 7계층, Routing Table, Subnet mask등은 더 공부하고 포스팅 하려고 합니다 :)