후회가 없도록

1. 브라우저 렌더링 과정 1) DOM(Document Object Model) tree 생성: 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성. 2) render tree 생성: css 파일과 inline 스타일을 파싱. DOM과 CSSOM을 합친 렌더 트리를 생성. 3) Layout(reflow): 각 노드들의 스크린에서의 좌표에 따라 위치 결정. position이나 size 등도 해당 단계에서 계산. 4) Paint(repaint): 실제 화면에 출력. 위 과정에서 웹 페이지에 어떠한 변화가 발생했을 때, 2번 과정부터 다시 재진행 된다. 즉, 렌더 트리가 재생성 되고 이후의 과정이 다시 반복되며 화면에 UI 재출력이 되는 것이다. 2. Virtual DOM 1) Virtual D..

화면 출력에 특화된 프론트엔드 프레임워크, 리액트 1. 기원 1) 누가 페이스북의 소프트웨어 엔지니어, Jordan Walke 2) 언제 - 2011년 페이스북의 뉴스피드에 첫 적용 - 2012년 인스타그램닷컴에 적용 - 2013년 5월 JSConf US에서 오픈 소스화 3) 어디서 페이스북 및 공동체 4) 왜 리액트를 개발한 Jordan Walke는 PHP용 컴포넌트 프레임워크인 XHP에서 영향을 받았다고 한다. 기존의 자바스크립트는 어떤 속성에 대해 값이 변경될 때, 그 속성에 해당하는 DOM과 요소를 찾은 다음 사용자가 정의한 규칙(함수, 이벤트 등)을 적용한다. 만약 이런 인터랙션이 자주 발생하고, 동적인 UI가 요구되는 상황에서는 이런 규칙이 엄청 많아질 것이고, 개발자는 그런 규칙과 DOM을 ..