고슴맨쉬
망치와 공(空)
고슴맨쉬
  • 분류 전체보기 (155)
    • 💡 UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • 개념 (42)
      • 정리 (2)
      • 문제풀기 (프로그래머스, 코딩애플) (15)
      • 응용하여 자동화or문제해결하기 (2)
      • 기타 (5)
    • ⚛️ React (49)
      • 개념 (27)
      • 개념(Redux) (3)
      • 정리 (4)
      • 문제풀기 (코딩애플: React) (15)
    • 📘 TypeScript (10)
      • 개념 (8)
      • 문제풀기 (코딩애플) (2)
    • 🌐 HTML,CSS (18)
      • 실무에서 자주 발생한 오류들 (10)
      • 뒤늦게 알아서 뼈아픈 유용한 CSS (6)
      • 기타 자주 쓰는 CSS (2)
    • 💻 CS (8)
      • CS (5)
      • 정규표현식 (2)
      • Git,Github (1)

태그

  • 오류
  • JavaScript
  • 프로그래머스
  • redux
  • 코딩애플
  • json
  • array
  • UXUI
  • react
  • TypeScript
  • class
  • CSS
  • Props
  • state
  • object
  • Ajax
  • CS
  • axios
  • useEffect
  • 삼항연산자
전체 방문자
오늘
어제
hELLO · Designed By 정상우.
고슴맨쉬

망치와 공(空)

💻 CS/CS

CS : URI와 웹 브라우저 요청 흐름 (2) URL을 통한 웹 브라우저 요청 흐름

2023. 9. 11. 17:25

웹 브라우저 요청 흐름

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

웹 브라우저가 위 예시 URL을 통해 웹 페이지에 접근하는 과정이다.


1. DNS 조회

웹 브라우저는 입력한 URL(ex. https://www.google.com)을 기반으로 DNS(Domain Name System) 서버에 도메인 이름 해석을 요청한다. DNS는 해당 도메인의 IP 주소를 찾아 반환한다. 


2. TCP 연결 설정

웹 브라우저는 웹 서버에 접속하기 위해 TCP/IP 연결을 설정한다.


3. HTTP 요청 생성

웹 브라우저가 HTTP 요청 메세지를 생성한다. 이는 아래처럼 생겼다.

GET /search?q=hello&hl=ko HTTP/1.1
HOST www.google.com

4. 요청 전송

생성된 HTTP 요청 메시지는 TCP/IP 연결을 통해 웹 서버로 전송된다.

IP 패킷은 LAN 카드를 통해 전송되며, 이 카드는 데이터를 전기 신호로 변환하여 네트워크에서 물리적으로 전달한다. 이후 목적지 서버의 네트워크 인터페이스 계층에서 패킷을 수신하게 된다.


5. 목적지 서버의 처리

목적지인 구글 서버는 TCP/IP 패킷 내부의 HTTP 요청 메세지를 받고, 해당하는 리소스나 데이터를 검색한다. 그 후 아래와 같은 HTTP 응답 메세지를 보낸다.

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

6. 렌더링

1~ 5번과 같은 과정을 거쳐 클라이언트 웹 브라우저에 응답 패킷이 도착하면, 다시 클라이언트 웹 브라우저가 TCP/IP 패킷 내부의 HTTP 응답 메세지를 해석해 렌더링해 화면에 표시한다.


출처 : 인프런 모든 개발자를 위한 HTTP 웹 기본 지식 / 김영한 등

저작자표시 비영리 동일조건 (새창열림)

'💻 CS > CS' 카테고리의 다른 글

CS : URI와 웹 브라우저 요청 흐름 (1) URI  (0) 2023.09.11
CS : 인터넷 네트워크 (3) PORT, DNS  (0) 2023.09.11
CS : 인터넷 네트워크 (2) IP, TCP, UDP  (0) 2023.09.11
CS : 인터넷 네트워크 (1) 인터넷 프로토콜 계층  (0) 2023.09.11
    '💻 CS/CS' 카테고리의 다른 글
    • CS : URI와 웹 브라우저 요청 흐름 (1) URI
    • CS : 인터넷 네트워크 (3) PORT, DNS
    • CS : 인터넷 네트워크 (2) IP, TCP, UDP
    • CS : 인터넷 네트워크 (1) 인터넷 프로토콜 계층
    고슴맨쉬
    고슴맨쉬
    부수되 집착하지 않고, 이해하되 머무르지 않기

    티스토리툴바