웹페이지를 개발하다 보면 DOM(Document Object Model)이 자주 등장한다. DOM은 단순히 HTML 문서를 보여주는 것이 아니라, 웹 문서를 프로그래밍적으로 접근하고 조작할 수 있는 트리 구조의 모델이다. 브라우저는 HTML과 CSS를 파싱해 DOM과 CSSOM을 생성하고, 이를 결합해 렌더 트리를 만들기 때문에 DOM을 이해하는 것은 웹 개발의 핵심이다. 1. DOM 이란?DOM은 웹 문서의 구조화된 표현을 제공하며, HTML이나 XML 문서의 모든 요소, 속성, 텍스트를 노드로 나타낸다. 트리 구조를 가지고 있어 각 요소는 부모와 자식 관계를 갖고, 개발자는 이를 통해 특정 노드에 접근하거나 조작할 수 있다.예를 들어 자바스크립트를 사용하면 페이지의 내용을 동적으로 변경할 수 있다.d..

브라우저는 단순히 HTML 파일을 보여주는 도구가 아니다.네트워크, 렌더링 엔진, 자바스크립트 엔진이 유기적으로 협력해 웹페이지를 보이는 형태로 만드는 복잡한 시스템이다. 1. 브라우저의 렌더링 프로세스웹페이지가 화면에 표시되기까지의 과정은 다음과 같다. 1. 리소스 요청과 응답브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 이 과정은 주소창에서 시작된다. 브라우저의 주소창에 URL을 입력하고 엔터를 누르면, URL의 호스트 이름이 DNS를 통해 IP 주소로 변환되고, 이 IP 주소를 가진 서버로 요청이 전송된다.2. HTML, CSS 파싱과 렌더 트리(Render Tree) 생성렌더링 엔진은 서버로부터 받은 HTML과 CSS를 ..

웹 개발을 하다 보면 “브라우저가 내부적으로 어떻게 동작하는가?” 또는 “데이터는 어디에 저장되는가?” 같은 궁금증이 생긴다. 이번 글에서는 브라우저의 주요 구조와, 클라이언트 측 데이터 저장소인 LocalStorage와 SessionStorage의 차이를 정리해본다. 1. 브라우저의 주요 구조브라우저는 크게 7가지 핵심 구성 요소로 이루어져 있다.사용자 인터페이스 (User Interface) - 화면에 페이지를 표시하는 영역을 제외한 나머지 부분이다. 주소창, 뒤로가기/앞으로가기 버튼, 북마크, 새로고침 등을 포함한다.브라우저 엔진 (Browser Engine) - 사용자 인터페이스와 렌더링 엔진 사이에서 명령을 중재하고 흐름을 제어한다.렌더링 엔진 (Rendering Engine) - HTML, C..