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

URI(Uniform Resource Identifier)

URI? URL? URN? 차이가 뭘까?

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

먼저, URI라는 가장 큰 개념이 있고 이것은 리소스를 식별하는 방법이다.

사람을 주민등록번호로 식별하듯이

자원 자체를 식별하는 방법으로써 크게 두가지가 있다.

하나는 우리가 잘아는 URL이다.

URL은 리소스의 위치를 뜻한다. 웹브라우저에 https ~~ 해서 접속하는 경로이다.

다른 하나는 URN인데 리소스에 이름을 딱 부여해버리는 것이다.(거의 쓰이지 않음)

 

사실상 거의 URL만 쓰기 때문에 URN은 이런게 있다 정도만 생각하자.

URI 단어 뜻

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

URL, URN 단어 뜻

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

URL 전체 문법 

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

• 프로토콜(https)
• 호스트명(www.google.com)
• 포트번호(443)
• 패스-path(/search)
• 쿼리 파라미터(q=hello&hl=ko)

URL schema

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

• 주로 프로토콜 사용
  • 프로토콜 : [통신규약] 어떤 방식으로 자원에 접근할 것인가 하는 약속, 규칙
    • ex) 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

• 호스트명
  • 호스트(host) : 네트워크에 연결되어 있는 컴퓨터들 (IP를 가지고 있고 양방향 통신이 가능한 컴퓨터)
• 도메인명 또는 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), 계층적 구조
• ex)
  • /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 내부 북마크 등에 사용
• 서버에 전송하는 정보는 아님

웹 브라우저 요청 흐름

위와 같은 웹 요청의 흐름을 알아보자

• 웹브라우저는 먼저 DNS 서버를 조회해서 www.google.com의 IP주소를  알아낸다.
• 포트는 생략이 가능하므로 IP와 PORT 정보를 알아내었다.
• 다음으로 HTTP 요청 메시지를 생성한다.

http 요청 메시지의 간단한 양식이다.

http 메서드(GET), path부터 쿼리까지의 URI 정보, hppt 버전정보, host 등의 정보를 담고 있다.

 

다음으로 만들어진 HTTP 메시지의 전송에 대해서 알아보자.

1. 웹 브라우저가 HTTP 메시지를 생성한다.
2. 브라우저가 생성한 HTTP 메시지를 SOCKET 라이브러리를 통해서 OS에 전달한다.
   1. 이 때, 먼저 위에서 찾은 IP와 PORT 정보를 통해 TCP/IP의 3 way handshake를 통해 서버와 가상회선을 연결한다.
   2. 그리고 해당 데이터(HTTP 메시지)를 전달한다.
3. HTTP 메시지에 IP와 PORT 정보가 들어있는 패킷을 씌워서(캡슐화) TCP/IP 패킷을 생성한다.
4. 해당 패킷을 인터넷 망으로 보낸다.

전송 데이터는 웹 브라우저가 만든 HTTP 메시지이다.

• 생생된 패킷이 서버에 도착하면 서버에서는 역캡슐화를 통해 HTTP 메시지를 꺼낸다.
• 꺼낸 HTTP 메시지를 해석해서 요청을 처리후 HTTP 응답 메시지를 생성한다.

HTTP 응답 메시지에는

http 버전, 응답 코드, html의 텍스트, character set은 UTF-8 인코딩, 본문 길이 등의 정보가 포함된다.

 

이제 생성한 응답 메시지를 서버에서 클라이언트로 다시 보낸다.

서버도 동일한 방식으로 응답 패킷을 생성하고 인터넷 망으로 던져 클라이언트에 전달한다.

• 웹 브라우저는 수신한 응담 패킷을 역 캡슐화하여 HTTP 응답메시지를 꺼낸다
• 해당 메시지에 있는 HTML을 랜더링해서 화면에 보여준다.
  
  • 랜더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정

 

 

해당 글은 인프런에서 김영한님의 <모든 개발자를 위한 HTTP 웹 기본지식> 를 듣고 정리한 내용입니다.

 

https://hihighlinux.tistory.com/73

host란? 호스트란 무엇일까?

https://cyk0825.tistory.com/12

URL,URI 와 URN 차이

https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80

HTML 기초 - 3 (렌더링이란?)

https://velog.io/@syleemk/HTTP-URI%EC%99%80-%EC%9B%B9-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%9A%94%EC%B2%AD-%ED%9D%90%EB%A6%84

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