클라이밍하는 개발자

웹 브라우저는 단순히 HTML 텍스트를 받아오는 것에서 끝나지 않습니다. 우리가 보는 네이버, 구글 같은 멋진 화면은 브라우저 렌더링(Browser Rendering)이라는 복잡한 과정을 통해 만들어집니다. 이 과정을 전문 용어로 CRP (Critical Rendering Path)라고 부르며, 프론트엔드 개발자에게는 성능 최적화의 핵심 포인트이기도 합니다.🏗️ 1. 설계도 분석 (Parsing: DOM & CSSOM)브라우저는 HTML과 CSS를 읽어 트리(Tree) 구조로 변환합니다.DOM (Document Object Model): HTML 태그들을 분석해 페이지의 뼈대를 만듭니다.예: 안에 가 있고, 그 안에 가 있구나. (집의 구조)CSSOM (CSS Object Model): CSS를 분석..

Virtual DOM이 뭐길래? 🤔Virtual DOM을 쉽게 설명하면 집 설계도 같은 개념이에요! 🏠실제 집을 지을 때를 생각해보세요매번 벽을 부수고 다시 짓는 건 비용이 엄청나죠 💸대신 설계도를 먼저 수정하고 비교해서정말 바뀐 부분만 실제 공사를 진행해요 🔨Virtual DOM도 마찬가지로 메모리 상의 가벼운 복사본을 만들어서, 실제 DOM 조작을 최소화하는 똑똑한 방법이에요!왜 Virtual DOM이 필요할까? 😫실제 DOM의 문제점브라우저의 실제 DOM은 무거운 짐짝이에요! 📦하나의 div 요소만 해도...- style 계산- 레이아웃 재계산 - 페인팅- 리플로우- 수많은 브라우저 API...페이스북 뉴스피드처럼 댓글 하나만 추가해도 전체 페이지가 다시 그려지는 상황이 발생했어요! ?..