물속의 백조같은 웹, 톺아보기
우리가 웹 서핑을 할 때 어떤 처리가 뒤에서 이루어지는 걸까?
뭔지는 모르겠지만 URL 주소가 자꾸 바뀌네? 저게 이 웹 화면을 매핑해주는 거구나 생각하고 말았을 것이다.
어떤 원리로 우리가 웹 서핑을 할 수 있는지 알아보자. 먼저, URL에 어떤 정보가 담겨있어서 웹 화면을 매핑해줄 수 있는 것인지 부터 알아볼 것이다.
1. URI
URL은 URI에 포함되는 식별자(Identifier)이다.
URI는 리소스를 식별하는 정보를 총칭한다. 데이터베이스에서는 Primary Key가, 사람들에게는 주민 번호가 있듯이 해당 리소스 자체를 식별하는 도구라고 보면 좋다. 이런 URI는 로케이터(Locator)나 이름(Name), 또는 두 가지 모두로 추가 분류될 수 있다.
URL은 리소스의 위치를 나타내고 URN은 리소스 그 자체의 이름이다.
URI는 이 둘을 포함하는 가장 큰 개념.
URN만으로는 리소스에 접근할 수 있는 방법이 보편화 되어있지 않아서 URL만 사용한다고 생각해도 좋다.
2. URL의 구조
1
scheme://[userinfo@]host[:port][/path][?query][#fragment]
URL은 위와 같은 구조를 갖는다. 위치마다 자리하는 요소들이 정해져 있다. 요소들이 어떤 것들인지는 아래와 같다.
2-1. scheme
주로 프로토콜이 사용된다. 프로토콜이란 어떤 방식으로 자원에 접근할 것인지 정해놓은 규칙이다.
scheme에 사용되는 예시로 http, https, ftp를 들 수 있다. 이 중 http는 80 포트, https는 443포트를 주로 사용하며 생략 가능하다.
https는 http에 보안사용을 추가한 것(HTTP Secure)으로 오늘날까지 사용되고 있다.
2-2. userinfo
URL에 사용자정보를 포함해서 인증할 때 사용한다. 하지만 거의 사용하지 않는다.
2-3. host
호스트명으로 도메인명 또는 IP주소를 직접 입력할 수 있다.
2-4. PORT
접속 포트로 일반적으로 생략가능하며, 생략시 http는 80, https는 443이다.
2-5. path
리소스가 있는 경로인데, 보통 계층적 구조로 되어있다. 예시는 아래와 같다.
- /home/file1.jpg
- /members
- /members/100, /item/iphone12
2-6. query
key=value 형태를 가지며 ?로 시작하고 &로 추가가 가능하다(예시, ?keyA=valueA&keyB=valueB).
웹서버에 제공하는 파라미터로 문자형태로 query parameter, query string등으로 불린다.
2-7. fragment
html 내부 북마크 등에 사용한다. 서버에 전송하는 정보는 아니다.
이 웹 페이지의 fragment이다.
클릭하면 해당 내용의 위치로 화면을 옮겨준다.
3. 웹 브라우저 통신 흐름
이제 https://google.com/search?q=hello&hl=ko라는 URL이 웹 브라우저에 넘어오면 어떻게 통신이 진행되는지 알아보자.
먼저, scheme가 https이니까 생략된 포트번호(443)를 찾고 DNS 서버에서 www.google.com의 IP 주소를 찾는다. 그리고 HTTP 요청 메세지를 생성한다. 생성된 메세지는 아래처럼 생겼을 것이다.
그리고 SOCKET 라이브러리로 OS의 TCP/IP 계층에 연결을 시도한다. 이 과정에서 IP 와 PORT 정보로 SYN, SYN+ACK, ACK 주고 받으며 연결이 되면, 데이터를 전달한다.
전달 받은 TCP/IP 에서 IP 포트 정보와 HTTP 메세지를 포함한 패킷을 생성한다.
서버는 패킷이 도착하면 패킷의 내부 HTTP 메서드를 해석해서 정보에 맞는 동작을 한다.
hello라는 것을 검색하려고 하고 한국어로 정보를 보려고 하는 걸 해석하고 요청에 맞게 응답메세지를 생성한다.
클라이언트에서는 응답메세지를 받아 렌더링을 한다.
과정을 살펴보면서 URL 말고도 많은 것들이 웹 통신에 필요하다는 것을 확인할 수 있다.
관련 글은 여기에서
- HTTP에 대해 궁금하다면, HTTP는 뭘까를 참고해보자.
참고자료
- 모두의 네트워크
- 모든 개발자를 위한 HTTP 웹 기본 지식