기술 면접 준비 - 웹 브라우저 작동 방식

 

웹 브라우저에 url을 치면 어떤 일이 일어날까?

 

 

• (step1) 사용자가 브라우저에 URL을 입력한다.

       예: https://www.lfmall.co.kr/menu/301

-> https:// 은 통신 프로토콜이다. hypertext transfer protocol ssecure를 나타냅니다. 브라우저에 전송 계층 보안(TLS)을 사용하여 서버에 연결하도록 지시한다. TLS는 인터넷을 통한 통신을 보호하는 암호화 프로토콜이다. https를 사용하면 암호나 신용카드 정보와 같이 브라우저와 서버 간에 교환되는 데이터가 암호화 된다. 

-> www.lfmall.co.kr은 웹 사이트의 도메인 이름이다. 특정 서버의 IP주소를 가리키며, DNS(Domain Name System)에 의해 머신이 읽을 수 있는 IP주소로 변환된다.

-> /menu 는 서버에 요청된 리소스인 301로 이어지는 경로이다. 

-> 301 은 보려는 웹 사이트의 리소스 이름이다. 

• (step2) 웹 브라우저가 사용자가 입력한 URL의 도메인명의 IP 주소를 조회한다.

-> DNS는 복잡하고 매우 빨라야 하기 때문에 DNS 데이터는 웹 브라우저 사이의 서로 다른 계층과 인터넷의 다양한 위치에 임시로 저장된다. 이를 캐시라고 한다. 웹 브라우저는 고유한 캐시, 운영 체제 캐시, 라우터의 로컬 네트워크 캐시, 회사 네트워크 또는 인터넷 서비스 제공업체의 DNS 서버 캐시를 확인한다. 캐시 계층에서 IP 주소를 찾을 수 없는 경우 인터넷 서비스 제공 업체의 DNS 서버가 재귀적 DNS 조회를 수행한다. 인터넷의 여러 DNS 서버를 검색이 될 때까지 요청한다. 

• (step3) 웹 브라우저가 서버와의 TCP 연결을 시작한다.

-> 인터넷에 연결된 웹 브라우저 요청 패킷은 일반적으로 TCP/IP라고 하는 전송 제어 프로토콜을 사용하여 라우터 장비, 인터넷 서비스 제공사의 교환기를 통해 이동되어 라우팅 테이블을 따라서 연결할 IP주소가 있는 웹서버를 찾는다. 웹서버에 직접 도달하는 방법이 효과적이지 않는 경우 콘텐츠 전송 네트워크(CDN)를 사용하여 정적 콘텐츠를 웹 브라우저 가까이에 위치 시킨다. 

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

• (step4) 웹 브라우저가 HTTP 요청을 서버로 전송한다.

-> 웹 브라우저가 서버에 연결되면 HTTP(s) 프로토콜에 대한 통신 규칙을 따른다. 웹 브라우저가 페이지의 콘텐츠를 요청하기 위해 서버에   HTTP 요청을 전송하는 것으로 시작한다. HTTP 요청에는 요청 라인, 헤더 및 본문이 포함된다. 

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

    - GET, POST, PUT, PATCH, DELETE 또는 몇 가지 다른 요청 메서드

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

    - 통신할 HTTP 버전

    예) GET /blog/1620 HTTP/1.1    (/blog/1620 에서 리소스를 가져오고 HTTP/1.1과 통신하기 원한다.)

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

    예) Host: www.lfmall.co.kr   

          User-Agent: curl/7.64.1

          Accept: */*

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

• (step5) 웹 서버가 요청을 처리하고 응답을 다시 전송한다. 

-> 웹 서버는 요청을 받고 요청 라인, 헤더, 본문의 정보를 기반으로 요청 처리 방법을 결정한다. 응답에는 다음이 포함된다.

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

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

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

• (step6) 웹 브라우저가 콘텐츠를 렌더링 한다. 

 

 

 

 

[요약]

웹브라우저에서 URL을 입력하고 엔터를 치면,

1. 웹 브라우저가 도메인의 IP 주소를 조회합니다. 이 때 먼저 캐시를 찾고 그 다음 DNS를 검색합니다.

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

3. 웹 브라우저가 HTTP(s) 요청을 서버로 전송합니다.

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

5. 웹 브라우저가 전송 받은 콘텐츠를 렌더링 합니다. 

 

 

 

 

예) www.naver.com  호출 시

[헤더]

요청 URL: https://www.naver.com/ 

요청 메서드: GET

상태 코드: 200

원격 주소: 223.130.200.107:443

리퍼럴 정책: strict-origin-when-cross-origin

 

[응답헤더]

ache-control: no-cache, no-store, must-revalidate

content-encoding: gzip

content-type:text/html; charset=UTF-8

date:Wed, 22 Feb 2023 14:34:20 GMT

p3p:CP="CAO DSP CURa ADMa TAIa PSAa OUR LAW STP PHY ONL UNI PUR FIN COM NAV INT DEM STA PRE"

pragma:no-cache

referrer-policy:unsafe-url

server:NWS

set-cookie:PM_CK_loc=6743a4c95faa1feef9d5b43cb00efab853fad291be2c4f5135ad83ce7b0cf421; Expires=Thu, 23 Feb 2023 14:34:20 GMT; Path=/; HttpOnly

strict-transport-security:max-age=63072000; includeSubdomains

x-frame-options:DENY

x-xss-protection:1; mode=block

 

[요청 헤더]

hority:www.naver.com

:method:GET

:path:/

:scheme:https

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.7

accept-encoding:gzip, deflate, br

accept-language:ko,en-US;q=0.9,en;q=0.8,ko-KR;q=0.7,zh-CN;q=0.6,zh;q=0.5,ja-JP;q=0.4,ja;q=0.3

cookie:NNB=UHZ64MAREWSWA; ASID=de6f2c0c0000017ab83f779600000053; _ga_7VKFYR6RV1=GS1.1.1646551391.2.0.1646551391.60; MM_NEW=1; NFS=2; _tt_enable_cookie=1; _ttp=0eb53e2f-00bb-4331-920c-adfb9e847761; _ga_4BKHBFKFK0=GS1.1.1668430927.2.0.1668430927.60.0.0; _ga=GA1.2.1429387459.1629120798; _ga_8P4PY65YZ2=GS1.1.1674532796.1.1.1674532853.0.0.0; LOCALE=ko_KR

sec-ch-ua:"Chromium";v="110", "Not A(Brand";v="24", "Google Chrome";v="110"

sec-ch-ua-mobile:?0

sec-ch-ua-platform:"macOS"

sec-fetch-dest:document

sec-fetch-mode:navigate

sec-fetch-site:none

sec-fetch-user:?1

upgrade-insecure-requests:1

user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36