# rendering

50개의 포스트
post-thumbnail

About Browser rendering & DOM

브라우저는 HTML, CSS, 자바스크립트, Image, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 요청을 받는다.브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리를 생성한다.

2022년 1월 11일
·
0개의 댓글
post-thumbnail

[Flutter] 이 코드.. 어떻게 픽셀로 옮겨질까? 렌더링 원리 - 3. 페인팅

플러터의 렌더링은 크게 3단계로 나뉜다. 레이아웃(Layout)-페인트(Paint)-컴포지션(Composition) 순서대로 렌더링이 이루어지는데, 이전 글에서는 레이아웃 단계를 다뤘다. 이번에는 페인팅 단계를 살펴보자.

2022년 1월 3일
·
0개의 댓글
post-thumbnail

[React] Data Fetching & 조건부 랜더링

위 코드는 가상API로부터 유저 목록을 받아오는 코드다. 데이터 호출은 side Effect에 해당하므로 useEffect안에서 사용해야 한다. 컴포넌트의 랜더링 과정을 차례로 보면 랜더링과 useEffect hook 사이의 관계를 봐야한다.1.App 컴포넌트가 랜더

2021년 12월 7일
·
0개의 댓글
post-thumbnail

[React] useEffect

🚶🏻‍♂️ Rendering in React React에서 함수 컴포넌트의 rendering이란, state, props를 기반으로 UI요소를 그려내는 행위를 말한다. 랜더링의 결과물은 UI요소 즉, 화면에 JSX문법으로 무엇이 나타날지를 적어둔 컴포넌트들이라고

2021년 12월 7일
·
0개의 댓글
post-thumbnail

[Flutter] 이 코드.. 화면에 어떻게 그려질까? 렌더링 원리 - 1. 트리

GetX에서 onInit과 onReady의 차이가 대체 뭘까? 1프레임 뒤에 실행된다는게 대체 무슨 의미지? ... 에 대한 답을 찾기 위해 플러터 내부 렌더링 원리까지 가버린 후기.

2021년 12월 5일
·
0개의 댓글
post-thumbnail

브라우저의 렌더링

사용자 인터페이스 : 주소 표시줄, 이전-다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 모든 부분.

2021년 10월 29일
·
0개의 댓글
post-thumbnail

TIL 12

브라우저 렌더링 과정에 대하여

2021년 10월 27일
·
0개의 댓글
post-thumbnail

🎠브라우저 렌더링 과정

브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱(해석)해서 브라우저에 렌더링할까?프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 실행하기 위해서,텍스트 문서의 문자열을 토큰으로 분해하고,토큰에 문법적 의미와 구조를 반영하여 트리구조의 자

2021년 10월 24일
·
0개의 댓글
post-thumbnail

[React JS] Rendering이 뭘까

Render란 정확히 무엇인가?(이전)Render란 state에 따라 화면에 그리는 거야!(useLayoutEffect를 본 후) useLayoutEffect는 동기적으로 실행되고 해당 작업이 끝나야 Browser가 screen에 그린다? 그러면 HTML, CSS, J

2021년 10월 21일
·
0개의 댓글

⛏ state 선언 위치에 따른 rendering 차이

너무도 당연한 얘기를 실험과 함께 정리해보고자 한다.솔직히 React를 쓰면서, 'state가 바뀌면, re-rendering이 됩니다!' 정도만 알고 코딩했던 것 같다. 하지만 그런 와중에도'rendering이 적게 일어나게 하려면 state를 어떤 식으로 나눠야 할

2021년 10월 19일
·
0개의 댓글
post-thumbnail

[React] 렌더링 최적화를 통한 useState와 useReducer 이해

React 렌더링 최적화를 통해서 useState를 어떻게 사용하는 것이 좋은지와, useReducer의 존재 이유를 알아보자.

2021년 10월 10일
·
0개의 댓글
post-thumbnail

useCallback

useCallback은 콜백 함수를 기억해야 할때 쓰입니다.위에 코드를 간단하게 보면 App컴포넌트는 ChildComponent와 DummyComponent를 자식 컴포넌트로 가지고 있고 ChildComponent에게는 콜백함수 와 state를 전달해주고 DummyCo

2021년 10월 8일
·
0개의 댓글

vue 랜더링 무한루프

vue 페이지가 랜더링 되는 중에 랜더링에 사용된 데이터를 수정하는 극악무도한 짓을 하면 안됩니다. 그걸 어떻게 아냐구요? 안녕하세요 극악무도한 놈입니다.

2021년 10월 5일
·
0개의 댓글
post-thumbnail

[필수지식] 브라우저 렌더링 과정

렌더링: HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말함

2021년 9월 19일
·
0개의 댓글

TIL. 43 CSR, SSR

💡 SPA (Single Page Application) 말 그대로 하나의 페이지로 이루어진 웹 애플리케이션으로, 서버에서 최초에만 페이지를 받아온 후 이후에는 동적으로 구성해 새로운 페이지를 받아오지 않는다.(데이터를 수정, 조회할 때 새로 고침되지 않음) 쉽게 말해, 처음 불러왔던 페이지의 내용만 변경하는 방식이고, 페이지 이동간 서버에 요청을 하지...

2021년 9월 17일
·
0개의 댓글

브라우저 렌더링 과정 이해하기

브라우저는 텍스트로 이루어진 HTML, CSS, Javascript 파일을 읽고 웹 페이지를 그려냅니다. 이 과정을 이해하기 위해서는 먼저 파싱(parsing)과 렌더링(rendering)이라는 단어가 무엇인지 알아야 합니다. (다음의 이해와 해석은 보다 쉬운 언어로

2021년 9월 15일
·
0개의 댓글
post-thumbnail

[FE 지식] 브라우저의 렌더링 과정

브라우저의 렌더링 과정에 대해 알아보자.

2021년 9월 9일
·
0개의 댓글
post-thumbnail

[React] 불필요한 렌더링 줄이기

component props에 고정 객체 넘겨줄 경우, 객체를 컴포넌트 밖으로 빼내 상수 변수로 관리하자why? 객체 자체를 넘겨주게 되면 객체이 내용이 변경되지 않아도 렌더링 될때마다 새로 객체를 생성하기 때문component props에 연산에 따라 객체가 변할 수

2021년 8월 27일
·
0개의 댓글