Computer Science/Http 웹 지식

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

sh1mj1 2023. 1. 6. 01:43

이 글은 배민 기술이사 김영한 이사님의 인프런 강의 "모든 개발자를 위한 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)

https://blog.kakaocdn.net/dna/b4iaau/btrC9lGEGeK/AAAAAAAAAAAAAAAAAAAAACWkWrwPH7gWuh2tDoQE4P4Jw2rwrOWenXMeAqnRP-UL/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=lqOUgwc9wtLz0It9Mq8nZ58q9Cg%3D

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

https://blog.kakaocdn.net/dna/bIlcxN/btrDapPsGKq/AAAAAAAAAAAAAAAAAAAAAMe0aJT_1guN19bAuMS0TU9yqbE9LX4hUgE4BRrF8ujo/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=RmOk8K7CP5OzdP93CW1uwuodgRQ%3D

2) URL - 전체 문법

scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • scheme: 프토토콜
  • host : 호스트 명
  • port: 포트번호
  • path: 경로
  • query: 쿼리 파라미터

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

 

3) URL - scheme

 

https://blog.kakaocdn.net/dna/b2YaPP/btrDaowlkld/AAAAAAAAAAAAAAAAAAAAALVmMUH1_qQhUoNzrs5CqKaFF88_3N6pb0lgf0VqyhPQ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=6PkELfi%2Fh52q0Jra8s1QkkDqkEI%3D

 

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

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

4) URL - userinfo

 

https://blog.kakaocdn.net/dna/pHEjM/btrDbupwIlY/AAAAAAAAAAAAAAAAAAAAAFrZWeIYNnyPJlqa19EFS_qTtk9lnIsjhfP1FP51NkwZ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=mjfkWid0XFTuM7xHlBbQYFo90XI%3D

 

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

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

 

5) URL - host

https://blog.kakaocdn.net/dna/QrJ2c/btrDcs5R3oa/AAAAAAAAAAAAAAAAAAAAAEP51uOkFGnkrJrQ5bn_Ix1TuxJwetKW9xDPfEwHPVHa/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=C5zc2FyImhfATXg%2FQk4dua5NHqU%3D

 

호스트명이 들어갑니다.

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

6) URL - PORT

https://blog.kakaocdn.net/dna/cm9nSF/btrC9msfYAR/AAAAAAAAAAAAAAAAAAAAAJo7_03mLf9YLrJmse5OJsui4NHc2dN0GkZncxb6W374/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=fqrZBk%2FaYpKSZQq8xj%2BdeBsdZlE%3D

 

접속 포트입니다.

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

7) URL - path

https://blog.kakaocdn.net/dna/duqsUC/btrDdezdvcu/AAAAAAAAAAAAAAAAAAAAAHu_9whggplqHgvL-4OY8lW4r3S6f60UjdNd3reBTb1I/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=%2BEPF2ci3CpwNbgGeKxN6tknl3MM%3D

 

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

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

8) URL - query

https://blog.kakaocdn.net/dna/A2sgM/btrC9ltnI2j/AAAAAAAAAAAAAAAAAAAAAPMI46LtkgwePAQiuOLc9f70y8QF3_HGF60LPlla4LIp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=ytH26uYFXQ%2FBMNDXTBkpK%2BlRpIk%3D

 

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

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

9) URL - fragment

https://blog.kakaocdn.net/dna/DHtf6/btrC9Lk5kWI/AAAAAAAAAAAAAAAAAAAAADaAJvFdWgAkMmzhPcsVawtD691QvqNpGQPft4BHtSTe/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=KRG2gNJxugr00OGy9muwyeEm%2BTo%3D

 

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

 

웹 브라우저 요청 흐름

a. 웹 브라우저에 URL 입력

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

https://blog.kakaocdn.net/dna/bQwLeA/btrC7Ly3ErM/AAAAAAAAAAAAAAAAAAAAACnxL_a3ETgTi08-I4aih3CWxWz7prl3HvU7_qCT-7v_/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=CmXGgEWsoG%2FGb47dTmsvG0bBNnc%3D

 

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

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

https://blog.kakaocdn.net/dna/FKxHo/btrC9LFqxGa/AAAAAAAAAAAAAAAAAAAAALsaJZc7A1ViWHLzkH1jkotNIpRTyWsQ-7jdUAQFPAlk/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=Nk46wWCxSZo2Y5j1aFz2NbTKmUA%3D

 

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

 

<HTTP 요청 메시지>

https://blog.kakaocdn.net/dna/dnmEFy/btrDbu4iCD0/AAAAAAAAAAAAAAAAAAAAAJyZbcDQm2-NUOCbMQg8VQFe2tuiQqnhr60Bsa3FoU2P/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=6W5vL6rlTZS2YVE1zdXMXwuHNW0%3D

 

c. HTTP 메시지 전송

SOCKET 라이브러리를 통해서 

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

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

https://blog.kakaocdn.net/dna/5SQEC/btrDaopJjKO/AAAAAAAAAAAAAAAAAAAAAB4c9aeB5Gw7oOtGGodnoZRUcQMhe8l5kVPlFPauxsOm/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=GiSF2nIFmFSKQPqkI8BSgIZBTew%3D

d. 패킷 생성

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

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

https://blog.kakaocdn.net/dna/GcNLn/btrDaUInnoU/AAAAAAAAAAAAAAAAAAAAAMdppKGDq3JEe-mKpdNsln4yTBtdTF-cpA-csYnD3NR2/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=usGPG6fpoKMzqfnuZO%2B7oX9xlRU%3D

 

e. 요청 패킷 전달

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

https://blog.kakaocdn.net/dna/yFmr6/btrDbuXzyVQ/AAAAAAAAAAAAAAAAAAAAAJ2SBMLdLRttW3ODRh92JE-tONZJYTL1mE3OjTmU1Og9/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=lOWm%2BHxV69bbN0%2FV%2BpHOutyc3h4%3D

f. 서버에 요청 패킷 도착

https://blog.kakaocdn.net/dna/cg5P9h/btrDcUBb8jh/AAAAAAAAAAAAAAAAAAAAALG_chS-Nh8K_KHTM63g7ANfQKFVm85udDnFiQLXqwl3/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=YUfLCJR9OlGkBmS6xG8SoM1YP5A%3D

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

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

 

<HTTP 응답 메시지>

https://blog.kakaocdn.net/dna/ulJgi/btrC8d3hPIB/AAAAAAAAAAAAAAAAAAAAAHsTiJn6O29aNazXBMfEMjdIxpXfPRZl4MFoVrg5vfjm/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=tY6nQkVUiZu%2B3EIYzo7QL14%2Blec%3D

 

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

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

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

https://blog.kakaocdn.net/dna/df3cLj/btrC9l75b6D/AAAAAAAAAAAAAAAAAAAAAPx5eOtUT9SUI38xffUS4qd4h-W5Ckxqv6SHbioeQs4k/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=SLzJSS1DajF2CDA30t44eZ%2BkJFA%3D

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

https://blog.kakaocdn.net/dna/rRJ7n/btrDc6OWlBo/AAAAAAAAAAAAAAAAAAAAAIIeNVja-cp-Rqdv1lQEb41Y2jKmmlg_goCVC85YhUPo/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=8NO37BveRap3Ulf49Vc7IAYcGeE%3D

 

j. 웹 브라우저 HTML 렌더링

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

 

https://blog.kakaocdn.net/dna/bvVJQa/btrDc7G5cke/AAAAAAAAAAAAAAAAAAAAAFVIoE2uAd7xZzGzHIUz7xgWzyowk0GOy5fIIXPAi-PZ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=99qSWJ77PzlDnsUhM%2FKPytn3vhI%3D

 

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

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

  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 에 대해 본격적으로 공부합니다.