[HTTP] 2. 웹 브라우저 요청 흐름
모든 개발자를 위한 HTTP 웹 기본 지식 (김영한) 강의 수강 후 정리한 자료입니다.
❗웹 브라우저에서 요청을 보내면 무슨 일이 일어날까?❗
✨ URI
정의
: URI (Uniform Resource Identifier)
- 리소스를 식별하는 통합된 방법
- URI는 로케이터(locator), 이름(name) 또는 둘다 추가로 분류될 수 있다.
- 구분할 수 있는 모든 것을 Resource라고 함.
URI, URL과 URN
- URI는 URL과 URN을 통합해서 부르는 이름이다.
- URI (Resorce Identifier) - 자원 자체를 식별
- URL (Resource Locator) - 리소스 위치
-> URL은 우리가 흔히 보는 인터넷 링크라고 볼 수 있다.
ex) https://-google.com - URN (Resource Name) - 리소스 이름
ex) urn:example:animal (거의 사용 X)
URL의 문법
- scheme://[userinfo@]host[:port][/path][?query][#fragment]
ex) https://www.google.com:443/search?q=hello&hi=ko
분석
- 프로토콜(https)
- 호스트명(www.google.com)
- 포트 번호(443)
- path (/search)
- 쿼리 파라미터(q=hello&hi=ko)
scheme
- 주로 프로토콜 사용
- 프로토콜 : 어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙
ex) http, https, ftp 등 - https는 http에 보안을 추가한 것
userinfo
- URL에 사용자 정보를 포함해서 인증할 때 사용
- 거의 사용하지 않음
host
- 호스트명
- 도메인명 또는 IP 주소를 직접 사용 가능
PORT
- http는 80 포트, https는 443 포트를 주로 사용
- 포트 생략 가능
path
- 리소스 경로
- 계층적 구조
- 디렉토리, 컬렉션 개념이라고 생각하면 쉽다.
query
- key=value 형태
- ?로 시작, &로 시작 가능
- query parameter, query string 등으로 불림.
fragment
- html 내부 북마크 등에 사용
- 서버에 전송되는 정보는 아니다.
- 잘 사용하지 않음
✨ 웹 브라우저 요청 흐름
구글에 검색을 하는 상황이 발생했다고 가정하자. 인터넷에 들어가 URL을 입력했을 때, 어떤 상황이 발생할까?
ex) https://www.google.com/search?q=hello&hi=ko
과정은 다음과 같다.
- 웹 브라우저에서 구글 서버를 찾음. (DNS 서버 조회)
- DNS 서버에서 IP 주소와 생략된 포트 번호 (https니까 443)를 찾음
- 웹 브라우저에 IP 주소 + 포트 번호를 HTTP 요청 메시지에 담아 응답
** HTTP 요청 메시지 구조 **
- path, query, http 버전 정보, host 정보 등이 들어감.
- 인터넷 네트워크 정리본에서 나왔던 것처럼, HTTP 메시지 전송 방식을 토대로 HTTP 메시지가 전송된다. (전송만 되는 것, 주고 받는 것 X)
- TCP 3 handshake 방식 등을 통해 통신이 가능한지 확인하는 작업 (HTTP 메시지 전송) 은 HTTP 요청 메시지 생성 후 일어나는 일이다. 헷갈리지 말자.
->TCP 3 handshake를 모른다면? 인터넷 네트워크 를 보고 오자!
-
웹 브라우저가 구글 서버에 도착했다. 구글 서버에서는 요청 패킷의 TCP/IP를 벗겨내고 HTTP 메시지를 분석한다.
-> 쿼리 스트링은 어쩌고… -
구글 서버에서 HTTP 응답 메시지 생성
** HTTP 응답 메시지 **
- Content-Type가 text/html 형식, 실제 데이터 길이가 이정도다,라는 응답 메시지 생성
- 웹 브라우저에서는 HTTP 응답 메시지 안에 들어있는 HTML 정보를 토대로 HTML을 렌더링한다. (결과를 보여줌)