웹 브라우저 요청 흐름

jjyung·2021년 10월 2일

JS

목록 보기

6/13

이전 블로그 글에서 URI에 대해 적었다. 그럼 이 URI를 가지고 네트워크 상에서는 어떻게 동작하는 것일까?

가장 먼저 URI 정보에서 호스트 명을 가지고 DNS에 조회하게 된다. 이전 글에서도 말했지만 URI에 존재하는 도메인 명을 통해 IP 주소를 받아온다.

웹 브라우저에서는 해당 주소에 보낼 요청 메세지를 작성한다. 이러한 요청 메세지는 Socket 라이브러리 통해서 전달하게 되는데 TCP/IP를 연결해 데이터를 전달하게 된다. (이 패킷안에는 출발지와 목적지 IP, PORT와 전송 데이터 HTTP 메세지를 가지고 있다.)
이 요청 패킷을 전달하게되면 해당 서버에서는 이 요청 패킷을 받고 TCP, IP 을 열어 메세지를 가지고 해석을하게됩니다.
HTTP 응답 메세지를 만들고 다시 클라이언트에 전달하게 됩니다. 그러면 웹 브라우저에서 Ip, Http 패킷을 열고 렌더링을 해서 사람들이 결과를 보게됩니다.

이런 웹 브라우저의 요청 흐름이 존재하는데 IP, TCP, UDP를 이해하지않고는 이 흐름을 완벽하게 이해하기는 어렵다. 그래서 위의 용어에 대해 조금 자세하게 설명해보고자한다.

인터넷 프로토콜 스택에는 애플리케이션 계층(HTTP, FTP), 전송 계층 (TCP, UDP), 인터넷 계층(IP), 네트워크 인터페이스 계층이 존재한다.

IP란 지정한 IP 주소에 데이터 전달하는것을 의미하고 패킷이라는 통신 단위로 데이터 전달한다. 즉, 출발지와 목적지 IP 주소를 가지게되어 메세지를 해당 주소로(서버 주소로) 갈 수 있게 해준다. 하지만, IP에도 3가지의 문제점이 존재한다.

만약 패킷을 받을 대상의 주소가 바뀌었거나 서버의 서비스 상태가 불능인데도 그걸 모른채 보낼 수 있다.
중간에 패킷이 사라지는 경우 또는 순서대로 가지않아 원하는 의미를 전달할 수 없다는 한계점도 존재한다.
같은 IP를 사용하는 서버에서 통신하는 애플리케이션이 둘 이상일때 찾아갈 수 없다. (IP 주소를 아파트의 동으로 생각하면 이해가 편할것 같다. 우리가 동만 안다고 해서 바로 찾아갈 수 없다.)

위의 문제를 해결해주는것이 TCP다. TCP는 IP가 가진 문제점을 보완해준다.

TCP 3 way handshake
: 클라이언트와 서버 사이에 연결 과정을 3단계로 나누어 동작한다. 가장 먼저 클라이언트가 서버에게 접속 요청을 보내고, 서버는 그 요청에 대한 응답을 하게된다. 그리고 서버 또한 접속 요청을 보내면 클라이언트는 서버에게 접속 요청 수락을 하게 되는 3가지 과정을 거치는 것을 3 way handshake라고 한다. 이 과정을 통해 상대의 서비스 상태를 알 수 있고, 데이터가 순서대로 오지 않았다면 서버에서 잘못 보낸곳 부터 다시 보내라고 알려주게되고 클라이언트는 해당 번호부터 다시 보내게됨으로써 순서를 보장하게 된다.

포트는 TCP에서 패킷에 넣을때 함께 넣는 정보로, 같은 IP 내에서 프로세스 구분하는 역할을 한다. 즉, IP가 아파트의 동이라면 port는 아파트의 호수를 말한다. 그래서 동일한 이름의 IP가 존재하더라도 원하는 목적지에 찾아갈 수 있다.

이렇게 간단하게 웹 브라우저 요청 흐름에 대해서 기술해보았다. 웹 브라우저의 동작 방식을 잘 이해하고나니 전체적인부분들이 이해가되었다.

🏃‍♀️movin' forward, developer