용어 알기 ✅ 하이드레이션(hydration) 1. JS 코드가 실행되어 2. JS로직과 HTML이 연결 후 3. 유저 상호작용이 가능하도록 하는 것 ✅ 요청 페이지 요청을 의미 ✅ TTFB(Time To First Byte) ⏩️ 데이터가 브라우저에 도달 ✅ FCP(First Contentful Paint) ⏩️ 유저가 컨텐츠를 볼 수 있음 ✅ LCP(Largest Contentful Paint) ⏩️ 유저가 주요 컨텐츠를 볼 수 있음 ✅ TTI(Time To Interactive) ⏩️ 유저와 상호작용 가능 CSR (Client Side Rendering) 데이터 페칭 이후에 렌더링. 1. User Request 2. CDN이 JS로 접근할 수 있는 링크와 HTML 파일을 서빙 3. 브라우저는 HTM..
2025. 03. 06 블로그 A/S 프로젝트🚧 로 업데이트한 글입니다.1. 브라우저 렌더링 과정사용자가 브라우저를 통해 웹사이트에 접속하고, 브라우저가 리소스를 다운받으면서 시작된다. (HTML, CSS, JS 등)Parsing: 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦Style: 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦. 다양한 상대적인 값들이 px로 치환되어 계산.DOM 트리 + CSSOM 트리 = Render 트리 구축.Layout: 각 요소의 배치 결정Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성 (이때 그리는건 아니다)Layerize: Paint 결과물을 사용해서 특정한 레이어들로 쪼갬Commit: Layerize 결과물을 ..
