Css
Browser Rendering
HTML을 파싱하여 DOM tree를, CSS를 파싱하여 CSSOM tree를 만들고 이 둘을 조합해 Render tree를 만든다. 이를 배치하고 그리는 과정이 바로 이전 포스트에서 다룬 Reflow와 Repaint이다.
ReadReflow와 Repaint
수정된 Render tree를 다시 렌더링하는 과정에서 발생한다. Reflow는 위치와 크기를 계산, Repaint는 시각적인 요소를 표현하는 과정이다. 당연히 필요한 과정이지만 효율적으로 컨트롤하지 못하면 웹애플리케이션의 성능을 떨어뜨리는 주된 요인이 된다.
ReadSCSS 입문
CSS 전처리기 중 하나다. TypeScript가 JavaScript의 superset이듯, SCSS는 CSS의 superset이다. 스타일링의 방법은 일반적인 CSS뿐만 아니라 HTML의 style 속성, 리액트에서는 styled-components 등 여러가지가 있는데, 그 중 하나로 SCSS가 있다고 보면된다.
ReadAnimation의 기초
JavaScript 애니메이션을 사용하면 JavaScript 특성상 하나의 스레드에서 실행되기 때문에 처리할 양이 많으면 애니메이션이 끊겨 보일 수 있다. 반면 CSS 애니메이션은 다른 스레드에서 작동되기 때문에 훨씬 부드럽게 보일 수 있다. 그럼에도 애니메이션에 동적인 효과를 줘야하거나, CSS로 표현할 수 없는 속성을 지원하기 위해서는 JS 애니메이션이 필요하다.
Read