본문 바로가기

Render2

[모던 리액트 Deep Dive] 4장. 서버 사이드 렌더링 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [4장] 서버 사이드 렌더링4.1 서버 사이트 렌더링이란?✨싱글 페이지 애플리케이션의 세상📍싱글페이지 애플리케이션이란렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전.. 2024. 7. 10.
웹페이지가 렌더링되는 과정 ✨웹 페이지 렌더링 과정HTML 파싱 및 DOM 트리 생성브라우저는 수신한 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.(DOM 트리는 HTML 문서의 구조를 나타내는 트리 구조)CSS 파싱 및 CSSOM 트리 생성브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.(CSSOM 트리는 CSS 규칙과 속성을 나타내는 트리 구조)렌더 트리 생성브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.(렌더 트리는 실제로 화면에 표시될 요소들의 구조)레이아웃 계산브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.페인팅브라우저는 레이아웃 정보를 바탕으로 실제 화면에 요소들을 그린다. 2024. 5. 23.