Don’t worry about failures

Reflow, Repaint 그리고 Reflow, Repaint생략을 이해하기에 앞서 선행되어야 하는 개념이 있다. critical rendering path에 대한 개념이다. 이는 이전에 내용을 다뤘기에 생략하도록 한다. (https://sangwonny.tistory.com/7?category=948510) critical rendering path = > DOM + CSSOM => Render Tree => Layout => Paint => Composite Reflow CSSOM, render tree, layout, paint 과정을 다시 그려줌 강제로 Reflow가 발생하는 현상들의 원인 1. 화면 리사이징 : 브라우 창의 크기를 조정하거나 모바일 기기의 화면 회전과 같이 뷰포트 크기가 변경되..

react 들어가기 전에,, React의 이해 중 기본은 Virtual DOM의 이해다. 1. DOM 2. Virtual DOM DOM Virtual DOM을 이해하기 전에 DOM에 대해 살펴보고 들어가겠다. DOM ( Document Object Model ) : 객체지향모델로써 구조화된 문서를 표현하는 형식. XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법(API)을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현. DOM의 종류 1. Core DOM: 모든 문서 타입을 위한 DOM 모델 2. HTML DOM: HTML 문서를 위한 DOM 모델 3. XML DOM: X..