HTTP 웹 기본 지식 정리 1) 인터넷 네트워크 및 웹 브라우저 요청 흐름

이 글은 김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 요약한 것이며 강의 자료 및 출처는 가장 아래에서 확인할 수 있습니다.

* 기본적인 인터넷 통신

기본적으로 클라이언트에서 서버로 통신하려면 중간에 인터넷을 거쳐야하며 인터넷은 수많은 노드서버로 구성되어 있다.

그런데 클라이언트까지 어떻게 위치를 알고 통신할까?

그것은 IP (인터넷 프로토콜) 주소를 부여하기 때문에 가능하다.

IP는 패킷이라는 통신 단위로 데이터를 전달하는데 여기서 패킷이 뭔지 궁금할 것이다.

패킷은 간단하게 표현하면 박스안에 어떤내용물을 보낸다는 의미이다.

위와같은 모습을 하고있는데 내부 정보를 통해 데이터를 주고 받는다.

출발IP와 목적IP를 이용하여 클라이언트에서 서버까지 패킷을 전달하는 것을 알수있다.

* IP 프로토콜의 한계

비연결성 및 비신뢰성 : 패킷을 받을 대상이 없거나 서비스가 불능이여도 패킷이 전송되고, 중간이 패킷이 사라지거나 순서대로 오지않는 특징이 있다. 

 

따라서 TCP,UDP가 이것을 보완해준다.

위 내용은 간단하게 프로토콜 계층을 표현한것이다.웹 어플리케이션에서 "Hello, world!" 메시지를 생성하여 SOCKET 라이브러리를 통해 OS 계층으로 전달한다.

OS 계층에선 IP계층으로 가기전에 TCP 계층을 거쳐 TCP/IP정보가 생성 된다.

생성된 TCP/IP는 LAN 장비를 통해 다른 서버들과 통신한다.

 

* TCP

IP로는 해결되지 않았던 순서및 검증이 TCP를 통해 해결이 되는모습을 보여준다.

 

TCP는 데이터 전달과 순서를 보장해준다. 현재 대부분 애플리케이션에서 TCP를 사용한다.

또한 3way handsahke를 사용한다.

위 과정을 통해 클라이언트도 서버를 믿을수있고, 서버도 클라이언트를 믿을 수 있어 연결에 신뢰성이 생긴다.

*UDP(= 하얀 도화지)

3way handshake가 없어 비연결지향이며 데이터 전달과 순서 보증이 안된다.

따라서 IP와 거의 비슷하지만 PORT와 체크섬정도만 추가된다.즉, 기능이 거의없어 하얀 도화지에 비유한다.

예를들어 내 컴퓨터(하나의 IP)에서 네트워크 게임과 음악 스트리밍을 듣고 있는다고 가정하면

IP에 여러 패키지가 올것이다. 여기서 PORT가 이것을 구분해준다.

체크섬은 간단하게 이 메시지에 대해서 제대로 맞는지 검증해주는 것이다.

 

TCP도 포트가 있는데 굳이 UDP를 쓰는이유를 묻는다면 3way handshake등이 없어서 속도가 더 빠르다.

 

현재는 TCP 프로토콜이 90%이상 점유하고 있지만  HTTP 3같이 새로운 기술이 나오면서 최적화와 관련되어 UDP가 뜨고있다.

*PORT

포트는 같은 IP 내에서 어떤 요청인지 구분해준다.

예를 들어 웹 브라우저 요청은 200.200.200.3 IP에 80번 PORT에 요청하고,

받을때는 100.100.100.1 IP에 10010번 PORT에 요청한다.

이것이 가능한 이유는?

패킷 정보에 출발지와 목적지 IP,PORT가 전부 들어있기 때문이다.

비유를 들자면 IP는 아파트고, 포트는 몇동 몇호라고 볼 수 있다.

 

IP는 외우기어렵고 변경될 수 있다. 따라서 대부분 DNS를 쓴다.

 

*URI(Uniform Resource Identifier)

직역하면 리소스를 식별하는 통합된 방법이라는 뜻이다.

URI? URL? URN?

URI는 리소스를 식별한다.자원 자체를 식별하는 방법이다.

URL은 Locator즉 위치를 말하며, URN은 Name 이름을 의미한다.

URI는 가장 상위 개념이라고 보면된다.

URN은 이름을 부여하는 방식으로, 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화 되어있지않다.

따라서 거의 URL만 쓴다.

 

* URL 전체 문법

1.schema

스키마는 주로 프로토콜을 사용하며, http,https,ftp등등이 올수있다.

http는 80포트, https는 443 포트를 주로 사용하는데 포트는 생략이 가능하다.

 

2.userinfo

userinfo는 URL에 사용자정보를 포함해서 인증할때 사용하는데 거의 사용하지 않는다.

 

3.host

host는 호스트명,도메인명 또는 IP주소를 직접 사용하는데 위에선 www.google.com을  을 의미한다.

 

4.path

리소스 경로(path)이며 계층적 구조로 되어있다.

계층적 구조를 예를 들면 /home/file1.jpg , /members/100, /items/iphone12 등등으로 나타낼수 있다.

 

5. query

쿼리는 key=value 형태이며 ?로 시작하고 &로 추가가 가능하다.

공식적으로 명칭은 query지만, query parameter, query string등으로 불린다.

 

6. fragment

html내부 북마크와 같이 html내부에서 갑자기 이동하고 싶을때 사용하며 서버로 전송되는 정보는 아니다.

 

* 웹 브라우저 요청 흐름

만약, 웹 브라우저에서 위 요청을 보내는 상황을 가정해보자.

웹 브라우저는 구글 서버를 찾아야하기 때문에 DNS서버를 조회하여 200.200.200.2 IP와 HTTPS 포트인 443포트를 찾아낸다. 그후, HTTP 요청 메시지를 생성한다.

 

HTTP 요청 메시지는 아래와같은 모습이다.

HTTP 요청 메시지에는 GET요청,쿼리 정보, HOST정보를 확인할 수 있다.

 

웹 브라우저는 HTTP 요청 메시지를 생성하고, 소켓 라이브러리를 통해 TCP/IP 연결을 하고 데이터를 전달한다.

OS계층에서는 IP계층전에 TCP가 이를 씌워서 TCP/IP 패킷을 생성하고 HTTP 메시지를 포함시킨다.

 

기본적인 TCP/IP패킷 정보는 아래와 같은데

여기에 전송 데이터를 추가한다고 보면 된다.

이제 위에서 생성된 요청 패킷을 전달하면

수많은 인터넷 노드를 통해서 200.200.200.2번으로 전달이 되고

구글 서버에 요청 패킷이 도착하게 된다.

 

이제 구글 서버는 TCP/IP패킷을 까서 위에서 보낸 HTTP 요청 메시지를 해석하고 아래와 같이 HTTP 응답 메시지를 주게된다.

 

응답 메시지 안에는 HTML이 들어있는데 웹 브라우저가 이 HTML를 렌더링해서 웹에 띄워주게 된다.

 

* 자료 출처

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC#

모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의