Input + Output = True

😎 렌더링 최적화] 리플로우 리페인트 (Reflow Repaint) 리플로우와 리페인트를 알기 위해 먼저 브라우저 렌더링 방식을 간단하게 알아보자. ✅ 기존 DOM 렌더링 방식 (브라우저 렌더링 방식) 브라우저는 서버가 보내준 HTML 파일, CSS 파일을 해석(Parsing)하여 DOM 트리, CSSOM 트리를 만든다. DOM 트리 + CSSOM 트리를 결합해 Render 트리를 만든다. Render 트리로 각 노드의 위치와 크기를 계산한 레이아웃(Layout)을 만들고 뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다. Layout 계산이 완료되면 요소들을 화면상의 실제 픽셀로 변환하고, 레이어를 만드는 페인트(Paint)를 한다. 생성된 레이어를 합성해서 실제 화면에 나타낸다. (..

🔎 SPA 방식, MPA 방식 ✅ SPA 방식 SPA : Single Page Application 단 하나의 페이지로 이루어진 어플리케이션 -어플리케이션 내에서 페이지 이동 시 JS를 통해서 현재 보고 있는 DOM의 내용을 모두 제거하고 이동할 페이지에 맞는 컨텐츠로 DOM을 그린 후 브라우저 상의 URL을 변경하여 페이지를 이동한 것 같은 느낌을 주는 방식 -어떤 페이지를 접속하더라도 HTML, CSS, JS를 동일한 파일 하나만 접속한 페이지에 맞게 화면을 구성한다. -최근 JS 프레임워크들은 SPA를 기본으로 하고 있다. (React, Vue, Angular 등) -쉽게 말하면 기본 뼈대만 있고, 각 페이지에 맞는 컨텐츠로 DOM을 그린 후 재출력하는 방식이다. -그래서 페이지 이동을 해도 화면 ..