웹 브라우저에 URL을 입력하면 일어나는 일

웹 브라우저에 URL을 입력하면 일어나는 일.

우리 일상생활에서 항상 사용하는게 웹 사이트이며, www.naver.com과 같은 도메인을 사용하여 사이트에 접속한다.

과연 우리가 일반적으로 사용하는 주소창에서 주소를 입력하고 엔터키를 치면 무슨일이 일어날까?

AWS 한국 블로그를 읽어보면서 알아보자.

 

기초 지식

웹 브라우저에 URL(https://channy.creation.net/blog)을  입력하고 Enter 키를 누르게 되면,

브라우저는 인터넷에서 사이트를 호스팅하는 서버를 파악해야한다.

이는 channy.creation.net 도메인을 검색하여 주소를 찾는다.

서버나 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 IP주소라는 고유한 주소가 있다.

IP주소에는 3.34.220.186와 같은 4개의 매겨진 부분이 있다.

대신 IP의 고유한 주소는 기억하기가 어렵기 때문에 channy.creation.net 도메인 이름 시스템(DNS)를 이용해 서버의 IP주소를 찾을 수 있다.

 

간단히 정리하면 channy.creation.net 이라는 DNS로 IP를 찾을수 있다. 

 

---

전체 과정

1.    웹 브라우저에 URL을 입력하고 Enter 키 입력

https://channy.creation.net/blog

이 URL에는 정보가 담겨져 있다. 세분화 해서 보면

 

통신 규약(Protocol)

 

https:// 는 통신 프로토콜 이다. HTTPS는 HyperText Transper Protocol Secure를 나타낸다.

이 스키마는 브라우저에 전송 계층 보안(TLS)를 사용하여 서버에 연결하도록 지시한다.

TLS는 인터넷을 통한 통신을 보호하는 암호화 프로토콜이다.

HTTPS를 사용하면 암호나 신용 카드 정보와 같이 브라우저와 서버 간에 교환되는 데이터가 암호화된다.

ftp://, mailto://, file:// 도 같은 개념이다.

 

 

도메인 (Domain)

 

channy.creation.net는 웹 사이트의 도메인 이름이다.

기억하기 쉬운 주소이며 특정 서버의 IP 주소를 가리킨다.

 

경로 (Path)

 

 URL에 리소스에 대한 추가 경로가 있는 경우가 있다.

예를 들어  https://channy.creation.net/blog/hello-world 의 경우 blog 는 서버에서 요청된 리소스인 hello-wrold로 이어지는 경로이다.

이를 컴퓨터에 있는 파일의 디렉터리 구조나 기타 디렉터리처럼 생각할 수 있다.

정적 HTML, CSS, Javascript, 이미지 파일, 동적으로 생성된 콘텐츠에 상관없이 리소스를 구성하는 방법이다.

 

리소스 (Resource)

 

 이 URL을 브라우저에 입력하면 hello-world 는 보려는 웹 사이트의 리소스 이름이다.

때로는 .html 과 같은 파일 확장자로 볼 수 있는데, 이는 HTML 콘텐츠가 있는 서버의 정적 파일임을 나타낸다.

이 URL과 같은 확장자가 없으면 일반적으로 서버가 이 콘텐츠를 생성했음을 나타낸다.

 

2.    웹 브라우저가 도메인 명의 IP 주소 조회

브라우저에 URL을 입력하고 Enter 키를 누른 후 브라우저는 인터넷에서 연결 할 서버를 파악한다.

이렇게 하려면 입력한 도메인을 사용하여 웹 사이트를 호스팅하는 서버의 IP 주소를 조회해야한다.

DNS 조회를 사용하여 이 작업을 수행한다.

 

DNS는 복잡하고 매우 빨라야 하기 때문에 DNS데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷의 다양한 위치에 임시로 저장된다.

이를 캐시라고 부르며 웹 브라우저는 고유한 캐시, 운영체제 캐시, 라우터의 로컬 네트워크 캐시, 회사 네트워크 또는 인터넷 서비스 제공업체(ISP) DNS 서버 캐시를 확인합니다.

 

만약 웹 브라우저가 캐시 계층에서 IP 주소를 찾지 못하는 경우 회사 네트워크 또는 ISP의 DNS 서버가 재귀적 DNS 조회를 수행한다.

재귀적 DNS 조회는 인터넷에 있는 여러 DNS 서버를 요청하며, 검색될 때까지 DNS 레코드에 대해 더 많은 DNS 서버에 요청한다.

 

3.    웹 브라우저가 서버와의 TCP 연결 시작

 

인터넷에 연결된 웹 브라우저 요청 패킷은 일반적으로 TCP/IP (Transmission Control Protocol/Internet Protocol)이라 하는 전송 제어 프로토콜을 사용하여 라우터 장비, 인터넷 서비스 제공 회사 교환기를 통해 이동해, 통신 회사간 경로인 라우팅 테이블을 따라 연결할 IP 주소가 있는 웹 서버를 찾는다

 

웹 브라우저가 인터넷에서 서버를 찾으면 웹 서버와 TCP 연결을 설정하고, HTTP를 통해 평문 통신을 시작한다. HTTPS를 사용할 경우 주고받는 데이터의 암호화를 위한 TLS (Transport Layer Security) 핸드셰이크라는 추가 과정을 수행한다.

 

 

4.    웹 브라우저가 HTTP 요청을 서버로 전송

 

웹 브라우저가 서버에 연결되면, HTTP(S) 프로토콜에 대한 통신 규칙을 따른다.

웹 브라우저가 페이지의 콘텐츠를 요청하기 위해 서버에 HTTP 요청을 전송하는 것으로 시작한다.

HTTP 요청에는 요청 라인, 헤더(또는 요청에 대한 메타데이터) 및 본문이 포함된다.

요청 라인에는 클라이언트(이 경우 브라우저)가 수행하려는 작업을 서버가 결정하는 데 사용할 수 있는 정보가 포함되어 있다.

 

요청 라인에는 다음이 포함된다.

  -  GET, POST, PUT, PATCH, DELETE 또는 몇 가지 다른 HTTP 동사 중 하나인 요청 메서드

  -  요청된 리소스를 가리키는 경로

  -  통신할 HTTP 버전

 

URL 요청에 대한 요청 라인은 다음과 같다.

GET /blog/1620 HTTP/1.1

요청 라인은 서버에 /blog/1620 에서 리소스를 가져오고 HTTP/1.1 과 통신하기를 원한다고 알린다.

HTTP 동사는 요청의 의미 의도를 표현한다.

POST, PUT 또는PATCH 메서드를 사용하여 요청 경로에서 새 데이터를 생성하거나 기존 데이터를 업데이트 하기 위해 저장할 서버로 데이터를 전송할 수도 있다.

DELETE 메서드는 지정된 경로에서 리소스를 삭제한다.

그러나 서버가 모든 동사를 지원할 필요는 없다.

 

요청 헤더(Request Header)

 

요청 헤더(Request Header)는 요청을 라우팅하는 데 도움이 되는 추가 정보를 클라이언트에서 전달하고, 어떤 유형의 클라이언트가 요청을 수행하는지 나타내며, A/B 테스트, 블루/그린 배포 및 카나리 배포를 지원하는데 사용할 수 있다. 헤더는 다음과 같은 키 값 페어이다.

 

Host: channy.creation.net
User-Agent: curl/7.64.1
Accept: */*

 

요청의 마지막 부분은 본문이다. 본문은 GET 요청에 대해 비어있다. POST, PUT 또는 PATCH와 같은 리소스를 조작하는 요청의 경우 본문에는 생성하거나 업데이트할 클라이언트의 데이터가 포함된다. 요청 본문은 서로 다른 형식일 수 있으며, 서버는 요청 헤더인 Content-Type을 기반으로 형식을 이해한다.

 

다음은 요청 라인과 헤더가 있는 URL에 대한 전체 요청의 예이다.  (GET 이므로 본문이 없다)

 

 

GET /blog/1620 HTTP/1.1
Host: channy.creation.net
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0(Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: <https://channy.creation.net/>
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
dnt: 1
sec-gpc: 1

 

웹 서버가 클라이언트로부터 요청을 받으면 서버는 요청을 처리하고 응답을 다시 전송한다.

 

5.  웹 서버가 요청을 처리하고 응답을 다시 전송

웹 서버는 요청을 받고 요청 라인, 헤더 및 본문의 정보를 기반으로 요청 처리 방법을 결정한다.

GET /blog/1620 HTTP/1.1 요청에 대해 서버는 이 경로의 콘텐츠를 가져오고 응답을 생성하여 클라이언트로 다시 전송한다. 응답에는 다음이 포함된다.

  -  클라이언트에게 요청 상태를 알려주는 상태 라인

  -  브라우저에 응답 처리 방법을 알려주는 응답 헤더

  -  해당 경로에서 요청된 리소스 (HTML, CSS, Javascript, 이미지 파일과 같은 콘텐츠 또는 데이터)

상태 라인에는 HTTP 버전과 요청 상태의 숫자 및 텍스트 표현이 모두 포함된다.

 

응답은 다음과 같다.

 

HTTP/1.1 200 OK
Date: Tue, 25 May 2021 19:40:59 GMT
Server: Apache
X-Frame-Options: SAMEORIGIN
X-Powered-By: Express
Cache-Control: max-age=0, no-cache
Content-Type: text/html; charset=utf-8
Vary: Accept-Encoding
X-Mod-Pagespeed: 1.13.35.2-0
Content-Encoding: br
Keep-Alive: timeout=1, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked

<!DOCTYPE html>
<html lang="ko">
<head>
    나머지 HTML 항목

웹 브라우저는 200의 상태 코드를 성공한 것으로 간주, 응답은 200이므로 브라우저는 응답을 렌더링하는 것을 알고 있다.

 

전송 받은 리소스는 텍스트(예 : index.html ) 또는 텍스트가 아닌 데이터 (예 : logo.img )의 정적 파일일 수 있다. 웹 브라우저가 항상 정적 파일을 요청하는 것은 아니다. 대부분 웹 서버가 동적 리소스를 생성하여 코드 조각이나 템플릿에서 HTML을 구축하고 동적 데이터와 결합하여 응답으로 텍스트로 다시 전송하여, 웹 브라우저가 페이지를 렌더링할 수 있다.

 

 

6.    웹 브라우저가 콘텐츠 렌더링

 

웹 브라우저가 서버로부터 응답을 받고, 응답 헤더를 검사하여 리소스를 렌더링 하는 방법은 우선, Content-Type 헤더는 브라우저에 응답 본문에서 HTML 리소스를 수신했음을 알린다. 다행히 브라우저는 HTML로 무엇을 해야하는지 알고 있다.

 

첫 번째 GET 요청은 페이지 구조인 HTML 구조를 반환한다. 그러나 웹 브라우저의 개발 도구를 사용하여 페이지의 HTML을 검사하면 다른 Javascript, CSS, 이미지 리소스를 참조하고 웹 페이지를 설계된 대로 렌더링하기 위해 추가 데이터를 요청하는 것을 볼 수 있다.

 

브라우저가 HTML을 파싱하고 렌더링할 때 Javascript, CSS, 이미지 및 데이터를 가져오라는 추가 요청을 하고 있다. 이 중 많은 부분을 병렬로 수행할 수 있지만 항상 그런 것은 아니다.

 

 

이미지출처 -AWS 한국 블로그

여기서 HTML은 CSS나 JS 파일 리소스를 참조하는 것을 볼 수 있다. 웹 브라우저는 페이지에 스타일을 지정하기 위해 이 CSS 리소스를 가져오도록 서버에 후속 요청을 한다. CSS 리소스에 요청에 대한 Content-Type 헤더는 브라우저에 CSS를 렌더링하도록 지시한다.

 

만약, 웹 브라우저가 이미지 리소스를 요청하면 Content-Type 헤더가 브라우저에 텍스트가 아닌 데이터임을 알려주고 그에 따라 렌더링 하도록 지시한다. 웹 브라우저의 렌더링 과정은 큰 기술 주제이다.

 

 

순서 요약

1.    웹 브라우저에 URL을 입력하고 Enter 키를 입력함

2.    웹 브라우저가 도메인의 IP 주소를 조회함 (먼저 캐시 => DNS를 검색)

3.    웹 브라우저가 찾은 IP 주소를 기반으로 서버와의 TCP 연결을 시작

4.    웹 브라우저가 HTTP 요청을 서버로 전송함 (필요한 경우 HTTPS 보안 통신이 진행됨)

5.    웹 서버가 요청을 처리하고 응답을 다시 웹 브라우저로 전송

6.    웹 브라우저가 전송 받은 콘텐츠를 렌더링 함.

 

나의 생각

 

그냥 넘어갔던 데이터들에 대한 내용을 더 심도있게 공부 할 수있었고, 브라우저에 대한 더 깊은 이해를 할 수있는 블로그 주제였다. 한 두번 보고는 내용을 알기 어려운 부분이 많지만 두고두고 보며, 잘 익혀야겠다. 

 

이를 통해 공부할 부분이 더욱 많아졌다. 더 열심해서 심도있는 개발자가 되야겠다!

 

 

 

 

출처

https://aws.amazon.com/ko/blogs/korea/what-happens-when-you-type-a-url-into-your-browser/

[aws 한국블로그]