브라우저 렌더링에 대한 이해
브라우저 렌더링 방식에대해 포스팅합니다. Google Developer 문서를 보면서 아래 문구가 가장 와다았습니다. 일반적으로 '주요 렌더링 경로 최적화'란 HTML, CSS 및 자바스크립트 간의 종속성 그래프를 이해하고 최적화하는 것을 말합니다. 간단히 설명하자면 HTML을 파싱하여 DOM을 만들고 CSS를 파싱하여 CSSOM을 만듭니다. 그리고 DOM과 CSSOM을 이용하여 Render Tree를 생성합니다. 그리고 생성된 Render Tree를 이용해 화면에 그리기 위해 좌표값을 계산하는 Layout(reflow)과정을 거친 후 Paint과정을 통해 화면게 그려지게 됩니다. HTM => DOM (Document Object Model) CSS => CSSOM (CSS Object Model) 위에..
state, props가 변경시 render함수가 실행되고 새로운 엘리먼트 트리를 반환한다. 이때 두개의 가정을통해 효과적으로 랜더링을 진행한다. 1. 엘리먼트의 타입이 다르다면 기존 엘리먼트를 폐기한다. 랜더링 조건에따라 => 으로 바뀐다면 기존 엘리먼트를 폐기하고 새로 랜더링한다. 이때 OldComponent는 componentWillUnmount()을 실행하고 NewComponent 는 componentWillMount 을 실행한다. 2. 키를통해 새로 랜더링해야할지 판단한다. 재귀적 호출을통해 엘리먼트를 생성할경우 key값을 필수적으로 삽입하야여한다. 그렇지 않을 경우 새로운 엘리먼트가 추가될때 성능상에 좋지 않다. *랜덤값을 사용한다거나 재배열되는 리스트의 인덱스값을 사용할 경우 성능상 좋지않고..
http://cmder.net/ 압축파일을 다운로드 받아 압축해제한다. 해당폴에서 콘솔창을 실행해서 아래 명령어를 실행하면 우클릭 메뉴에 cmder이 추가된다. .\cmder.exe /REGISTER ALL 명령어정리Tab manipulationCtrl + T : New tab dialog (maybe you want to open cmd as admin?)Ctrl + W : Close tabCtrl + D : Close tab (if pressed on empty command)Shift + Alt + #Number : Fast new tab: 1 - CMD, 2 - PowerShellCtrl + Tab : Switch to next tabCtrl + Shift + Tab : Switch to prev..