본문 바로가기

rendering

(3)

SPA란? SSR vs CSR 차이점 🔗 SPA(Single Page Application)란? 기존 어플리케이션은 화면 이동 시 화면에 필요한 HTML을 서버로부터 받아서 처음부터 다시 로딩하기 때문에 속도가 느리다. 반면 SPA는 최초 한 번 페이지 전체를 로딩한 후 이후부터는 일부 데이터만 변경하여 화면을 구성하기 때문에 속도가 빠르다. SPA 프레임워크로는 React, Vue, Angular 등이 있다. 📌 SSR(Server Side Rendering) vs CSR(Client Side Rendering) ▪ SSR ① 서버 - 브라우저에게 HTML 응답 ② 브라우저 - 브라우저 렌더링 -> 페이지 보여짐 ③ 브라우저 - JS 다운 ④ 브라우저 - 리액트 실행 ⑤ 페이지 상호작용 가능 ▪ CSR ① 서버 - 브라우저에게 응답 ② 브..

[React] DOM(돔)이란? Virtual DOM(가상 돔)이란? 🔗 DOM(돔)이란? 'Document Object Model'. HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법(API)을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 🔗 DOM에 직접 접근할 때의 문제점 DOM에 직접 접근할 경우 뷰에 변화가 있으면 다시 DOM을 변경해야 하기 때문에 브라우저의 잦은 렌더링을 유발하여 효율성이 떨어지게 된다. 🔗 Virtual DOM(가상 돔)이란? 가상 DOM은 실제 DOM의 변화를 최소화 시켜주는 역할을 한다. 뷰에 변화가 있으면, 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 적용시켜 최종 결과만 실제 DOM에 전달한다. 예를 들어 뷰에 20개의..

[HTTP] 브라우저 렌더링 과정 🔗 Browser Rendering(브라우저 렌더링)이란? 사용자의 요청을 서버에 전달하고 그 결과를 화면에 나타내는 과정을 의미한다. 🔗 Parsing(파싱)이란? 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변화하는 것을 의미한다. 🔗 DOM(돔)이란? DOM(돔)이란? Virtual DOM(가상 돔)이란? 🔗 DOM(돔)이란? 'Document Object Model'. HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법(API)을 제공하여 문서 구조, devjindev.tistory.com 🔗 브라우저 렌더링 과정 ① HTML 파서에 HTML 코드가 들어오면, 이것을 파싱하여 DOM 트리를 생성한다. ② C..

이전 1 다음

티스토리툴바