브라우저 URL 입력에서 화면 출력까지

URL 구조

https://www.naver.com:443/

• 먼저, https:// 또는 http://와 같이 어떤 프로토콜을 사용하여 URL을 요청할 것인지 정한다.
• www.naver.com은 도메인 네임으로 네트워크상에서 컴퓨터를 식별하는 호스트명을 가리킨다.
• :443 요청을 보낼 포트 번호를 의미한다. 포트 번호를 생략해서 요청한다면 브라우저는 기본값을 이용해 요청한다. http(80), https(443)

브라우저는 입력받은 URL을 위와 같은 구조로 파악하고 파싱한다.

HSTS(HTTP Strict Transport Security)

웹 사이트에 접속할 때, 강제적으로 HTTPS Protocol로만 접속하게 하는 기능이다. 즉, 보안 강화를 위해 브라우저에게 HTTPS 사용을 강제한다.

보통 웹 사이트에 접속할 때, 해당 사이트가 HTTPS를 지원하는 지 제대로 알지 못한다.

사용자가 프로토콜을 명시하지 않고 도메인으로만 URL을 요청했을 때는 다음의 과정이 이루어진다.

1. www.naver.com URL 입력
2. 브라우저가 HTTP 프로토콜을 사용해서 해당 도메인에 접속을 시도한다.
3. 해당 도메인이 HTTP 프로토콜을 지원하지 않고 HTTPS만 지원한다면 301 또는 302 Status code를 전송한다.
4. 브라우저는 HTTP 프로토콜이 사용 불가한 것을 인지 후 HTTPS 프로토콜로 접속한다.

URL → IP 주소로

IP(Internet Protocol address)
컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다.

URL주소를 IP 주소로 변환해야 통신을 할 수 있다.

1. 브라우저에서 자신의 로컬 host 파일과 브라우저 캐시에 해당 URL의 정보가 있는지 먼저 확인한다.

hosts 파일이란?
호스트 이름에 대응하는 IP 주소가 저장되어 있어서 도메인 이름 시스템(DNS)에서 주소 정보를 제공받지 않고도 서버의 위치를 찾게 해주는 파일.

2. URL 정보가 없다면 DNS서버에 요청하여 해당 URL을 IP 주소로 변환한다.

• DNS 동작 원리

서버 요청!

• DNS 서버에게 IP 주소를 받았으니 해당 서버에 Request를 보내야 한다.
• 라우터를 통해 IP 주소까지 가는 길을 알게 된다.
• 라우팅 테이블을 통해 요청이 해당 서버까지의 경로를 지정해줘서 IP 주소에 요청을 보낼 수 있게 된다.

IP 주소 → MAC 주소로

주소 결정 프로토콜(Address Resolution Protocol, ARP)은 네트워크 상에서 IP 주소를 물리적 네트워크 주소로 대응(bind)시키기 위해 사용되는 프로토콜이다

로컬 네트워크에서 단말 간 통신을 하기 위해 IP 주소와 함께 MAC 주소를 이용한다. IP 주소를 MAC 주소와 매칭하여 목적지 IP의 MAC 주소를 갖고 있는 단말을 제대로 찾기 위해서 사용한다.

• 해당 네트워크 내에서 ARP를 브로드 캐스팅하면 일치하는 IP주소를 갖고 잇는 단말이 자신의 MAC 주소로 응답함으로서 우리가 필요한 MAC 주소를 알려준다.

TCP 연결

해당 IP의 서버까지 도달했으니 통신하기 위해 TCP 소켓 연결을 실행한다.

3-way / 4-way Handshake

HTTPS 프로토콜로 요청 및 응답 수신

• 전송(Transport Layer)계층의 TCP 연결이 정상적으로 끝나게 되면 데이터를 송수신할 수 있다.
• 우리가 요청한 URL에 대한 데이터를 서버에 요청하면 그에 대한 응답을 보내준다.

Response 분석

• 우리가 요청한 URL에 대한 응답은 보통 정적 파일(html, css, js, image...)로 받게 된다.
• 브라우저는 정적 파일들을 해석해서 브라우저의 화면에 그리기 시작한다.

DOM이란?

Document Object Model(문서 객체 모델)

• HTML 태그들에 대해서 자바스크립트로 활용할 수 있는 객체로 변환한다.
• 즉, DOM은 웹 브라우저가 html페이지를 인식하는 방식이다. (Tree 구조)

파싱(parsing)

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것.

• 어휘 분석 과 구문 분석 의 과정을 거쳐서 파싱 트리 를 구축함.
  • 어휘 분석 - Tokenizer, Lexer, 구문 분석 - Parser
• 파싱 트리 가 도출 됐다고 해서 끝이 아니다. 컴파일의 과정일 뿐 이후에 기계 코드 문서로 변환하는 과정이 있다.
• 파서를 생성하는 문법이나 규칙이 까다롭기 때문에 파서 생성기를 많이 사용한다. 파서 생성기는 일부 태그가 빠지더라도 자동으로 태그를 추가하며 오류를 수정해준다.

크롬에서 사용하는 웹킷 엔진!

렌더링

렌더링 엔진이 요청 받은 내용을 브라우저 화면에 출력함.

1. 브라우저에 특정 URL을 입력하면 서버에서 html, css, image 등의 static 파일들을 전송한다.
2. 파싱을 통해 HTML 문서를 파싱 트리 로 변환한다.
3. 파싱 트리 와 CSS 파일 등과 함께 렌더 트리 를 구축한다.
4. UI 백엔드에서 렌더 트리 를 탐색하며 화면에 그려간다. 서버로부터 전송받은 내용을 순차적으로 브라우저 화면에 출력한다. 때문에 화면이 점진적으로 출력된다.