웹 브라우저에 URL을 입력하고 Enter 키를 누르면 어떤 일이 일어나는 지에 대해 알아보자.
기본 지식
서버 (Server)
웹 사이트는 HTML, CSS, JavaScript, 이미지와 같은 파일들로 구성되어 있으며, 브라우저에 사이트, 이미지 및 데이터를 표시하는 방법을 지정한다.
웹 사이트를 언제 어디서나 접근할 수 있어야 하기 때문에 인터넷에 연결된 외부 컴퓨터가 이러한 파일을 저장하는데, 이것을 서버(Server)라고 한다.
DNS (Domain Name System, 도메인 이름 시스템)
웹 브라우저에서 https://velog.io 와 같은 URL을 가리키면 브라우저는 인터넷에서 사이트를 호스팅하는 서버를 하는데, 이때 DNS에서 velog.io 도메인을 검색하여 주소를 찾는다.
DNS는 URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스로, 웹사이트를 위한 주소록이라고 생각하면 된다.
숫자로 된 IP 주소(ex. 3.34.220.186) 대신 사용자가 사용하기 편리하도록 주소를 매핑해주는 역할을 한다.
TCP/IP (Transmission Control Protocol / Internet Protocol)
TCP/IP는 컴퓨터 사이의 통신 표준 및 네트워크의 라우팅 및 상호연결에 대한 자세한 규칙을 지정하는 통신 규약이다.
TCP/IP를 사용한다는 것은 IP 주소 체계를 따르며 TCP의 특성을 활용해 송신자와 수신자의 논리적 연결을 생성하고 신뢰성을 유지할 수 있도록 하겠다는 의미이다.
전체 과정
1. 웹 브라우저에 URL을 입력하고 Enter 키 입력
URL의 구성 요소
웹 브라우저에 입력하는 URL의 일부를 분류하면 다음과 같다.
예) https://velog.io
통신 규약
https:// 는 통신 프로토콜이다. HTTPS(Hypertext Transfer Protocol Secure)는 브라우저에 전송 계층 보안(TLS)을 사용하여 서버에 연결하도록 지시한다.
TLS는 인터넷을 통한 통신을 보호하는 암호화 프로토콜로, HTTPS를 사용하면 암호나 신용 카드 정보와 같이 브라우저와 서버 간에 교환되는 데이터가 암호화됩니다.
도메인 (Domain)
velog.io는 웹 사이트의 도메인 이름으로 특정 서버의 IP 주소를 가리킨다.
경로 (Path)
URL에 리소스에 대한 추가 경로가 있는 경우가 존재한다. 예를 들어, 이 URL
https://velog.io/python/hello-world 의 경우 python는 서버에서 요청된 리소스인 hello-world로 이어지는 경로이다.
이를 컴퓨터에 있는 파일의 디렉터리 구조나 기타 디렉터리처럼 생각할 수 있는데, 정적 HTML, CSS, Javascript, 이미지 파일, 동적으로 생성된 콘텐츠에 상관없이 리소스를 구성하는 방법이다.
리소스 (Resource)
이 URL을 브라우저에 입력하면 hello-world는 보려는 웹 사이트의 리소스 이다.
때로 .html과 같은 파일 확장자로 볼 수 있는데, 이는 HTML 콘텐츠가 있는 서버의 정적 파일임을 나타낸다. 이 URL과 같은 확장자가 없으면 일반적으로 서버가 이 콘텐츠를 생성했음을 의미한다.
2. 브라우저가 도메인명의 IP 주소 조회
브라우저에 URL을 입력하고 Enter 키를 누르면, 브라우저는 인터넷에서 연결할 서버를 파악해야 한다. 이때 DNS 조회를 통해 입력한 도메인을 사용하여 웹 사이트를 호스팅하는 서버의 IP 주소를 조회한다.
캐시
DNS는 복잡하고 매우 빨라야 하기 때문에 DNS 데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷의 다양한 위치에 임시로 된다. 이를 캐시(Cache)라고 부르는데, 웹 브라우저는 고유한 캐시, 운영 체제 캐시, 라우터의 로컬 네트워크 캐시, 회사 네트워크 또는 인터넷 서비스 제공업체(ISP)의 DNS 서버 캐시를 확인한다.
재귀적 DNS 조회
만약, 웹 브라우저가 캐시 계층에서 IP 주소를 찾을 수 없는 경우 회사 네트워크 또는 ISP의 DNS 서버가 재귀적 DNS 조회를 수행한다.
재귀적 DNS 조회는 인터넷에 있는 여러 DNS 서버를 요청하며, 검색될 때까지 DNS 레코드에 대해 더 많은 DNS 서버에 요청한다. 웹 브라우저가 IP 주소로 DNS 레코드를 가져오면 인터넷에서 서버를 찾아 연결을 설정해야 한다.
DNS Prefetch
특정 웹 브라우저는 사용자가 링크를 따라가기 전에 미리 도메인 네임을 확인하는 DNS 프리페치(Prefetch)라는 기능을 가지고 있다.
웹 페이지 내에 도메인명을 미리 확인되면 사용자가 해당 도메인으로 이동할 때, DNS 확인 시간으로 인한 효과적인 지연이 발생하지 않는다. 예를 들면 검색 결과 페이지와 같이 다양한 도메인명의 링크가 있는 페이지를 보고 있는 경우에 효과적이다.
3. 웹 브라우저가 서버와의 TCP 연결 시작
인터넷에 연결된 웹 브라우저 요청 패킷은 일반적으로 TCP/IP(Transmission Control Protocol/Internet Protocol)라고 하는 전송 제어 프로토콜을 사용하여 라우터 장비, 인터넷 서비스 제공회사 교환기를 통해 이동되어, 통신 회사간 경로인 라우팅 테이블을 따라서 연결할 IP 주소가 있는 웹 서버를 찾는다.
웹 브라우저가 인터넷에서 서버를 찾으면 웹 서버와 TCP 연결을 설정하고, HTTP를 통해 평문 통신(암호화되지 않은 일반적인 텍스트 형태의 메시지를 전송하는 것)을 시작한다. 그러나, HTTPS를 사용하는 경우 주고 받는 데이터의 암호화를 위한 TLS (Transport Layer Security) 핸드셰이크라는 추가 과정을 수행한다.
4. 웹 브라우저가 HTTP 요청을 서버로 전송
웹 브라우저가 서버에 연결되면, HTTP(s) 프로토콜에 대한 통신 규칙을 따르며, 페이지의 콘텐츠를 요청하기 위해 서버에 HTTP 요청을 전송하는 것으로 시작한다.
HTTP 요청(request)에는 요청 라인, 헤더(또는 요청에 대한 메타데이터) 및 본문이 포함된다. 요청 라인에는 클라이언트(이 경우 브라우저)가 수행하려는 작업을 서버가 결정하는 데 사용할 수 있는 정보가 포함되어 있다.
Request-Line
요청 라인에 포함되는 것들은 다음과 같다.
- GET, POST, PUT, PATCH, DELETE 또는 몇 가지 다른 HTTP 동사 중 하나인 요청 메서드
- 요청된 리소스를 가리키는 경로
- 통신할 HTTP 버전
URL 요청에 대한 요청 라인은 다음과 같다.
GET /blog/1620 HTTP/1.1
이 요청 라인은 서버에 /blog/1620에서 리소스를 가져오고 HTTP/1.1과 통신하기를 원한다고 알린다.
Request Header
요청 헤더(Request Header)는 요청을 라우팅하는 데 도움이 되는 추가 정보를 클라이언트에서 전달하고, 어떤 유형의 클라이언트(사용자 에이전트)가 요청을 수행하는지 나타낸다. 헤더는 다음과 같은 키-값 페어로 이루어져 있다.
Host: channy.creation.net
User-Agent: curl/7.64.1
Accept: */*Request Body
요청의 본문은 보통 GET 요청에 대해서는 비어있으며, POST, PUT 또는 PATCH와 같은 리소스를 조작하는 요청의 경우 본문에는 생성하거나 업데이트할 클라이언트의 데이터가 포함된다.
요청 본문은 서로 다른 형식일 수 있으며 서버는 요청 헤더인 Content-Type을 기반으로 형식을 이해한다.
5. 웹 서버가 요청을 처리하고 응답을 전송
웹 서버는 요청을 받고 요청 라인, 헤더 및 본문의 정보를 기반으로 요청 처리 방법을 결정한다.
GET /blog/1620 HTTP/1.1 요청에 대해 서버는 이 경로의 콘텐츠를 가져오고 응답을 생성하여 클라이언트로 다시 전송한다.
응답에 포함되는 것들은 다음과 같다.
- 클라이언트에게 요청 상태를 알려주는 상태 라인
- 브라우저에 응답 처리 방법을 알려주는 응답 헤더
- 해당 경로에서 요청된 리소스 (HTML, CSS, Javascript, 이미지 파일과 같은 콘텐츠 또는 데이터)
상태 라인에는 HTTP 버전과 요청 상태의 숫자 및 텍스트 표현이 모두 포함된다.(예: 200 OK)
<상태 숫자에 따른 의미>
- 1xx ▶️ 정보만 담긴 메세지
- 2xx ▶️ response 성공
- 3xx ▶️ 클라이언트를 다른 URL로 리다이렉트
- 4xx ▶️ 클라이언트 측에서 에러 발생
- 5xx ▶️ 서버 측에서 에러 발생
전송 받은 리소스는 텍스트(예: index.html)나 텍스트가 아닌 데이터(예: logo.img)의 정적 파일일 수도 있다.
대부분 웹 서버가 동적 리소스를 생성하여 코드 조각이나 템플릿에서 HTML을 구축하고, 동적 데이터와 결합하여 응답으로 텍스트를 전송한다.
6. 웹 브라우저가 콘텐츠 렌더링
웹 브라우저가 서버로부터 응답을 받으면 응답 헤더를 검사하여 리소스를 렌더링하는 방법에 대한 정보를 확인한다. HTML 파일일 경우 응답 헤더는 다음의 내용이 포함된다.
Content-Type: text/html; charset=utf-8
이 헤더는 브라우저에 응답 본문에서 HTML 리소스를 수신했음을 알린다.
참고 )
https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/
https://velog.io/@eassy/www.google.com%EC%9D%84-%EC%A3%BC%EC%86%8C%EC%B0%BD%EC%97%90%EC%84%9C-%EC%9E%85%EB%A0%A5%ED%95%98%EB%A9%B4-%EC%9D%BC%EC%96%B4%EB%82%98%EB%8A%94-%EC%9D%BC
