반응형 파싱2 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스 ⭕ 웹 구조 Web | 브라우저 렌더링 : CRP 프로세스브라우저는 웹 페이지를 화면에 표시할 때, 렌더링 엔진들은 HTML, CSS, JavaScript 파일을 처리하며 CRP 프로세스를 따릅니다.렌더링 엔진크롬(Chrome): Blink 엔진사파리(Safari): Webkit 엔진파이어폭스(Firefox): Gecko 엔진 ➡️ CRP (Critical Rendering Path) ➡️ DOM(Document Object Model) 트리 생성HTML 파싱 후, DOM 트리를 생성합니다.파싱웹 페이지나 앱이 실행될 때, 브라우저의 자바스크립트 엔진 같은 런타임 환경이 이해할 수 있는 형태로 코드를 변환하는 과정을 말합니다.웹 문서를 작은 조각들인 '토큰(token)'으로 분리하고, 문법적인 구조를 가.. 2024. 5. 14. 리액트 React | DOM(Document Object Model) ⭕ 리액트 React | DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하고 제어할 수 있는 API, 프로퍼티, 메서드를 제공하는 트리 자료구조 구성 요소: 노드(Node), 객체(Object) ➡️ 프레임워크 및 라이브러리 발전 동기: 애플리케이션 규모 확장에 따라 API 통신 데이터 업데이트, 이벤트 및 상태(state) 조작 필요성 증가 기존 방식의 한계: document.getElementById() 같은 DOM API로 HTML을 직접 조작하는 방식은 불편하고 비효율적 예시: Angular, React, Vue, Svelte 역할: 브라우저 DOM 조작을 프레임워크 및 라이브러리에 위임 ➡️ DOM 등장 배경 서버에서 HTML 동적 생성을 가능하게 하는.. 2024. 3. 9. 이전 1 다음 반응형
