사전캠프 10일차

태그 - 개발

이름 - 웹 브라우저에 URL을 입력하면 어떤 일이 생기나요?

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

아티클을 읽고 글을 작성한다.

a. 아티클 핵심 내용 요약

• 우리가 일상에서 매일 당연하게 쓰고 있는 웹 사이트. 주소창에 URL을 입력하거나 링크를 클릭하여 페이지로 이동할 때 뒷단에 일어나는 일에 대하여 살펴보는 내용입니다. 이를 살펴보는 과정에서 웹 브라우저, PC의 운영 체제, 인터넷 서비스 제공업체, 서버, 서버에서 실행되는 서비스에 대한 지식 등이 필요하지만 이 글에서는 웹 사이트, 서버 및 IP 주소 간의 관계와 그 뒤에 웹 브라우저에서 수행하는 단계를 간략히 살펴보았습니다. 전체 과정별로 파트를 나누어 요약해 보겠습니다.

기본지식

• 먼저 웹 사이트는 HTML, CSS, Javascript 및 이미지와 같은 파일 모음입니다. 언제 어디서나 누구나 엑세스할 수 있어야 하므로 집에서 컴퓨터로 호스팅하는 것은 확장 가능하거나 신뢰할 수 있습니다. 인터넷에 연결된 외부 컴퓨터(서버)가 이러한 파일을 저장합니다. 서버, 휴대폰 등 인터넷의 각 디바이스에는 모두 IP 주소라는 고유한 주소가 있습니다. IP 주소는 3.34.220.186와 같은 4개의 번호가 매겨진 부분이 있는데 숫자로 기억하는 것보다 도메인(channy.creation.net)으로 기억하기가 쉽습니다. 도메인 이름 시스템(DNS)은 도메인 이름을 기반으로 서버의 IP주소를 찾을 수 있습니다. 이제 URL을 입력할 때 웹 브라우저가 웹 서버와 어떻게 통신하는지 순서대로 정리해보겠습니다.

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

• 통신 규약 (Protocol)

  https://channy.creation.net/blog/hello-world - 이 URL의 일부를 분류해보면
  먼저 https:// 는 통신 프로토콜로 브라우저에 전송 계층 보안(TLS)을 사용하여 서버에 연결하도록 지시합니다. 여기서 TLS는 인터넷을 통한 통신을 보호하는 암호화 프로토콜입니다. HTTPS를 사용하면 암호나 신용 카드 정보와 같이 브라우저와 서버 간에 교환되는 데이터가 암호화됩니다.
  

• 도메인 (Domain)

  그 다음 channy.creation.net 은 도메인 이름입니다. 특정 서버의 IP 주소를 가리킵니다.

• 경로 (Path)

  URL에 리소스에 대한 추가 경로가 있는 경우가 있는데 위 URL에서 blog는 서버에서 요청된 리소스인 hello-world 로 이어지는 경로입니다. 이는 컴퓨터에 있는 파일의 디렉터리 구조나 기타 디렉터리처럼 생각할 수 있습니다.

• 리소스 (Resource)

  이 URL을 브라우저에 입력하면 hello-world 는 보려는 웹 사이트의 리소스 이름입니다. 때로 .html 과 같은 파일 확장자로 볼 수 있는데, 이는 HTML 콘텐츠가 있는 서버ㄹ의 정적 파일임을 나타냅니다.

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

• 브라우저에 URL을 입력하고 Enter 키를 누른 후 브라우저는 인터넷에서 연결할 서버를 파악해야 하기 때문에 도메인을 사용하여 웹 사이트를 호스팅하는 서버의 IP 주소를 조회해야 합니다. 이때 DNS 조회를 사용하여 이 작업을 수행하는데 DNS는 복잡하고 매우 빨라야 하기 때문에 DNS 데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷의 다양한 위치에 임시로 저장됩니다. 이를 캐시(Cache) 라고 부릅니다

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

• 인터넷에 연결된 웹 브라우저 요청 패킷은 일반적으로 TCP/IP(Transmission Control Protocol/Internet Protocol) 라고 하는 전송 제어 프로토콜을 사용하여 연결할 IP 주소가 있는 웹 서버를 찾습니다. 하지만 요즘은 웹 사이트에서 직접 서버에 연결하기 보단 콘텐츠 전송 네트워크(CDN)를 사용하여 콘텐츠를 웹 브라우저 가까이에 위치 시킵니다. CDN은 콘테츠를 사용자에게 더 가까이 제공하여 사이트의 원본 연결 성능을 개선하는 캐싱 서버의 글로벌 분산 네트워크입니다.

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

• 웹 브라우저가 서버에 연결되면 웹 브라우저가 페이지의 콘텐츠를 요청하기 위해 서버에 HTTP 요청을 전송하는 것으로 시작합니다. HTTP 요청에는 요청 라인, 요청 헤더, 본문이 포함됩니다.
  웹 서버가 클라이언트로부터 요청을 받으면 서버는 요청을 처리하고 응답을 다시 전송합니다.

  • 요청라인

    • GET, POST, PUT, PATCH, DELETE 또는 몇 가지 다른 HTTP 동사 중 하나인 요청 메서드
    • 요청된 리소스를 가리키는 경로
    • 통신할 HTTP 버전

  • 요청 헤더(Request Header)
    : 헤더는 요청을 라우팅하는 데 도움이 되는 추가 정보를 클라이언트에서 전달하고 클라이언트가 요청을 수행하는지 나타내며 A/B 테스트, 블루/그린 배포 및 카나리 배포를 지원하는 데 사용할 수 있습니다.

  • 본문
    : 본문은 보통 GET 요청에 대해 비어 있으며 POST, PUT 또는 PATCH와 같은 리소스를 조작하는 요청의 경우 본문에는 생성하거나 업데이트할 클라이언트의 데이터가 포함됩니다.

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

(GET 요청으로 본문이 없는 요청 라인과 헤더만 있는 URL에 대한 전체요청의 예)

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

• 웹 서버는 요청을 받고 요청 라인, 헤더 및 본문의 정보를 기반으로 요청 처리 방법을 결정합니다. 요청에 대해 서버는 경로의 콘텐츠를 가져오고 응답을 생성하여 다시 클라이언트로 전송합니다. 응답에는 다음과 같은 내용이 포함됩니다.

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

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

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

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 항목

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

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

• 웹 브라우저가 서버로부터 응답을 받으면 응답 헤더를 검사하여 리소스를 렌더링하는 방법에 대한 정보를 확인합니다. 그 후 Content - Type 헤더는 브라우저에 응답 본문에서 HTML 리소소를 수신했음을 알립니다. 첫 번째 GET 요청은 페이지의 구조인 HTML을 반환하지만 웹 브라우저의 개발 도구를 사용하여 페이지의 HTML을 검사하면 다른 Javascript, CSS, 이미지 리소스를 참조하고 웹 페이지를 설계된 대로 렌더링하기 위해 추가 데이터를 요청합니다.

b. 해당 아티클을 읽고 얻은 인사이트 or 알게 된 개념을 1~3가지 정도 작성하여 마무리

• 항상 들어가던 URL과 링크를 누르면 뒤에서 이런 복잡한 과정이 일어난다는 것이 신기했고 HTTPS를 사용하면 암호나 신용 카드 정보와 같이 브라우저와 서버 간의 데이터가 암호화 된다는 것을 처음 알게되었다.

• 도메인 (Domain)은 항상 들어봤던 명칭이었지만 뜻과 역할을 사실 오늘 처음 알게되었는데 웹 사이트의 주소이기도 하면서 특정 서버의 IP 주소를 가리킨다는 것은 새로 알게 된 개념이었다. 그리고 도메인을 사용하여 웹 사이트를 호스팅하는 서버의 IP 주소를 조회하며 이때 DNS 조회를 사용하여 작업을 수행한다는 것도 처음 알게 되었다. DNS 데이터가 다양한 위치에 임시로 저장되는 것이 캐시 (Cache)라고 불리는 것도!

• 웹 브라우저에서 HTTP 요청을 서버로 전송하고 서버가 요청을 처리하고 응답을 다시 전송하는 피드백과 같은 형태로 정보가 교환되면서 웹 브라우저에 접속할 수 있다는게...(우리는 URL을 적거나 링크만 클릭하면 되는데) 세상 참 편해진 것이구나 하면서 느껴보았다. 나도 실생활을 편하게 만들어 갈 수 있는 그런 개발자가 되어야겠다!