HTTP - URI, 웹 브라우저 요청 흐름

2024. 5. 10. 15:11· 인프런 김영한 강의 정리/모든 개발자를 위한 HTTP 웹 기본 지식
목차
  1. 1. URI와 URL, URN
  2. 2. URL 문법
  3. 3. 웹 브라우저의 요청 흐름
728x90

1. URI와 URL, URN

URI = Uniform Resource Identifier

(리소스를 식별하는 통합된 방법)

URL = Uniform Resource Locator

(리소스의 위치를 지정)

URN = Uniform Resouce Name

(리소스에 이름을 부여)

 

- 위치는 변할 수 있지만, 이름은 변하지 않는다.

- URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화되지 않았다.

- 그러니, URI 와 URL에 대해 알면 된다!

 

2. URL 문법

URL문법

패스: 리소스 경로

쿼리 파라미터 : key = value 형태. '?'으로 시작하고 '&'으로 파라미터를 추가한다.

 

3. 웹 브라우저의 요청 흐름

https://ururuwave.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F

제 URL을 기준으로 설명해보겠습니다.

 

🌊요청 흐름

URL 파싱 -> DNS 조회 -> 서버와 TCP 연결 -> HTTP 요청 메시지 생성 및 전송 -> 서버 응답 -> 콘텐츠 렌더링

 

1) URL 파싱

웹 브라우저는 URL을 파싱하여 프로토콜(https), 호스트(ururuwave.tistory.com), 경로(/manage/newpost/), 그리고 쿼리 스트링(type=post&returnURL=%2Fmanage%2Fposts%2F)으로 분리한다.

 

2) DNS 조회

브라우저는 주어진 호스트 이름(ururuwave.tistory.com)의 IP 주소를 찾기 위해 DNS(Domain Name System) 조회를 수행한다. DNS 서버는 호스트 이름을 IP 주소로 변환하여 브라우저에 반환한다.

 

3) 서버와 TCP 연결

HTTP 프로토콜을 사용하면서 https가 지정된 경우, 웹 브라우저는 TCP/IP 프로토콜을 사용하여 서버의 443 포트(HTTPS의 기본 포트)로 연결을 시도한다.

 

4) HTTP 요청 메시지 생성 및 전송

연결이 성립되면, 브라우저는 HTTP 요청 메시지를 생성하여 서버로 전송한다.

 

✅요청메시지 예시

GET /manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F HTTP/1.1
Host: ururuwave.tistory.com
User-Agent:(생략)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Cookie: <cookie data>
Connection: keep-alive

 

5) 서버 응답

서버는 요청을 처리한 후 HTTP 응답 메시지를 클라이언트에게 보낸다.

응답은 상태 코드, 상태 메시지, 헤더, 그리고 요청한 페이지의 내용을 포함한다.

 

✅응답메시지 예시

HTTP/1.1 200 OK
Date: Mon, 23 May 2022 10:20:30 GMT
Server: Apache/2.4.18 (Ubuntu)
Last-Modified: Sat, 20 May 2022 06:22:19 GMT
Content-Type: text/html; charset=UTF-8
Content-Encoding: gzip
Content-Length: 2456
Set-Cookie: <cookie data>
Connection: close

<html>
<!-- HTML document content -->
</html>

 

6. 콘텐츠 렌더링

브라우저는 응답 받은 HTML, CSS, JavaScript 등을 파싱하고 실행하여 사용자에게 웹 페이지를 표시한다.

728x90

'인프런 김영한 강의 정리 > 모든 개발자를 위한 HTTP 웹 기본 지식' 카테고리의 다른 글

HTTP - HTTP 메서드의 활용 및 API 설계  (0) 2024.05.10
HTTP - HTTP 메서드의 속성  (0) 2024.05.10
HTTP - HTTP 메서드  (0) 2024.05.10
HTTP - HTTP 특징  (0) 2024.05.10
HTTP - 인터넷 네트워크  (0) 2024.05.10
  1. 1. URI와 URL, URN
  2. 2. URL 문법
  3. 3. 웹 브라우저의 요청 흐름
'인프런 김영한 강의 정리/모든 개발자를 위한 HTTP 웹 기본 지식' 카테고리의 다른 글
  • HTTP - HTTP 메서드의 속성
  • HTTP - HTTP 메서드
  • HTTP - HTTP 특징
  • HTTP - 인터넷 네트워크
백엔드 개발자 - 젤리곰
백엔드 개발자 - 젤리곰
오늘도 배움이 있는 하루가 되길 바라는 개발자
백엔드 개발자 - 젤리곰
backend-gummyBear
백엔드 개발자 - 젤리곰
전체
오늘
어제
  • 분류 전체보기 (144)
    • 인프런 김영한 강의 정리 (60)
      • 스프링 핵심원리 기본편 (12)
      • 모든 개발자를 위한 HTTP 웹 기본 지식 (10)
      • 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 (3)
      • 자바 ORM 표준 JPA 프로그래밍 기본편 (28)
      • 실전! Querydsl (6)
    • Spring (2)
    • 프로젝트일지 (6)
    • 프로그래밍 언어 (20)
      • Java (17)
      • JavaScript (3)
      • Python (0)
    • 데이터베이스 (4)
      • Oracle (2)
      • ORM (1)
      • SQL 튜닝 (1)
    • 형상관리 (1)
      • Git (0)
    • 알고리즘&자료구조 (34)
      • Algorithm (31)
      • Data Structure (1)
    • CS지식 (4)
    • Cloud (5)
    • 일기 (7)
      • 공부 일기 (3)
      • 독서 일기 (2)
      • 마음 일기 (2)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • SublimeText단축키
  • 스프링컨텍스트
  • 프론트엔드개발자업무
  • 인터페이스
  • 데이터베이스정규화
  • 객체지향의사실과오해
  • LeetCode17번
  • 커스텀annotation
  • jquery와javascript
  • dfs알고리즘
  • ORM프레임워크
  • LeetCode200번
  • 프론트엔드역사
  • 업캐스팅
  • 클라이언트서버통신
  • 다운캐스팅
  • #{}와${}의차이
  • 인프콘
  • 객체지향방법론
  • 힙자료구조

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
백엔드 개발자 - 젤리곰
HTTP - URI, 웹 브라우저 요청 흐름
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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