URI(Uniform Resource Identifier: 통합 자원 식별자)
Uniform: 리소스를 식별하는 통일 된 방식
Resource: 자원. 영상, 이미지, 소리, 텍스트 등 제한이 없다.
Identifier: 구별을 위한 정보
한 줄로 인터넷 세상의 어엄청 많은 자원을 식별하는 정보 라는 뜻이다.
URI / URL / URN
URI는 URL(Location)과 URN(Name)을 포괄하는 개념이다.
쉽게 말해 URL은 리소스의 위치, URN은 리소스의 이름이다. 위치는 변할 수 있는데 이름은 변하지 않는다. 하지만 이름만으로 리소스를 식별하는 방법이 보편적이진 않다. 그래서 일반적으로 URL을 많이 사용한다.
URL
1
2
3
4
5
6
7
hierarchical part
┌───────────────────┴────────────────────┐
authority path
┌───────────────┴──────────────┐┌───┴────┐
abc://username:password@example.com:123/path/data?key=value#fragid1
└┬┘ └───────┬───────┘└────┬─────┘└─┬┘ └───┬────┘└───┬──┘
scheme user information host port query fragment
Scheme
abc://username:password@example.com:123/path/data?key=value#fragid1
주로 프로토콜을 사용하며 ftp, http 80, https 443 포트를 사용한다.
userinfo
abc://username:password@example.com:123/path/data?key=value#fragid1
너무 길어져서 주로 생략함. https://www.google.com/
도 생략되어있다.
사용자 정보를 포함해야 할 때 사용한다.
host
abc://username:password@example.com:123/path/data?key=value#fragid1
https://www.google.com/
는 도메인으로 host 로만 이루어짐.
port
abc://username:password@example.com:123/path/data?key=value#fragid1
일반적으로 생략이 가능하다. http는 80, https는 443 이다.
path
abc://username:password@example.com:123/path/data?key=value#fragid1
리소스의 경로. https://www.google.com/search
처럼 경로를 보여준다. 계층적 구조로 search
에서 /
뒤에 검색어
를 입력하는 등 원하는 경로를 뒤에 점점 붙여나간다.
query
abc://username:password@example.com:123/path/data?key=value#fragid1
key:value
형식으로 사용한다. ?
로 시작하고 &
로 추가한다. query parameter, 혹은 query string으로 불린다.
예시: https://www.google.com/search?q=helloworld&hl=ko
fragment
abc://username:password@example.com:123/path/data?key=value#fragid1
html 내부 북마크 등에서 사용함. 서버로 전송하는 정보는 아니다! 예를 들어 현재 블로그의 우측 Contents
에서 목차를 이동하면 URL 뒤에 패스가 붙는데, 이 정보다!
웹브라우저 요청의 흐름
전체 순서.
- 앱) 웹 브라우저는 HTTP 요청 메시지를 생성한다.
- 앱) 웹 브라우저에서 SOCKET 라이브러리로 메시지를 전달한다.
- OS) TCP/IP 에서 받은 HTTP와 패킷을 생성한다.
- 네트워크) 랜 드라이버를 통해 인터넷으로 전송
- 인터넷) 엄청 많은 노드를 거쳐 서버로 전달
- 서버) 패킷 버림. HTTP 메시지 해석
- 서버) HTTP 응답 메시지 생성, 응답 패킷 생성
- 인터넷) 엄청 많은 노드를 거쳐 웹 브라우저로 전달
- 네트워크-> OS를 거쳐 웹 브라우저로 전달.
- 앱) 응답 패킷 버림. 응답 HTTP 해석
- 앱) HTML 렌더
1. 앱) 웹 브라우저는 HTTP 요청 메시지를 생성한다.
예를 들어 내가 구글 검색창에 한국어 모드로 ‘helloworld’ 를 검색하면, 웹 브라우저는 https://www.google.com/search?q=helloworld&hl=ko
라는 URL을 생성한다. 그리고 해당 URL의 Schema, UserInfo, DNS(HOST), PORT, PATH, Query 정보를 해석해 HTTP 요청 메시지를 생성한다.
- HTTP 메시지
1
GET/search?q=helloworld&hl=ko HTTP/1.1 HOST:www.google.com
2. 앱) 웹 브라우저에서 SOCKET 라이브러리로 메시지를 전달한다.
생성한 요청 HTTP 메시지를 같은 앱단의 SOCKET 라이브러리로 전달한다.
- TCP/IP 연결(IP, PORT)
- 데이터 전달.
3. OS) TCP/IP 에서 받은 HTTP와 패킷을 생성한다.
요청 HTTP 메시지를 받은 후 패킷을 생성한다.
4. 네트워크) 랜 드라이버를 통해 인터넷으로 전송
인터넷 망으로 던진다!
5. 인터넷) 엄청 많은 노드를 거쳐 서버로 전달
목적 서버로 이리저리 튕겨간다.
6. 서버) 패킷 버림. HTTP 메시지 해석
도착하면 요청 패킷은 필요 없다. 버리고 받은 DATA를 확인한다. https://www.google.com/search?q=helloworld&hl=ko
를 해석한 후 구글의 내부 검색 엔진에서 해당 데이터를 찾는다.
7. 서버) HTTP 응답 메시지 생성, 응답 패킷 생성
데이터를 찾은 후 웹 브라우저로 보내줄 응답 메시지를 작성한다.
- HTTP 메시지
1
2
3
4
5
6
7
HTTP/1.1 200 OK
Content-Type: text/html;charset=UTF-8
Content-Length:3423
<html>
<body>.....</body>
</html>
답변에 HTML 코드가 들어간다. 그리고 웹 브라우저로 돌아올 패킷을 생성한다.
8,9. 서버->노드->인터넷->네트워크->OS->웹
왔던 것 처럼 다시 온다~
10. 앱) 응답 패킷 버림. 응답 HTTP 해석
마찬가지로 응답 받은 패킷은 필요 없으니 버린다. 이제 웹 브라우저에서 응답 HTTP를 해석한다!
11. 앱) HTML 렌더
해석이 완료되었다! 사용자가 볼 수 있도록 HTML Data를 렌더해서 보여준다!