웹 브라우저(URI, URL, URN, 흐름)

인프런 강의 中 
김영한 강사님의 '모든 개발자를 위한 HTTP 웹 기본 지식' 내용을 정리했습니다.

이미치 출처: https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC#

 

안녕하십니까, 웅쓰입니다. 최근 여행 이슈와 다른 툴 공부를 하느라 포스팅이 늦어졌습니다. 이번 시간에는 평소에 자주 사용하는 용어인 URI, 그리고 웹 브라우저로 정보를 요청했을 때 주고 받는 데이터의 흐름을 정리해보겠습니다. 김영한 강사님의 명강을 통해서 말입니다! 늦은 만큼 더 열심히 하는 웅쓰의 모습을 보여드리도록 하겠습니다. 아자아자 화이팅!!!

 

목차

• URI, URL, URN
• 웹 브라우저 요청 흐름

 

1. URI, URL, URN

결론부터 말하자면 URL과 URN은 URI에 속해있는 방식이다.

URI는 로케이터(locatro), 이름(name)로 분류될 수 있다. 그런데 우리가 평소해 잘 들어보지 못했듯 URN은 거의 사용하지 않는다. 그래서 URI와 URL을 같은 의미로 사용해도 무방하다!

 

관계 이미지

URI, URL, URN 관계

 

URI(Uniform Resource Identifier)

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

URL(Uniform Resource Locator)

• 리소스가 어디 있는지 위치를 알려주는 방법

URL 구조

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

scheme

• 주로 프로토콜 사용(ex. http, https, ftp 등 응용계층 프로토콜)

userinfo

• URL에 사용자정보를 포함해서 인증(거의 사용하지 않음)

host

• 호스트명으로써 도메인명 또는 IP 주소를 직접 사용가능

port

• 접속 포트 번호
• 일반적으로 생략, 생략시 http: 80, https: 443(ftp 등 많음)

path

• 리소스 경로, 계층적 구조
• ex) /items/iphone12

query

• query parameter, query string 등으로 불림
• key=value 형태
• ?로 시작, &로 추가 가능 
• ex)?keyA=valueA&keyB=valueB

fragment

• 페이지 안에서 특정 위치를 가리키기 위한 용도(html 내부 북마크)
• 서버에 전송하는 정보가 아님
• ex)
  • https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js#hybrid-app 
  • https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js#android

 

URN(Uniform Resource Name)

• 리소스에 이름을 부여하는 방법
• URN 이름만으로 실제 리소스를 찾을 수 있는 방법이 보편화 되지 않았음
• 필자는 잘 사용하지 않는다고 해서 그냥 그런게 있구나~ 하고 넘어감...!

 

2. 웹 브라우저 요청 흐름

위 URL 형식을 따라서 웹 브라우저 요청을 했을 때 어떤 흐름으로 데이터가 송수신 되는지 확인해보겠다.

URL

다음과 같이 URL을 입력하면 DNS가 www.google.com이 가지는 IP주소를 찾아서 변환해주고 HTTP 요청 메시지가 생성된다. 

HTTP 요청 메시지는 URL의 정보에 따라 다음과 같이 구성된다.

HTTP 요청 메시지

 

해당 HTTP 메시지는 다음과 같은 순서를 따라서 서버에 전송된다.

HTTP 메시지 전송 순서

 

애플리케이션(응용) Layer에서 위 형식과 같은 HTTP 요청 메시지를 생성하고 SOCKET 라이브러리에서 TCP 3 handshake로 TCP/IP 연결을 한 뒤 OS Layer에서 패킷을 생성해 전송하는 흐름을 가진다. 이때, 전송할 패킷을 확인해보면 다음과 같은 모습으로 데이터를 담고 있다.

생성된 패킷의 모습

 

다음과 같이 HTTP 요청 메시지를 포함한 패킷이 서버에 전달된다.

요청 패킷 전달 모습

 

전달을 받은 구글 서버는 웹 브라우저에 다음과 같은 HTTP 응답 메시지를 전송한다.

HTTP 응답 메시지

 

200 OK

•  요청이 성공했음을 나타내는 성공 응답 상태 코드

Content-Type: text/html;charset=UTP-8

• 응답 메시지가 html의 text형식으로 보내지고 UTP-8로 인코딩 되어있다.

응답 패킷 전달

 

응답 패킷을 전달 받은 웹 브라우저는 패킷의 내용을 토대로 웹 브라우저 HTML 렌더링을 한다.

웹 브라우저가 요청한 내용을 받아 렌더링 한 모습

 

URI, URL, URN과 웹 브라우저의 흐름을 정리해보았다. 이번 내용 중에서 웹 브라우저 요청시 데이터의 흐름을 훑어볼 수 있어서 좋았다.

 

김영한 강사님 강의!!

https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC

모든 개발자를 위한 HTTP 웹 기본 지식 | 김영한 - 인프런