2. URI와 웹 브라우저 요청 흐름 - HTTP 웹 기본 지식

이 글은 배민 기술이사 김영한 이사님의 인프런 강의 "모든 개발자를 위한 HTTP 웹 기본 지식" 을 기반으로 작성되었습니다. 문제 시 삭제 조치하겠습니다.

목차는 아래와 같습니다.

• URI
• 웹 브라우저 요청 흐름

URI

a. URI? URL? URN?

1) URI (Uniform Resource Identifier)

 

쉽게 말하면 URI = URL + URN 입니다.

위의 단어들을 하나씩 떼어서 해석하면 아래와 같아요.

• Unifrom : 리소스 식별하는 통일된 방식
• Resouce : 자원 = URI로 식별할 수 있는 모든 것(말 그대로 모든 것입니다. 제한이 없어요.)
• Identifier : 다른 항목과 구분하는데 필요한 정보

그렇다면 URL 과 URN 이 무엇일까요?

 

2) URL(Unifrom Resource Locater), URN(Uniform Resource Name)

URL (Uniform Resource Locater) : 리소스가 있는 위치를 지정

URN (Uniform Resource Name)  : 리소스에 이름을 부여

 

이 때 위치는 변할 수 있지만 이름은 변하지 않습니다. 

즉, URL 에서 query 와 fragment 을 제외한 앞 부분만을 URN 이라고 하는 것입니다.

 

URN 만으로는 실제 리소스를 찾을 수 있는 방법이 없습니다. (정확히 말하면 있기는 있지만 보편화되지 않았어요)

그래서 우리는 URL 을 가지고 실제 리소스를 찾습니다.

 

우리는 URI, URL 정도만 알면 됩니다. 실무적으로 또 일상적으로 URI를 URL과 같은 의미로 생각하고 이해합니다.

b. URL

1) URL 분석

https://www.google.com/search?q=hello&hl=ko

2) URL - 전체 문법

scheme://[userinfo@]host[:port][/path][?query][#fragment]

• scheme: 프토토콜
• host : 호스트 명
• port: 포트번호
• path: 경로
• query: 쿼리 파라미터

위처럼 URL 의 문법이 구성됩니다. 하나씩 간단히 알아봅시다.

 

3) URL - scheme

 

 

주로 scheme 에서는 어떤 프로토콜을 사용할 것인지에 대한 내용이 들어갑니다.

• 프로토콜: 어떤 방식으로 자원에 접근할 것인가에 관한 클라이언트 서버간 약속 규칙
  • e.g. http, https, ftp 등이 있습니다.
• http 에서는 80 번 포트, https 에서는  443 번 포트 주로 사용합니다.(생략O)
• https는 http에 보안을 추가한 것으로 요즘 대부분의 웹사이트는 https 로 동작합니다.

4) URL - userinfo

 

 

URL에 사용자 정보를 포함해서 인증합니다. 위 링크 예시에서는 포함되어 있지 않습니다.

왜냐하면 거의 사용하지 않는 것이기 때문입니다. 

 

5) URL - host

 

호스트명이 들어갑니다.

• 도메인명/IP 주소 직접 사용O

6) URL - PORT

 

접속 포트입니다.

• 일반적으로 생략합니다. (생략시 http: 80, https:443)

7) URL - path

 

리소스 경로입니다. 아래와 같이 계층적 구조를 가집니다.

• /home/file1.jpg
• /members
• /members/100

8) URL - query

 

쿼리 파라미터, 쿼리 스트링이 들어갑니다. 

• 웹 서버에 제공하는 파라미터입니다.  (문자 형태)
• key-value 형태
• ?로 시작, &로 추가 (?keyA=valueA&keyB=valueB)

9) URL - fragment

 

• html 내부 북마크 등에 사용합니다.
• 서버에 전송하는 정보는 따로 없습니다.

 

웹 브라우저 요청 흐름

a. 웹 브라우저에 URL 입력

클라이언트에서 웹 브라우저에 URL 을 입력합니다.

 

b. IP, PORT 정보로 HTTP 요청 메시지 생성

IP는 DNS를 조회해서 얻고, PORT는 생략되어있으면 프로토콜(https)을 보고 유추합니다.

 

그렇게 IP 와 PORT 정보로 HTTP 요청 메시지를 생성합니다.

 

<HTTP 요청 메시지>

 

c. HTTP 메시지 전송

SOCKET 라이브러리를 통해서 

1) 헤더 부분에 IP, PORT 정보를 넣어 3 way-handshake 로 웹브라우저(클라이언트)와 웹서버(서버)를 연결하고,

2) 연결이 되면 HTTP 메시지를 TCP/IP 계층에 전달합니다.

d. 패킷 생성

TCP/IP 계층에서는 TCP/IP 패킷을 생성합니다.

헤더 부분에 출발지 IP, PORT, 목적지 IP, PORT 정보 등을 담고 데이터 부분에 HTTP 메시지를 담아 TCP/IP 패킷을 생성합니다.

 

e. 요청 패킷 전달

TCP/IP 패킷이 웹 브라우저(클라이언트)에서 수많은 중간 노드를 거쳐 웹 서버(서버)에 패킷을 전달합니다.

f. 서버에 요청 패킷 도착

g. 서버에서 HTTP 응답 메시지 생성

웹 서버(서버)에 도착한 패킷의 헤더 부분은 버리고 HTTP 메시지(데이터 부분)을 서버가 해석하여 HTTP 응답 메시지를 만듭니다.

 

<HTTP 응답 메시지>

 

h. 서버에서 응답 패킷 전달

클라이언트에서 서버로 패킷을 보낼 때와 똑같습니다.

헤더 부분에 출발지 IP, PORT, 목적지, IP, PORT 정보 등을 담고 데이터 부분에 HTTP 응답 메시지를 담아 만든 응답 패킷을 웹 브라우저(클라이언트)에 전달합니다.

i. 웹 브라우저에 응답 패킷 도착

 

j. 웹 브라우저 HTML 렌더링

웹 브라우저(클라이언트)가 웹 서버로부터 받은 응답 패킷에서 헤더 부분을 버리고 HTTP 응답 메시지의 데이터(HTML)을 렌더링하여 화면에 뿌려줍니다.

 

 

<웹 브라우저 요청 흐름 정리>

웹 브라우저 = 클라이언트, 웹 서버 = 서버

1. 웹 브라우저에 입력된 URL로 부터 IP, PORT 정보를 얻고 웹 브라우저가 HTTP 요청 메시지를 생성한다.
2. 애플리케이션 계층의 소켓 라이브러리를 통해 IP, PORT 정보를 헤더 부분에 담아 연결을 위한 패킷을 만들고 3-way-handshake 로 웹 서버와 연결한다.
3. 소켓 라이브러리를 통해 HTTP 메시지를 OS 에 있는 TCP/IP 계층으로 전달한다.
4. 헤더 부분(출발지 IP, PORT, 목적지 IP, PORT 등)과 데이터 부분(HTTP 요청 메시지)을 합쳐 TCP/IP 패킷을 생성한다.
5. 웹 브라우저에서 인터넷망(수많은 노드들)을 거쳐 웹 서버로 패킷을 전달한다.
6. 웹 서버는 도착한 패킷의 헤더 부분은 버리고 데이터 부분(HTTP 요청 메시지)를 해석하여 HTTP 응답 메시지를 만든다.
7. 헤더 부분(출발지 IP, PORT, 목적지 IP, PORT 등)과 데이터 부분(HTTP 응답 메시지)을 합쳐 TCP/IP 응답 패킷을 생성한다.
8. 웹 서버에서 인터넷망(수많은 노드들)을 거쳐 웹 브라우저로 응답 패킷을 전달한다.
9. 웹 브라우저는 도착한 응답 패킷의 헤더 부분은 버리고 HTTP 응답 메시지의 데이터(HTML)을 렌더링하여 화면에 뿌려준다.

이번에도 크게 어려운 부분은 없네요! 계속 익숙하지 않은 부분을 공부하다가 이 내용을 보니까 조금 힐링이 되는 것도 같네요.. .ㅎ

다음 글부터 HTTP 에 대해 본격적으로 공부합니다.