DOM2 리액트 왜 씀? ❓리액트란...Facebook에서 개발한 JavaScript 기반의 오픈소스 라이브러✨특징가상 DOM과 동기화되어 변경 사항을 효율적으로 감지하고 업데이트한다.재사용 가능한 컴포넌트를 이용해 UI를 구성한다.데이터 흐름이 단방향으로 이루어진다.JSX 문법을 사용해 코드 가독성을 높인다.리액트를 배우기 앞서서 알아야 할 것.❓DOMDocument Object Model의 약자. -> 문서 객체 모델DOM은 HTML 문서를 파싱해서 문서의 객체 모델을 생성한다.[브라우저 렌더링 과정]HTML 파싱:HTML 문서를 파싱하여 DOM 트리를 생성CSS 파싱:CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성렌더 트리 구성:DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성레이아웃:렌.. 2024. 5. 27. 웹페이지가 렌더링되는 과정 ✨웹 페이지 렌더링 과정HTML 파싱 및 DOM 트리 생성브라우저는 수신한 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.(DOM 트리는 HTML 문서의 구조를 나타내는 트리 구조)CSS 파싱 및 CSSOM 트리 생성브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.(CSSOM 트리는 CSS 규칙과 속성을 나타내는 트리 구조)렌더 트리 생성브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.(렌더 트리는 실제로 화면에 표시될 요소들의 구조)레이아웃 계산브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.페인팅브라우저는 레이아웃 정보를 바탕으로 실제 화면에 요소들을 그린다. 2024. 5. 23. 이전 1 다음
