[HTTP] 2. URI와 웹 브라우저 요청 흐름

안녕하세요!

또 인프런 김영한 강사님 강의를 보고 공부 정리 시작해보겠습니다.

고고!!

---

1. URI (Uniform Resource Identifier)

1-1. URI  간략한 설명

 먼저, 간단하게 URI에 대해서 설명해보겠습니다.

URI란 말 그대로 리소스를 식별하는 통합된 방법을 뜻합니다.

 

URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있는데 이건 그림으로 한번 봐보겠습니다.

 

URI

URI라는 큰 개념 안에 있는 URL과 URN은 뭘까요?

URL은 로케이터! 즉, 리소스의 위치를 뜻합니다.

그리고, URN은 리소스의 이름을 뜻합니다.

 

그런데, 제가 URL에만 형광펜 표시 해놓고 URN은 그냥 놔둔 이유가 뭘까요?

URN은 사실 이름만으로는 그 정보를 찾는게 어려워서 거의 안 씁니다. 그래서 그냥 이런게 있구나.. 정도만 알면 됩니다.

그래서 대부분은 URL로 사용을 하고, 앞으로 URI와 URL을 같은 의미로 보면 될 것 같습니다.

 

구체적으로 URI와 URL, URN을 정리해보겠습니다.

 

1-2. URI (Uniform Resource Identifier) 뜻

• Uniform: 리소스를 식별하는 통일된 방식
• Resource: 자원, URI로 식별할 수 있는 모든 것(제한X)
  • 여기서 자원은 웹브라우저 파일 같은 것만이 아니라 실시간 교통 정보 같은 우리가 구분할 수 있는 모든 것을 뜻합니다.
• Identifier: 다른 항목과 구분(식별)하는데 필요한 정보

 

1-3. URL (Uniform Resource Locator), URN (Uniform Resource Name) 뜻

• URL - Locator: 리소스가 있는 위치를 지정
  • 예시) foo://example.com:8042/over/there?/name=ferret#nose
• URN - Name: 리소스에 이름을 부여
  • 예시) urn:example:animal:ferret:nose
  • 예시) urn:isbn:8960777331 (어떤 책의 isbn URN)
  • 여기로 들어간다고 해서 책이 딱 나와있지 않습니다. (URN의 한계)
  • URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화 되지 않았습니다.
• 위치는 변할 수 있지만, 이름은 변하지 않습니다.
• ex) 쏭의 집 =>URN은 쏭, URL은 집

 

1-4. URL 분석 및 전체 문법

URL 전체 문법

 

1-4(1). URL=> scheme

• 위의 그림에서 https에 해당하는 부분입니다.
• 주로 프로토콜을 사용합니다.

프로토콜이란?

어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙
ex) http, https, ftp 등

• http는 80 포트, https는 443 포트를 주로 사용하고, 이 두 포트는 생략 가능합니다.
• https는 http에 강력한 보안을 추가한 것입니다. (HTTP Secure)

 

1-4(2). URL=> userinfo

• 위의 그림에서 [userinfo@] 부분입니다.
• URL에 사용자 정보를 포함해서 인증하는 부분이고, 거의 사용하지 않습니다. (예시에 없는 이유)

 

1-4(3). URL=> host

• 위의 그림에서 www.google.com에 해당하는 부분입니다. 
• 호스트명이고, 도메인명 또는 IP 주소를 직접 사용할 수 있습니다.

 

1-4(4). URL=> PORT

• 위의 그림에서 443에 해당하는 부분입니다.
• 접속 포트이고, 일반적으로 생략하며, 생략 시에 http는 80이고 https는 443 입니다.
  • 특정 서버에 따로 접속할 때에는 PORT 번호 입력해야 합니다.

 

1-4(5). URL=> path

• 위의 그림에서 search에 해당하는 부분입니다.
• 리소스 경로(path)이며, 계층적 구조입니다.

왜 계층적 구조일까?

계층적 구조로 되어있어야 이해하기 쉽고, 찾기도 쉬워지기 때문입니다.
ex) /home/file1.jpg => home안의 file1.jpg
      /items/iphone12
      /members
      /members/100 => members라는 디렉토리 안에 id가 100번인 사람

대충 요런 느낌..?

 

 

1-4(6). URL=> query

• 위의 그림에서 ?q=hello&hl=ko에 해당하는 부분입니다.
• key=value 형태입니다.
• ?로 시작하고, &로 추가가 가능합니다.
  • ?keyA=valueA&keyB=valueB
• query parameter (웹서버에 제공하는 파라미터), query string (문자 형태) 등으로 불립니다.

 

1-4(7). URL=> fragment

• 위의 그림에서 [#fragment]에 해당하는 부분입니다.
• ex)https://~~~/~~#getting-started-introducing-spring-boot
• html 내부 북마크 등에 사용하고, 서버에 전송하는 정보가 아닙니다.
• 잘 사용하지는 않습니다.

---

2. 웹 브라우저 요청 흐름

웹 브라우저 요청 흐름

1. 구글 DNS 조회해서 IP를 찾습니다.

2. 거기서 나온 PORT 번호를 통해 HTTP 요청 메시지를 생성합니다.

 

<HTTP 요청 메시지 예시>

GET /search?q=hello&hl=ko HTTP/1.1 (버전 정보)
Host: www.google.com (호스트 정보)

 

 

2-1. HTTP 메시지 전송

 

 

1. 웹 브라우저가 HTTP 메시지를 생성합니다.

2. SOCKET 라이브러리를 통해 전달합니다.

 -A: TCP/IP 연결(IP, PORT)

 -B: 데이터 전달

3. TCP/IP 패킷 생성하고, HTTP 메시지 포함합니다.

 

2-1(1). 패킷 생성

 

2-1(2). HTTP 요청 과정

HTTP 요청 과정과 응답 과정은 그림으로 보는게 이해가 더 빨라서 그림으로만 설명하겠습니다.

 

1. 요청 패킷 전달

요청 패킷 전달

 

2. 요청 패킷 도착

요청 패킷 도착

 

<HTTP 응답 메시지>

 

2-1(3). HTTP 응답 과정

 

1. 응답 패킷 전달

응답 패킷 전달

 

2. 응답 패킷 도착

응답 패킷 도착

 

3. 최종!! 웹 브라우저 HTML 렌더링!!

웹 브라우저 HTML 렌더링