WORK/HTTP

[인프런/김영한/모든 개발자를 위한 HTTP웹 기본 지식]URI와 웹 브라우저 요청 흐름

Justin Mendes 2023. 3. 15. 14:58
 

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

실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런

www.inflearn.com

* 김영한 선생님의 모든 개발자를 위한 HTTP 웹 기본 지식을 수강하고 간략히 정리해보자.


 

URI(Uniform Resource Identifier)

-Uniform : 리소스 식별하는 통일된 방식

ex)주민등록번호를 보고 사람을 식별하는 것 처럼 식별

-Resource : 자원, URI로 식별할 수 있는 모든 것

-Identifier : 다른 항목과 구분하는데 필요한 정보

ex)주민등록번호

 

URI는 URL과 URN을 포함하고 있는데 아래의 사진과 같다. L은 Locator, N은 Name이다.

 

URL은 이름부터 친근하다. 리소스가 있는 위치를 지정하는 방식이다. URN은 리소스에 이름을 부여하는 방식이다.

URN 이름만으로 실제 리소스를 찾을 수가 없다. 그래서 URI만 쓴다고 본다. URI를 URL과 같은 의미로 생각하면 쉽다.

 


 

URL문법

 

아래는 전체 문법이다. 같은 문장으로 예를 들어보자.

 

전체문법
scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:443/search?q=hello&hl=ko

  • 프로토콜(https)
  • 호스트명(www.google.com)
  • 포트 번호 (443)
  • 패스(/search)
  • 쿼리 파라미터(q=hello&hl=ko)

 

<scheme>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:443/search?q=hello&hl=ko

  • 주로 프로토콜 사용
  • 프로토콜: 어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙
    예) http, https, ftp 등등
  • http는 80포트, https는 443 포트를 주로 사용, 포트는 생략 가능
  • https는 http에 보안 추가 (HTTP Secure)

 

<userinfo>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
htps://www.google.com:443/search?q=hello&hl=ko

  • URL에 사용자정보를 포함해서 인증
  • 거의 사용하지 않음

 

<host>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
htps://www.google.com:443/search?q=hello&hl=ko

  • 호스트명
  • 도메인명 또는 IP주소를 직접 사용가능

 

<port>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
htps://www.google.com:443/search?q=hello&hl=ko

  • 포트(PORT)
  • 접속 포트
  • 일반적으로 생략, 생략시 http는 80, https는 443

 

<path>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
htps://www.google.com:443/search?q=hello&hl=ko

  • 리소스 경로(path), 계층적 구조
  • 예) /home/file1.jpg, /members, /members/100, /items/iphone12

 

<query>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
htps://www.google.com:443/search?q=hello&hl=ko

  • key=value 형태
  • ?로 시작, &로 추가 가능 ?keyA=valueA&keyB=valueB
  • query parameter, query string 등으로 불림, 웹서버에 제공하는 파라미터, 문자 형태

 

<fragment>
scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://docs.spring.io/spring-boot/docs/current/reference/html/getting-started.html#getting-started-introducing-spring-boot

  • fragment
  • html 내부 북마크 등에 사용
  • 서버에 전송하는 정보 아님

문법을 둘러보았으니 웹 브라우저 요청 흐름에 대해 알아보자.


 

위의 사진처럼 사용자가 URI를 입력하면 DNS에서 Domian Name을 조회하여 IP를 할당한다. 해당 IP를 목적지로 HTTP 요청 메시지를 생성한다. HTTP 요청 메시지에는 path, query, HTTP버전 정보, Host Name 등이 들어간다. 예를 들면 다음과 같다.

GET/search?q=hello&hl=ko HTTP/1.1 Host:www.google.com

 

아래의 사진은 HTTP메시지가 전송되는 과정과 이전에 배운 TCP/IP패킷을 덮은 최종적인 패킷이다.

 


최종적으로 웹 브라우저 요청 흐름을 알아보자.

사진에서 보여지는 것처럼 웹 브라우저와 구글 서버가 SYN, SYN+ACK, ACK 하면서 서로 연결될 것이다. 그리고 무수한 노드들을 통해 HTTP 메시지가 구글 서버에 도착한다. 구글 서버는 도착한 패킷의 TCP/IP패킷을 까서 버리고 내용물을 취하는 구조이다.

 

그럼 서버는 받은 내용물을 해석하고 응답 메시지를 웹 브라우저에게 보낸다. 예를들면 아래와 같다.

#HTTP 응답 메시지

HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
Content-Length: 3423

<html>
	<body>...</body>
</html>

 

서버에서 웹 브라우저에게 패킷을 보낼 때도 비슷하다. 과정은 아래와 같다.

 

위와 같은 과정을 통해 웹 브라우저에게 응답 메시지를 보낸다. 응답 메시지의 Content-Type이 HTML이고 웹 브라우저가 랜더링을 한 다음 아래와 같은 화면을 볼 수 있다.


 

파이팅