URI와 웹 브라우저 요청 흐름

1. URL(Uniform Resource Identifier)

🧐 URI? URL? URN?

💡 URI 내부에 URL, URN이 포함되어 있다.

URI는 로케이터(locator), 이름(name) 또는 둘 다 추가로 분류될 수 있다.

📌 URI(Uniform Resource Identifier) 뜻

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

📌 URL(Uniform Resource Locator) 뜻

• Locator: 리소스가 있는 위치를 지정한다.

📌 URN(Uniform Resource Name) 뜻

• Name: 리소스에 이름을 부여

위치는 변할 수 있지만 이름은 변하지 않는다. URN 이름만으로 실제 리소스를 찾는 방법이 보편화되지 않았다.

📌 URL 전체 문법

scheme://[userinfo@]host[:port][/path][?query][#fragment]
https://www.google.com:443/search?q=hello&hl=ko

• scheme
  주로 프로토콜을 사용한다. http는 80 포트, https는 443 포트를 주로 사용, 포트는 생략할 수 있다.

  🧐 프로토콜이란? 어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙이다.
  예) http, https, ftp 등등

• userinfo
  URL에 사용자 정보를 포함해서 인증할 때 사용하는데 userinfo는 거의 사용하지 않는다.

• host
  호스트명이라고 한다. 보통 도메인명을 사용하거나 IP 주소를 직접 사용한다.

• [:port]
  접속 포트로 일반적으로 생략하지만, 특정 서버에 따로 접근할 때는 PORT를 입력한다. (EX: localhost:8080)

• [/path]
  리소스가 있는 경로로 계층적 구조로 되어 있다.
  (EX: pages/coupon/couponpager.vue)

• [?query]
  key=value 형태로 데이터가 들어가 있다. ?로 시작, &로 추가 가능하다.
  (EX: ?keyA=valueA&keyB=valueB)
  'query parameter'라 하고 웹서버에 제공하는 파라미터가 문자 형태이기 때문에 'query string'으로도 불린다.

• [#fragment]
  HTML 내부에서 중간에 이동하고 싶을 때 북마크 등에 사용한다. 잘 사용하지 않고 서버에 전송하는 정보는 아니다.

---

2. 웹 브라우저 요청 흐름

🧐 웹 브라우저는 어떻게 동작할까?

1. URL을 입력한다.
2. DNS를 조회해서 해당 도메인의 IP를 찾아내고 PORT가 생략되어 있다면 scheme(https) 포트번호를 반환한다.
3. 웹 브라우저가 HTTP 요청 메시지를 생성한다.

4. SOCKET 라이브러리를 통해 메시지를 전달한다.

• TCP/IP로 IP와 PORT 정보를 찾은 다음, 3 way handshake 방식으로 구글 서버와 연결하고 데이터를 전달한다.

5. TCP/IP 패킷을 생성해서 패킷 정보가 인터넷으로 흘러 들어가게 된다.

6. 웹 브라우저가 보낸 요청 패킷이 서버에 도착하면 패킷을 열어서 HTTP 메시지를 확인하고 서버가 해석한다.

7. 서버가 HTTP 응답 메시지를 만들어서 TCP/IP 패킷으로 감싼 후 웹 브라우저에 전송하면, 웹 브라우저에서 패킷을 열어 HTTP 응답 메시지를 확인하고 해석한다.

8. 웹 브라우저가 HTML을 렌더링해서 내가 화면에서 HTML 결과를 볼 수 있게 된다.