# 렌더링

16개의 포스트
post-thumbnail

웹 최적화

프런트 엔드 성능 로딩 최적화 1. 브라우저 기준 최적화의 문제점 Navigation Timing processing && load 이 두 이벤트를 앞 단기고 빨리 하는데 목표가 있다. domContentLoadedEvent(processing) - 브라우저가 ht

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

렌더링(Rendering)

렌더링이란 HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말합니다. 즉, 클라이언트(사용자)에서 서버로부터 여러 파일을 받아 브라우저에 나타나는 과정을 말합니다.렌더링을 이해하기 위해 브라우저의 구조를 살펴보

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

SSR & CSR

: Server Side Rendering요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다.웹의 초기 부터 SPA에 대한 구현체들이 나오기 전까지 전통적인 웹사이트들은 모두 SSR형태로 서비스해 왔다.👍 서버사이드 렌더링(SSR)의 장점

2021년 1월 25일
·
0개의 댓글

TIL // 2020.01.07

컴포넌트 렌더링에 이어서\~~두 개의 신규 컴포넌트 생성1) PhoneInfo : 각 전화번호 정보를 보여줌info 객체를 props로 받아와서 렌더링해줌info값을 전달해주지 못할 경우 컴포넌트가 crash로 에러 발생함info가 undefined일 때는 비구조화 할

2021년 1월 7일
·
0개의 댓글

React 성능 최적화

리액트에서 불필요한 렌더링을 최소화하여 성능을 최적화할 수 있습니다. 성능 최적화를 시도해보면서 공부해보겠습니다.

2020년 12월 27일
·
0개의 댓글

브라우저 렌더링 과정

브라우저가 HTML,CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링을 할까? 일단 파싱이란건 무엇일까? 파싱은 프로그래밍 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해 > 토큰은 문법적

2020년 12월 14일
·
0개의 댓글
post-thumbnail

브라우저 렌더링 과정

렌더링 엔진렌더링 엔진의 역할을 요청 받은 내용을 브라우저 화면에 표시하는 일이다.렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있다. 물론 플러그인이나 브라우저 확장 기능을 이용해 PDF와 다른 유형도 표시할 수 있다. 렌더링 엔진들파이어폭스와 크롬,

2020년 11월 29일
·
0개의 댓글
post-thumbnail

[React] 3. 엘리먼트 렌더링

HTML의 태그라고 생각하면 된다.React 엘리먼트는 일반 객체이며 쉽게 생성이 가능하다.React 엘리먼트는 불변객체이다.(엘리먼트를 생성 후 해당 엘리먼트 자식이나 속성을 변경 할 수 없다.)

2020년 11월 24일
·
0개의 댓글
post-thumbnail

[React] Start to React

> What is React? **"사용자 인터페이스를 만들기 위한 JavaScript 라이브러리" ** 공부를 하다보면 리액트를 라이브러리로 봐야하는가 프레임워크를 봐야하는지의 논의가 자주 등장한다. 나의 생각을 말

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

브라우저의 렌더링 과정

HTML ,CSS 다운 > HTML -> DOM > CSS -> CSSOM > DOM + CSSOM = Render Tree > Layout > Paint

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

React스터디_LifeCycle

클래스형 컴포넌트에서만 사용이 가능한 라이프사이클 메서드는 컴포넌트를 처음으로 렌더링할 때, 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 때 사용합니다.

2020년 8월 25일
·
0개의 댓글
post-thumbnail

계층구조와 DOM Tree

\*계층이란?컴퓨터 과학에서 계층화는 메시지 전송을 별도의 구성 요소와 활동으로 구분하는 것을 의미한다. 계층화는 어떤 순차적, 계층적 방식으로 상호작용하는 별개의 기능적 요소들로 프로그래밍의 조직이다. 쉽게 해석한다면 별개의 기능을 가진 요소들로 분활하는 기준점이 계

2020년 8월 20일
·
0개의 댓글
post-thumbnail

SSR(Server-side-rendering) & CSR(Client-side-rendering)

웹페이지 접속시, 그 페이지를 브라우저에 그려주는 것.모바일의 시대가 도래하면서, 모바일은 데스크탑에 비해 성능이 낮고 유저의 모바일 웹에서의 동작 및 요청이 많아 웹페이지를 기존에 방식과 다르게 렌더링할 필요가 느껴지면서 등장한 클라이언트 사이드 렌더링 Single

2020년 8월 12일
·
0개의 댓글
post-thumbnail

React 렌더링을 잡자 🙈🙉

리액트에서 렌더링 된 컴포넌트가 다시 렌더링되는 경우는 다음과 같다.컴포넌트의 state가 변할 때컴포넌트의 props가 변할 때자신이 속한 상위 컴포넌트가 다시 렌더링되는 경우이와같은 특성 때문에 필요하지 않은 경우에도 컴포넌트가 다시 렌더링되어 성능을 떨어뜨릴 수도

2020년 6월 21일
·
0개의 댓글

Vue 렌더링 성능 개선하기

Vue 성능 개선하기 함수형 컴포넌트(Functional Component) 사용하기 함수형 컴포넌트는 Dumb(멍청한, 바보같은) 컴포넌트 또는 Stateless (상태 없는) 컴포넌트로 불리며,data와 lifecycle을 가지지 않은 컴포넌트를 지칭합니다. 기

2019년 9월 2일
·
2개의 댓글
post-thumbnail

[주니어탈출기] 서버사이드렌더링(SSR) & 클라이언트사이드렌더링(CSR)

서버사이드렌더링 & 클라이언트사이드렌더링 왜 모바일의 시대에 등장한 클라이언트사이드렌더링 Single Page Application(SPA)! 고려해야할 점들이 있다. SPA는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미한다. 렌더링 방식 SPA는 클라이언트사이드렌더링방식 이다. 기본적으로 페이지 로드가 없...

2019년 2월 27일
·
2개의 댓글