렌더링이란 HTML, CSS JS 파일을 수신하고 파싱하여 결과물을 화면에 그려내는 과정을 말한다. 자세한 단계는 브라우저 동작 원리 글에서 다룬 적이 있는데, 바로 이 렌더링이 발생하는 주체(시점)에 따라 SSR과 CSR이 구분된다. SSR (Server-side Rendering) 사용자가 서버에 페이지를 요청하면, 서버 측에서 HTML문서 내의 내용들을 렌더링 준비를 끝마친 상태(Ready to Render)로 클라이언트에 전달하는 방식을 말한다. 클라이언트에 전달되는 순간 HTML은 즉시 렌더링되며, 자바스크립트가 읽히기 전이기 때문에 사이트 자체는 조작할 수 없는 상태가 된다. (just-viewable) 이후에 클라이언트가 자바스크립트 파일을 수신하고, 리액트 등의 프레임워크를 통해 컴파일을 ..
네이버 D2의 브라우저는 어떻게 동작하는가? 와 Mdn web docs의 글을 학습한 후 정리한 글입니다. 브라우저의 주 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 렌더링하는 것이다. 보통 HTML 문서이며, PDF나 이미지 형태의 파일도 표현할 수 있다. 브라우저는 주소 표시줄, 이전/다음 페이지 등으로 이루어진 사용자 인터페이스 (프레임이라 생각해도 될 듯), 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 브라우저 엔진, 요청한 콘텐츠를 뷰포트에 출력하는 렌더링 엔진, 백엔드에서 실행되는 통신, 이를 위한 백엔드 UI, 자바스크립트 해석기, 자원 저장소로 구성된다. 브라우저의 전반적인 동작 흐름은 탐색 > 응답 > 파싱 > 렌더로 이루어진다. 1. 탐색 1-1. DNS 조회 웹..
What, exactly, is the DOM?과 해당 원문의 번역본을 학습한 후 정리한 글입니다. 웹 페이지가 만들어지는 방법 원본 HTML 문서를 읽어들인 후, 스타일을 입혀 뷰 포트에 표시하는 과정을 Critical Rendering Path라고 한다. 이 과정은 크게 두 단계로 나뉘어 진다. 첫 번째로 읽어들인 문자를 파싱하여 어떤 내용을 렌더링할지 결정하며, 두 번째로 브라우저에서 렌더링을 수행한다. 첫 번째 단계를 통해 렌더 트리가 생성되는데, 이는 HTML 요소(DOM)와 관련 스타일 요소(CSSOM)로 구성된다. DOM이란 DOM(Document Object Model)은 웹 페이지에 대한 인터페이스로, HTML 문서의 구조와 내용을 다양한 프로그램에서 사용할 수 있게 한 객체 기반 표현이..
