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

2024. 9. 3. 01:44·Back-End/HTTP
목차
  1. URI(=URL)
  2. URL 전체 문법
  3. 웹 브라우저 요청 흐름

[작성일: 2023. 09. 03]

 

 

URI(=URL)

  • URI(Uniform Resource Identifier)
    • Uniform: 리소스를 식별하는 통일된 방식
    • Resource: 자원, URI로 식별할 수 있는 모든 것(제한 없음)
    • Identifier: 다른 항목과 구분하는데 필요한 정보
  • URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다.

출처: 김영한님

 

참고
URL: Uniform Resource Locator, 리소스가 있는 위치를 지정
URN: Uniform Resource Name, 리소스에 이름을 부여, 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화되지 않음.
위치는 변할 수 있지만 이름은 변하지 않는다.
urn:isbn:8960777331(어떤 책의 isbn URN)

 

 

 

 

URL 전체 문법

 

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

 

 

위의 주소를 분석해보자. 

 

 

URL scheme

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • https://www.google.com:443/search?q=hello&hl=ko 
    • 주로 프로토콜을 사용한다.(https)
    • 프로토콜이란 어떤 방식으로 자원에 접근할 것인가 약속하는 규칙으로 http, https, ftp 등이 있다.
    • http는 80번 포트, https는 443번 포트를 사용하며 포트는 생략 가능하다.
    • https는 http에 보안을 추가한 것이다.(HTTP Secure)

 

 

URL userinfo

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • https://www.google.com:443/search?q=hello&hl=ko
    • URL에 사용정보를 포함해서 인증하며 거의 사용하지 않는다.

 

 

URL host

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • https://www.google.com:443/search?q=hello&hl=ko
    • 호스트명
    • 도메인 명 또는 IP 주소를 직접 사용가능하다.

 

 

URL PORT

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • https://www.google.com:443/search?q=hello&hl=ko
    • 접속 포트(PORT)
    • 일반적으로 생략하며 생략 시 http는 80, https는 443으로 이해하면 된다.

 

 

URL path

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • https://www.google.com:443/search?q=hello&hl=ko
    • 리소스 경로(path)이며 계층적 구조를 가진다.
    • /home/file1.jpg
    • /members
    • /members/100, /items/iphone12 등

 

 

URL query

  • scheme://[userinfo@]host[:port][/path][?query][#fragment]
  • https://www.google.com:443/search?q=hello&hl=ko
    • key = value 형태로 되어 있다.
    • ?로 시작하며 &로 추가가 가능하다. ?keyA=valueB&keyB=valueB
    • 웹서버에 제공하는 파라미터, 문자 형태이기 때문에 query parameter, query string 등으로 불린다.

 

 

URL 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 내부 북마크 등에 사용하며 서버에 전송하는 정보는 아니다.

 

 

 

 

 

웹 브라우저 요청 흐름

웹 브라우저는 구글 서버를 찾고 DNS를 조회하고 IP와 PORT정보를 찾고 http 요청 메시지를 생성한다.

출처: 김영한님

 

HTTP 요청 메시지는,

GET /search?q=hello&hl=ko

HTTP/1.1 Host: www.google.com

 

출처: 김영한님

 

웹브라우저가 HTTP 메시지를 생성하고 소켓 라이브러리를 통해 TCP/IP 계층에 전달한다.

TCP/IP는 패킷을 생성하고 HTTP 메시지를 포함해서 인터넷으로 흘러가게 된다.

수많은 인터넷 노드를 통해 구글 서버에 전달되고, 요청 패킷이 도착하면 HTTP 메시지만 꺼내서 해석한다.

 

출처: 김영한님

 

서버에서는 HTTP 응답 메시지를 만들어낸다.

 

HTTP/1.1 200 OK

Content-Type: text/html;charset=UTF-8

Content-Length: 3423

<html> ... </html>

 

출처: 김영한님

 

웹 브라우저에 응답 패킷이 도착하면 HTML 렌더링을 하면 우리는 그 웹브라우저 HTML을 볼 수 있다.

 

 

 

 

 

 

 

 

 

 


🐣 출처: 인프런 김영한님 강의

 

이 글은 인프런의 김영한님 HTTP 웹 강의를 보고 작성한 글입니다.

강의를 들으면서 정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.

 

저작자표시 비영리 변경금지
  1. URI(=URL)
  2. URL 전체 문법
  3. 웹 브라우저 요청 흐름
'Back-End/HTTP' 카테고리의 다른 글
  • [HTTP] HTTP 메서드 활용
  • [HTTP] HTTP 메서드
  • [HTTP] HTTP
  • [HTTP] 인터넷 네트워크
뚜비
뚜비
1년차 백엔드&iOS 개발자의 감자 탈출 블로그 🥔🥔
  • 뚜비
    뚜비의 개발로그
    뚜비
  • 전체
    오늘
    어제
  • 글쓰기     관리
    • Devlog
      • Back-End
        • Java
        • Spring
        • JPA
        • HTTP
        • Security
        • Back-End
        • Front-End
      • 알고리즘
      • iOS
        • Swift
      • Database
      • Tips
        • Git & GitHub
        • A to Z
      • 프로젝트
      • 생각정리
  • 태그

    알고리즘
    html
    변수
    성능최적화
    데이터베이스
    Java
    의존성주입
    최주호
    Spring Security
    객체
    Security
    jsp
    자바스크립트
    spring
    JPA
    DB
    sql
    Database
    Swift
    다형성
    HTTP
    프로그래머스
    백준
    게시판만들기
    MVC
    김영한
    자바
    생성자
    javascript
    스프링
  • hELLO· Designed By정상우.v4.10.0
뚜비
[HTTP] URI와 웹 브라우저 요청 흐름
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.