Frontend Developer Roadmap
목차
시작하며
아래는 일반적인 사용자가 크롬 브라우저를 통해 넷플릭스 사이트에 접속하는 과정이다.
중간 중간 모르는 내용들이 있는 것은 당연하지만 인터넷이란 거대한 개념을 한번에 익히려하면 너무 크기에 전반적인 흐름을 파악하고 세부 내용을 들어가는 것이 좋다 생각하여 정리해 보았다.
- DNS 확인
브라우저는 먼저 도메인 이름 시스템(DNS)을 사용하여 도메인 이름(예: www.netflix.com)을 IP 주소로 확인합니다. 이 단계에는 도메인 이름과 연결된 IP 주소를 얻기 위해 DNS 서버를 쿼리하는 작업이 포함됩니다.
- TCP 연결
IP 주소를 얻은 후 브라우저는 해당 주소에서 서버와 TCP 연결을 설정합니다. 이 프로세스에는 클라이언트(브라우저)와 서버 간의 3방향 핸드셰이크(SYN, SYN-ACK, ACK)가 포함되어 안정적인 연결을 설정합니다.
- TLS/SSL 핸드셰이크(HTTPS인 경우)
웹사이트에서 HTTPS를 사용하는 경우 브라우저와 서버는 TLS/SSL 핸드셰이크를 수행하여 안전하고 암호화된 통신 채널을 설정합니다. 이 프로세스에는 클라이언트와 서버 간에 전송되는 데이터의 무결성과 기밀성을 보장하기 위해 암호화 키와 인증서를 교환하는 작업이 포함됩니다.
- HTTP 요청
연결이 설정되면 브라우저는 웹 페이지의 콘텐츠를 요청하는 HTTP 요청을 서버에 보냅니다. 요청에는 일반적으로 브라우저, 요청된 리소스, 쿠키 또는 인증 토큰에 대한 정보가 포함됩니다.
- 서버 응답
서버는 요청을 처리하고 CSS, JavaScript, 이미지 등과 같은 다른 리소스와 함께 웹 페이지의 HTML 콘텐츠가 포함된 HTTP 응답을 다시 보냅니다. 응답에는 콘텐츠 유형에 대한 정보를 제공하는 헤더도 포함됩니다. , 인코딩, 캐싱 및 기타 메타데이터.
- 구문 분석
브라우저는 HTML 콘텐츠를 구문 분석하여 DOM(문서 개체 모델) 트리를 구성하는 동시에 CSS를 구문 분석하여 CSSOM(CSS 개체 모델) 트리를 만듭니다. 이 단계에서 JavaScript 파일을 가져와서 실행할 수도 있습니다.
- 렌더링 트리 구성
브라우저는 DOM 및 CSSOM 트리를 결합하여 시각적 요소와 해당 스타일을 나타내는 렌더링 트리를 만듭니다.
- 레이아웃
브라우저는 렌더링 트리에서 각 요소의 크기와 위치를 계산하여 웹 페이지의 레이아웃을 결정합니다.
- 페인팅
브라우저는 렌더링 트리의 요소를 페인팅하여 레이아웃 정보를 화면의 실제 픽셀로 변환합니다.
- 디스플레이
그린 콘텐츠가 화면에 표시되고 웹 페이지가 사용자에게 표시됩니다.
- 상호 작용
사용자는 클릭, 스크롤, 입력 또는 기타 작업을 수행하여 웹 페이지와 상호 작용합니다. 브라우저는 이러한 상호 작용에 대한 응답으로 표시된 콘텐츠를 업데이트하여 필요에 따라 추가 구문 분석, 레이아웃 및 페인팅 단계를 트리거할 수 있습니다.
- 리소스 언로드
사용자가 웹 페이지에서 벗어나거나 브라우저를 닫으면 브라우저는 메모리, 네트워크 연결 및 DOM 요소와 같은 웹 페이지와 관련된 리소스를 해제합니다.