#TODO: 뒤에 브라우저의 렌더링 이어서 쓰기
틀린 부분이 있을 수 있습니다. 지적은 언제든지 환영합니다.
Today I Learned
우리가 브라우저에서 주소창에 URL을 쳤을 때, 어떤 과정을 거쳐 우리에게 웹 페이지를 보여주는지 한 번 살펴보았다.
브라우저의 동작 원리와 통신 과정
브라우저의 동작을 살펴보면 크게 세 가지로 나눌 수 있다.
- 서버와의 통신
- DOM 렌더링
- 스크립트 실행
http 통신 과정
순서대로 http 통신 과정을 우선적으로 살펴보자. 요약하자면, http는 다음 7개 과정으로 간단히 나타낼 수 있다.
- 주소창에 URL을 입력후 엔터를 치면 URL을 해석
- DNS를 조회하여 IP 탐색
- IP를 찾아 해당 IP가 존재하는 서버로 이동
- ARP(Address Resolution Protocol)을 이용하여 MAC주소로 변환
- 웹서버와 TCP 연결 시도
- 서버에 요청을 하고 응답을 반환
- 연결 종료
1. 주소창에 URL을 입력
우리는 주소창에 https://app.domain.com/path 주소를 친다고 가정하자.
주소를 치고 엔터를 누름과 동시에 통신이 시작된다. 먼저, URL을 해석하는 과정을 거친다. URL은 다음과 같은 구조로 이루어져있다.
http://: 통신에 사용된 프로토콜 (프로토콜은 쉽게 말하면 '규칙'이다.)
domain.com: 서버의 도메인
app: 서버의 서브도메인
path: 요청 경로
2. DNS를 조회하여 IP를 탐색
주소창에 URL을 입력하면, 가장 먼저 URL과 연결된 DNS서버로 이동하여 URL에 할당된 IP 주소를 찾는다. DNS는 Domain name system의 약자로 쉽게 설명하자면 전화번호부와 같다. 호스트의 도메인을 IP로 변환하거나 그 반대의 변환을 수행할 수 있도록 도와준다.
다만 브라우저에 캐시가 남아있다면, DNS 서버에 접근하지 않아 시간을 절약할 수 있다.
3. IP를 찾아 해당 IP가 존재하는 서버로 이동
이때, 정확한 좌표값을 얻기 위하여 기기 고유의 값인 MAC 주소를 활용하여 이동하게 되는데, 이는 아래에서 설명한다. 해당 IP를 찾아 이동하는 과정은 마치 택배를 배달하는 과정과 비슷하다. 여러 라우터를 거쳐서 호스트를 찾게 되는데, 이 과정에서 동적 라우팅 프로토콜이 적용되어 라우팅 테이블에서 현재 경로를 따라 자동으로 경로를 조절하는 과정을 거친다. 인터넷에서 통신 상대가 같은 랜선에 있을 확률은 매우 적기 때문에, 여러 대의 컴퓨터와 네트워크 기기를 중계해서 상대방에게 도착한다. 그렇게 중계하는 동안 다음으로 중계할 곳의 MAC주소를 사용하여 목적지를 찾아가게 된다.
이때, ARP(Address Resolution Protocol)이 사용된다.
4. ARP(Address Resolution Protocol)을 이용하여 MAC주소 반환
ARP(Address Resolution Protocol)이란, 주소 결정 프로토콜로 네트워크 상에서 IP 주소를 물리적 네트워크(MAC)주소로 대응시키기 위해 사용되는 프로토콜이다.
왜 IP주소가 아닌 MAC 주소를 통신을 위해 사용할까?
- IP주소는 컴퓨터 네트워크에서 장치들이 서로 인식하고 통신하기 위해서 사용하는 특수 번호로, '서울특별시 중구 태평로'처럼 규칙에 의해 만들어진 값이므로, 언제든지 변할 수 있는 값이다.
- 반면에 MAC주소는 네트워크 세그먼트 데이터 링크 계층에서 통신을 위한 인터페이스에 할당된 고유 식별자이다. MAC주소는 논리주소인 IP주소와 달리, 고유주소이기 때문에 장치의 실제 위치를 알기 위해서는 MAC주소가 필요하다.
ARP(Address Resolution Protocol)은 수신지의 IP주소를 바탕으로 MAC주소를 조사한다. 즉, 네트워크 내에서 ARP를 브로드캐스팅하면, 해당 IP를 가진 기기가 MAC주소를 반환한다.
5. 웹서버와 TCP 연결 시도
TCP란, Transmission Control Protocol의 약자로 컴퓨터와 데이터 통신을 위한 규약의 일종이다.
클라이언트와 서버가 TCP 연결을 시도하여 성공하면, 통신 준비를 마쳤고 현재 통신이 연결되어 있음을 보장한다. TCP 통신 절차는 3-way handshake 과정을 거친다.
3-way handshake
클라이언트와 서버간 신뢰성 있는 연결을 하기 위하여 3번의 통신 과정을 거친다.
1. SYN(synchronize sequence numbers): 클라이언트가 서버로 임의의 시퀀스 번호를 전달
2. SYN-ACK: 서버는 클라이언트가 서버로 전달한 시퀀스에 1을 더하여 클라이언트로 전달
3. ACK(acknowledgement): 클라이언트는 서버에서 전달해준 시퀀스 + 1하여 다시 서버로 전달
6. 클라이언트가 요청 후, 서버는 응답
클라이언트는 GET, POST, PUT, DELETE 요청을 서버로 요청하면, 서버는 그에 맞는 데이터와 상태를 클라이언트에 응답한다.
7. 통신 종료
TCP 통신을 종료하기 위하여 4-way handshake절차를 거친다.
8. 웹 브라우저가 웹 문서를 출력
여기서부터는 브라우저 렌더링 과정이다.
느낀점
네트워크에 대하여 공부해 본 적이 없어 강의만으로는 이해가 어려워 여러 자료들을 찾아보았는데도 어렵다... 매우 어렵다.. 틀린 부분도 많기 때문에 좀 더 깊게 이해할 때 마다 와서 수정해야겠다.
출처
HTTP 요청 흐름의 이해 (번역)
주소 결정 프로토콜
웹과 네트워크의 기본(TCP/IP)
http 동작 과정
