URI와 웹 브라우저 요청 흐름

이 글은 '모든 개발자를 위한 HTTP 웹 기본 지식 (김영한)' 강의를 듣고 정리한 글입니다.

---

1. URI

URI란 Uniform Resource Identifier의 약자로 리소스를 식별하는 통합된 방법을 뜻한다.

 

리소소를 식별한다, 사람들이 주민번호로 식별할 수 있듯이 자원의 자체를 식별하는 방법이라는 뜻이다.

URI의 각 단어 뜻 부터 정리해보면 다음과 같다.

Unifrom : 리소스 식별하는 통일된 방식
Resource : 자원, URI로 식별할 수 있는 모든 것 (HTML 파일 뿐만 아니라, 실시간 교통정보 등 구분할 수 있는 모든 것)
Identifier : 식별자, 다른 항목과 구분하는데 필요한 정보

 

URI로는 URL, URN이 포함된다.

"URI는 로케이터(Locator), 이름(Name) 또는 둘 다 추가로 분류될 수 있다." - rfc 표준 (https://www.ietf.org/rfc/rfc3986.txt) -1.13. URI, URL, and URN

 

 

URL은 Locator, 위치를 나타내는 것이고, URN은 Name, 이름을 나타내는 것이다. 즉, 우리가 웹 브라우저에서 적는 것은 URL이고, 그 Resource에 이름을 부여한게 URN이다. 하지만 URN으로 Resource 식별을 표준화하려는 시도는 있었으나 거의 URL만 사용한다고 보면 된다.

 

URL

https://www.google.com/search?q=hello&hl=ko

 

라는 URL이 있다고 하면 이를 문법화시키면 아래와 같이 나타낼 수 있다.

scheme://[userinfo@]host[:port][/path][?query][#fragment]

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

 

스키마(scheme)는 주로 프로토콜을 사용한다. 프로토콜이란, 어떤 방식으로 자원에 접근할 것인가 하는 약속, 규칙 (ex. http, https, ftp 등) 을 말한다. http는 80 포트, htps는 443 포트를 주로 사용한다. 이때, 포트는 생략이 가능하다. 참고로 https는 http에 보안을 추가한 프로토콜이다. (HTTP Secure)

 

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

호스트(host)에는 보통 도메인명 또는 IP 주소를 직접 사용 가능하다.

포트(port)는 일반적으로 생략한다. 하지만 특정 서버에 따로 접근해야 될 때는 입력하기도 한다.

 

경로(path)는 리소스가 있는 경로이다. 보통 계층적 구조로 이루어져있다. 예를들어 /home/file1.jpg, /members, /members/100 과 같이 상위, 하위 디렉토리 처럼 계층이 나뉘어져있는 구조로 되어있다. 반드시 지켜야하는 규칙은 아니지만, 계층적인 개념으로 설계를 해야 개발하는 입장에서 이해하기 쉽다.

 

쿼리(query)는 key=value 형태로 작성이 되는데, ?로 시작하고 &로 추가가 가능하다.  예를들면 ?keyA=valueA&keyB=valueB..이런식이다. 공식적으로는 쿼리라고 하지만 보통 쿼리 파라미터(query parameter) 또는 쿼리 스트링(query string)이라고 부른다. 이는 웹서버에서 보통 제공하는 파라미터 정보라고해서 파라미터라고 부르고, 숫자를 적어도 다 문자 형태로 넘어가기 때문에 String이라고 부른다.

 

마지막으로 fragment는, html 내부에 있는데 중간으로 이동하고 싶을때가 있는데 이때 fragment가 내부 북마크 역할을 한다. 이는 서버로는 요청이 가지 않고 내부 페이지 이동에서 사용된다.

 

2. 웹 브라우저 요청 흐름

이미지와 함께 순서대로 특정 URL을 검색했을 때 어떤 과정을 거치는지 알아보자.

1. https://www.google.com/search?q=hello&hl=ko 를 브라우저에 검색

2. DNS 서버에 호스트 (google.com) 조회해서 IP 및 PORT 얻어옴

3. 웹 브라우저가 HTTP 요청 메세지 생성

몇가지 부가 정보가 있긴하지만 여기서는 간략하게 표현한다.

 

4. Socket 라이브러리 통해서 애플리케이션 -> OS 계층으로 전달

5. TCP/IP 패킷 생성 (전송 데이터에 아래와 같은 HTTP 메세지를 추가함)

 

6. 패킷 정보가 인터넷으로 흘러들어감 -> 구글 서버에 요청 패킷 도착

 

 

7. 구글 서버에서 TCP/IP 패킷 다 까서 버리고, HTTP 메세지 분석함

query가 hello고.. search로 왔네? 아 뭔가 검색하겠다는 거구나.. q가 hello고, hl이 ko네? 한국어구나..

 

8. 구글 서버에서 응답 메세지를 만듦 (200 OK, Content-Type, Content-Length 등)

 

9. 클라이언트에 응답 패킷 도착

 

10. 응답 메세지를 열어서 웹 브라우저에 HTML 렌더링 

 

 

위 10 단계를 거쳐서 사용자는 주소를 입력하고, 서버에서 받은 응답 데이터로 렌더링된 HTML 을 브라우저로 볼 수 있는 것이다.