📚 URL의 이해와 웹 브라우저에서의 Request 처리 과정
일상적인 웹 서핑에서 우리는 URL을 직접 입력하는 일이 드물지만, 웹의 작동 원리를 이해하는 데에는 URL의 개념은 핵심적으로 갖추고 있어야 한다.
이에, 오늘은 URL의 중요성과 웹 브라우저에서 URL을 통한 Request 처리 과정에 대해 알아보고자 한다.
URL의 이해
📌 URL이란
URL은 Uniform Resource Locator의 약자로, 쉽게 말해 웹에 존재하는 수많은 데이터들 중 특정 데이터를 나타내는 문자열이다.
URL의 역할로, URL은 웹상의 자원을 찾기 위한 주소 역할을 한다.
📌 URL의 구성 요소
일반적으로 URL은 크게 호스트와 패스 그리고 쿼리 부분으로 이루어져 있다.
ex> www.google.com/shirts?color=blue&size=m
-
호스트(Host): 웹 서버의 주소를 나타냅니다. Host를 통해 전 세계 서버들 중 하나의 서버를 특정할 수 있게 된다. 예를 들어 www.google.com이 호스트이다.
-
패스(Path): 서버 내의 있는 데이터 중 원하는 데이터를 특정하여, 서버 안에 존재하는 데이터를 나타낸다. 예를 들어 /shirts가 패스이다.
-
쿼리(Query): 원하는 데이터에 관해서 좀 더 세부적인 요구 사항이 있는 경우 추가적인 정보를 제공한다. 쿼리는 하나의 속성 이름에 등호와 값이 써 있고, 각각의 속성은 &로 이어서 나타내도록 되어있다. 예를 들어 ?color=blue&size=m이 쿼리이다.
📌 URL 입력과 웹 브라우저의 역할
대부분의 경우, 사용자는 웹 브라우저의 주소창에 호스트 이름만 입력하고, 나머지는 웹 페이지 내의 링크를 통해 이동한다.
예를 들어, <a href="https://www.example.com/blog">블로그</a>와 같은 HTML 링크 태그는 사용자에게 표시되는 텍스트 또는 이미지에 URL을 연결하여, 클릭 한 번으로 해당 URL로 이동할 수 있도록 한다.
웹 브라우저에서의 Request 처리 과정
📌 웹 리퀘스트의 처리 과정
웹 브라우저에서 URL을 입력하고 엔터를 치는 순간, 다음과 같은 과정이 순차적으로 발생하게 된다.
-
도메인 이름 해석: 브라우저는 호스트(도메인 이름)를 IP 주소로 변환한다. 이 과정을 도메인 이름 해석(Domain Name Resolution)이라고 한다.
-
리퀘스트 전송: 해석된 IP 주소에 해당하는 서버로 HTTP 리퀘스트를 보낸다. 이때 URL의 패스와 쿼리가 리퀘스트에 포함된다.
-
서버의 처리: 서버는 받은 리퀘스트를 해석하고, 요청된 자원을 찾아 Response에 담아 보낸다.
-
리스폰스의 표시: 브라우저는 Response를 받아 사용자에게 보여준다. 이 때, HTML, CSS, JavaScript 등의 내용이 있으면 해당 내용을 렌더링하여 화면에 표시한다.
📌 웹 페이지 로딩 시 발생하는 다수의 Request & Response
웹 페이지를 로딩할 때, 사용자는 단 하나의 Request를 보내고 하나의 Response를 받는 것처럼 느껴질 수 있지만, 실제로는 여러 개의 Request와 Response가 오고 간다.
이는 크롬의 개발자 도구를 열고 Network 탭을 확인해보면 쉽게 이해할 수 있다.
1. 첫 번째 Request와 리스폰스
첫 번째 Request는 사용자가 입력한 URL에 대한 것이다. 이 Request의 Response로, 서버는 HTML 문서를 보내준다. 하지만 이 HTML 문서만으로는 페이지를 완전히 표시할 수 없다.
2. 추가 Request의 필요성
HTML 문서 내에는 추가 리소스를 로드해야 하는 링크들이 포함되어 있다. 예를 들어, 이미지, CSS 파일, JavaScript 파일 등이 이에 해당한다. 이 때, 이러한 리소스들은 각각 별도의 Request를 필요로 한다.
아래 예시처럼, HTML 문서 안에 있는 각 img 태그나 script 태그는 해당 리소스를 불러오기 위한 별도의 Request를 발생시킨다.
<img src="https://www.server_A.com/a/b/exmaple.png".../>
<script src="http://www.server_B.com/c/d/main.js"></script>따라서, 하나의 웹 페이지를 완전히 로드하기 위해서는 첫 번째 HTML 문서 뿐만 아니라, 추가적인 리소스들을 요청하는 다수의 Request와 그에 따른 Response가 필요하게 되는 것이다.
이 과정에서 발생하는 모든 Request와 Response는 개발자 도구의 Network 탭에서 확인 가능하니, 개발자 도구를 적절히 활용해 Request & Response의 흐름에 대해 파악해보자.
Outro
이번 학습을 통해 URL과 웹 브라우저의 상호작용에 대한 깊은 이해를 할 수 있었다. 특히, 개발자로서는 URL의 구조뿐만 아니라, 리퀘스트와 리스폰스의 처리 과정을 이해하는 것이 중요하다는 사실을 느낄 수 있었다.
URL에 대한 학습을 통해 웹의 리소스에 접근하고, 웹 브라우저가 이를 어떻게 처리하는지 알 수 있었고, 이를 통해 웹 페이지의 로딩 과정이나 성능 개선에 있어 보다 깊이 있는 접근에 한 걸음 더 다가선 느낌이 든다. 깨달은 지식을 바탕으로, 앞으로의 웹 개발 또는 웹 사용 과정에서 개발자 도구를 자주 이용하며, 더 나은 학습경험을 이어나가보자.
