12. 브라우저의 작동방식에 대해서 설명해주세요.
HTML 읽고 뭐 파싱하고 막 그런 거 질문인가요..?
-
사용자의 입력: 사용자가 브라우저의 주소창에 URL(Uniform Resource Locator)을 입력하거나, 링크를 클릭하면 그 웹 페이지에 접근하려는 요청이 시작됩니다.
-
DNS 조회: 입력된 URL이 사람에게는 읽기 쉽지만 컴퓨터가 이해할 수 있도록 브라우저는 DNS(Domain Name System)를 통해 URL을 IP 주소로 변환합니다. 예를 들어, "example.com"이란 URL을 컴퓨터가 연결할 수 있는 IP 주소(예: 192.0.2.1)로 변환합니다.
-
HTTP/HTTPS 요청: 브라우저는 IP 주소가 확인되면 웹 서버에 HTTP(혹은 HTTPS) 요청을 보냅니다. 이 요청은 "GET" 요청으로 해당 웹 페이지의 데이터를 받아오라는 의미입니다. HTTPS는 보안이 강화된 프로토콜로, 데이터를 암호화하여 안전한 통신을 보장합니다.
-
서버 응답: 웹 서버는 브라우저의 요청을 받으면 해당 페이지의 HTML 파일과 필요한 리소스(이미지, CSS, JavaScript 파일 등)를 브라우저에게 전달합니다. 이러한 데이터는 패킷이라는 작은 데이터 조각들로 전달되며, 브라우저가 이를 받아 하나의 페이지로 결합합니다.
-
렌더링 엔진: 브라우저는 받은 HTML 문서와 스타일(CSS) 및 JavaScript 파일을 기반으로 페이지를 렌더링합니다. HTML은 페이지의 구조와 콘텐츠를 정의하고, CSS는 그 콘텐츠의 스타일을 설정하며, JavaScript는 페이지에 상호작용 기능을 추가합니다.
-
DOM(Document Object Model) 구성: HTML 파일을 기반으로 브라우저는 DOM 트리를 만듭니다. DOM은 웹 페이지의 구조를 계층적으로 표현한 트리 구조로, 각 HTML 요소를 노드로 나타냅니다. 이를 통해 JavaScript는 페이지를 동적으로 변경할 수 있습니다.
-
CSSOM (CSS Object Model) 생성: 브라우저는 CSS 파일을 처리하여 CSSOM이라는 구조를 만듭니다. 이는 HTML 요소들이 어떻게 스타일링되어야 하는지 정의한 객체 모델입니다.
-
JavaScript 실행: 브라우저는 JavaScript 파일을 다운로드하고 실행합니다. 이 스크립트는 DOM을 조작하거나 사용자 입력에 반응하는 기능을 합니다. JavaScript는 페이지 로드가 완료된 후에도 계속해서 실행될 수 있습니다.
-
레이아웃 및 그리기: DOM과 CSSOM을 결합하여 브라우저는 페이지의 레이아웃을 계산하고, 이를 화면에 그립니다. 이 과정을 레이아웃과 페인팅이라고 합니다.
-
사용자 상호작용 처리: 페이지가 표시되면, 브라우저는 마우스 클릭, 키보드 입력 등의 사용자 상호작용을 처리하고, 필요시 JavaScript가 페이지의 요소들을 동적으로 변경합니다.
