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

2024. 8. 2. 23:49·네트워크/HTTP
목차
  1. URI(Uniform Resource Identifier)
  2. URL 분석
  3. 웹 브라우저 요청 흐름
  4. 참고

URI(Uniform Resource Identifier)

  • 리소스를 식별하는 통합된 방법
  • URI? URL? URN?
    • URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다
  • 인터넷에서 식별되는 자원을 나타내는 문자열

인터넷에서 식별되는 자원

  • Uniform Resource Identifier (URI)를 통해 나타난다.
  • 이 자원은 웹상에서 다양한 형태로 존재할 수 있다.
  • 주요한 유형은 다음과 같다:
  1. 웹 페이지 (Web Pages): 가장 일반적으로 웹 브라우저에서 접근하는 HTML 문서다. 웹 페이지의 URI는 주로 URL로 나타난다.
    • 예: https://www.example.com/index.html
  2. 이미지 (Images): 웹 페이지에서 사용되는 그림이나 사진 등의 이미지 파일은 각각 고유한 URI를 가진다.
    • 예: https://www.example.com/images/photo.jpg
  3. 문서 및 파일 (Documents and Files): 다양한 문서 형식이나 파일도 각각의 URI를 가지고 있다.
    • 예: https://www.example.com/documents/report.pdf
  4. 동영상 (Videos): 동영상 파일은 각각의 URI를 통해 접근할 수 있다.
    • 예: https://www.example.com/videos/tutorial.mp4
  5. 웹 서비스 및 API (Web Services and APIs): 웹 서비스나 RESTful API도 URI를 통해 자원을 식별한다.
    • 예: https://api.example.com/v1/data

이러한 자원들은 URI를 통해 고유하게 식별되며, 이를 통해 인터넷 사용자는 해당 자원에 접근하고 사용할 수 있습니다.

URI

단어 뜻

  • Uniform: 리소스 식별하는 통일된 방식
  • Resource: 자원, URI로 식별할 수 있는 모든 것(제한 없음)
  • Identifier: 다른 항목과 구분하는데 필요한 정보
  • URL: Uniform Resource Locator
  • URN: Uniform Resource Name

URL, URN

단어 뜻

  • URL - Locator: 리소스가 있는 위치를 지정
  • URN - Name: 리소스에 이름을 부여
  • 위치는 변할 수 있지만, 이름은 변하지 않는다.
  • urn:isbn:8960777331 (어떤 책의 isbn URN)
  • URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화되지 않음
  • 앞으로 URI를 URL과 같은 의미로 이야기하겠음

URL 분석

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

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)

URL 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)

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=valueA&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 내부 북마크 등에 사용
  • 서버에 전송하는 정보 아님

웹 브라우저 요청 흐름

웹 브라우저에서 검색창에 https://www.google.com:443/search?q=hello&hl=ko 을 입력하면 어떤일이 발생할까? 

 

  1. DNS 조회를 하여 www.google.com에 매핑되는 IP 정보를 얻는다.
    • HTTPS PORT 번호는 생략이 가능하다.
  2. HTTP 요청 메시지를 생성한다.

HTTP 요청 메시지

GET /search?q=hello&hl=ko HTTP/1.1 
Host: www.google.com 
  • HTTP 요청 메시지는 위와 같이 구성되어 있다.

HTTP 메시지 전송

  1. 웹 브라우저가 HTTP 메시지 생성한다.
  2. 메시지를 SOCKET 라이브러리를 통해 OS로 전달한다.
    • A: TCP/IP 연결(IP, PORT)
    • B: 데이터 전달
  3. TCP/IP 패킷 생성, HTTP 메시지 포함
    • HTTP 메시지에 TCP/IP 패킷을 씌운다.
  4. 네트워크 인터페이스를 거쳐서 목적지 서버로 패킷을 전송한다.

패킷 생성

패킷 전송

  • 웹 브라우저는 구글 서버로 패킷을 전송한다. 이때 전송된 패킷은 인터넷을 거치는데 패킷의 IP 패킷에 설정된 값에 따라 목적지로 전송된다.
  • 웹 브라우저가 보낸 패킷이 구글 서버에 도착하면 TCP/IP 패킷을 까고 TCP 패킷에 설정된 값을 해석해서 적절한 애플리케이션에 HTTP 메시지를 보낸다.
  • 애플리케이션은 HTTP 메시지를 해석하고 data를 가져간다.

HTTP 응답 메시지

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

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

패킷 응답

구글 서버는 웹 브라우저가 요청한 데이터를 HTTP 메시지에 담아서 웹 브라우저에 보낸다.

서버에서 보낸 HTTP 메시지를 웹 브라우저는 해석하고 렌더링을 진행한다.

참고

김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다.

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC

 

'네트워크 > HTTP' 카테고리의 다른 글

6. HTTP 상태코드  (1) 2024.08.04
5. HTTP 메서드 활용  (0) 2024.08.04
4. HTTP 메서드  (0) 2024.08.04
3. HTTP  (0) 2024.08.03
1.internet-network  (0) 2024.08.01
  1. URI(Uniform Resource Identifier)
  2. URL 분석
  3. 웹 브라우저 요청 흐름
  4. 참고
'네트워크/HTTP' 카테고리의 다른 글
  • 5. HTTP 메서드 활용
  • 4. HTTP 메서드
  • 3. HTTP
  • 1.internet-network
an_jjin
an_jjin
공부한 내용을 정리하는 개발 기록 블로그
an_jjin
An Devlog
an_jjin
전체
오늘
어제
  • 분류 전체보기
    • JAVA
      • 초급
      • 중급1
      • 중급2
      • 고급1
    • Spring
      • 핵심 원리 기본
      • MVC1
      • MVC2
      • DB1
      • 락
      • 디자인 패턴
      • AOP
    • JPA
      • JPA 기본
      • JPA 활용 1
      • JPA 활용 2
      • Spring Data Jpa
      • JPA 정리
    • 프로젝트
      • Filmeet
      • FitTrip
      • Kidsping
    • CS
      • 기술 면접 대비 CS 전공 핵심요약집
    • 네트워크
      • HTTP
      • WebSocket
    • 데이터베이스
    • 운영체제
      • 뇌를 자극하는 윈도우즈 시스템 프로그래밍
    • Git
    • Kafka
    • Docker
    • [LG유플러스] 유레카
    • 회고

블로그 메뉴

  • 홈
  • 태그
  • 방명록

링크

공지사항

인기 글

태그

lg 유플러스 유레카 후기
spring websocket
STOMP
캐시
lg 유플러스 유레카 sw 교육 후기
db부하
redlock
자바
트랜잭션 아웃박스 패턴
lg 유레카
이벤트 응모 시스템
객체지향
Websocket
queryplan
transactional outbox pattern
after_commit
redis 분산락
before_commit
분산락
빈 후처리기
lg 유플러스 유레카 sw 교육
redis
도커
Transactional Outbox
동시성
프록시 팩토리
AOP
선착순 응모 시스템
스레드
lg 유플러스 유레카

최근 댓글

최근 글

hELLO· Designed By정상우.v4.6.1
an_jjin
2. URI와 웹 브라우저 요청 흐름

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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