Frontend Basic
Browser Rendering
HTML을 파싱하여 DOM tree를, CSS를 파싱하여 CSSOM tree를 만들고 이 둘을 조합해 Render tree를 만든다. 이를 배치하고 그리는 과정이 바로 이전 포스트에서 다룬 Reflow와 Repaint이다.
ReadReflow와 Repaint
수정된 Render tree를 다시 렌더링하는 과정에서 발생한다. Reflow는 위치와 크기를 계산, Repaint는 시각적인 요소를 표현하는 과정이다. 당연히 필요한 과정이지만 효율적으로 컨트롤하지 못하면 웹애플리케이션의 성능을 떨어뜨리는 주된 요인이 된다.
ReadDocument Fragment
여러 노드를 하나의 그룹으로 감싸 다른 곳으로 전달하게 해주는 Wrapper 노드이다. 리액트에서의 Fragment와도 의미상 비슷한 개념이라고 볼 수 있겠다.
ReadSCSS 입문
CSS 전처리기 중 하나다. TypeScript가 JavaScript의 superset이듯, SCSS는 CSS의 superset이다. 스타일링의 방법은 일반적인 CSS뿐만 아니라 HTML의 style 속성, 리액트에서는 styled-components 등 여러가지가 있는데, 그 중 하나로 SCSS가 있다고 보면된다.
Read객체 모델(DOM, BOM)
자바스크립트는 큰 틀에서 보면 DOM, BOM, 그리고 Core로 분류된다고 한다. 참고로 Core는 문법, 라이브러리 등을 의미한다는 점 정도로만 알아두고, 객체 모델인 DOM과 BOM에 대해 다뤄본다.
ReadJavaScript의 전역 객체
자바스크립트의 전역 객체는 모든 객체의 최상위 객체를 의미한다. 브라우저 환경에서는 window, 노드 환경에서는 global이 전역 객체이다.
ReadHTMLCollection vs NodeList
DOM을 조작할 때 접하게 되는 유사배열들이다. Live하냐 Static하냐의 차이가 중요한데, 이를 인지하고 있지 못하면 언젠간 버그를 마주칠 수밖에 없겠다.
Read