# 렌더링
CS | 브라우저 렌더링
브라우저(Browser)인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램이다.Google Chrome, Apple Safari, Microsoft Edge, Naver Whale 등이 있고 각자 고유의 렌더링 엔진을 가지고 있다
브라우저의 렌더링 과정
브라우저란?사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이 때 자원은 HTML 문서, PDF, 이미지 등 다양한 형태를 띌 수 있다.자원의 주소는 URL에 의해 정해진다.렌더링이란?서버로부터 HTML, CSS, JavaScript 등 작성한 파일을 받아
브라우저 렌더링 과정
서버로 부터 HTML,CSS를 다운받아 렌더링 엔진에 의해 HTML,CSS 문서를 파싱하고 노드로 변환하여 각 노드 별로 트리구조인 Object Model를 만든다. HTML은 DOM(Document Object Model)을 CSS는 CSSOM(CSS Object M
브라우저 렌더링과 최적화
DOMDocument Object Model웹 브라우저와 자바스크립트가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체HTML 파일을 다운로드한 뒤 HTML parser가 구문 분석과정을 거쳐 DOM 트리를 생성한다. CSSOMDOM에 CSS가 적용된 객체
Techniques for dealing with REACT_JSX
페이스북 👩🏻💻 아이디어 : '어떤 데이터가 변할 때마다 어떠한 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링을 하자' → 애플리케이션구조가 매우 간단하고, 작성해야할 코드 양도 많이 줄어듬 → 하지만, 웹브라우저에서 이
웹 브라우저의 렌더링(Rendering) 알아보기
사용자가 입력한(원하는) 웹페이지, 이미지, 동영상 등의 자원을 서버에게 요청서버로부터 전달(응답) 받은 자원을 화면에 출력웹 브라우저에는 두 개의 엔진이 있다.렌더링 엔진사용자가 볼 화면을 그려내는 역할 (내용 정보인 HTML과 서식정보인 CSS 등을 읽어들여 사람이
리액트 Virtual DOM과 Real DOM / TIL#17
1. Vritual DOM(가상 DOM)의 필요성 2. Vritual DOM(가상 DOM)의 작동 방식
📆 23.02.16 - NextJS 에서 발생되는 useEffect 의 불필요한 렌더링 줄이기
react에서 useEffect를 사용하여 해당 컴포넌트가 렌더링 될 때, 필요한 함수를 즉각 실행하게 된다. 대개로 데이터를 받아와 활용할 때 사용하는 경우가 많다.최근 NextJS 프로젝트를 진행하면서 해당 부분을 직면하게 되면서 기존 react에서 처리하던 방법과
React | useMemo(), useCallback(), + React.memo()
useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나!useMemo에서 Memo는 Memoization을 뜻한다.\* memoization ? 메모이제이션 ? : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값
리액트 Batching / TIL#14
배칭이란, 성능 개선을 목적으로 하는 리액트의 동작하는 방식이다. 실행되는 함수 내에 상태(state)를 업데이트하는 modifier 함수가 여러 개 존재한다면 개별로 렌더링이 일어나지 않고 합쳐서 렌더링이 일어난다.
리액트 Batching / TIL#14
배칭이란, 성능 개선을 목적으로 하는 리액트의 동작하는 방식이다. 실행되는 함수 내에 상태(state)를 업데이트하는 modifier 함수가 여러 개 존재한다면 개별로 렌더링이 일어나지 않고 합쳐서 렌더링이 일어난다.
브라우저 렌더링 과정
브라우저 브라우저란 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 설명할 수 있다. 브라우저는 유저가 선택한 이미지, 비디오 등의 다양한 컨텐츠 요소를 서버로 부터 받아와서 렌더링 과정을 통해 유저에
React 정리: 렌더링, CSR, SPA, Virtual DOM
FE개발을 위한 자바스크립트 오픈소스 라이브러리html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면
