Weeeeey Weeeeey

1. SSR ( Server Side Rendering 1-1 최초 페이지 로딩 시간 짧음 (CSR 보다) 1-2 JS 실행이 완료될 때까지 인터렉션 불가 1-3 페이지 이동에 걸리는 시간이 CSR보다 길다 1-4 검색엔진 최적화(SEO)에 적합 2. CSR (Client Side Rendering) 2-1 최초 페이지 로딩 시간이 김 (SSR보다) 2-2 페이지 이동 시간 짧음 2-3 data request를 받아올때까지 빈 화면 표출 (로딩) 3. SSG (Static Site Generation) SSR 서버에서 페이지를 렌더링하는 방식 ( Next.js , PHP ASP ) Client가 특정 페이지 요청 Server에서는 해당 페이지에 필요한 data를 포함한 HTML 파일을 Client에 전달..

프론트엔드(FE) 개발자가 브라우저(Br) 동작 원리를 알아야 하는 이유 FE에게 Br는 거의 모든 것. Br를 통해 개발, Br를 통해 테스트 및 배포 진행, 사용자들은 Br를 통해 웹에 접속 FE는 Br의 모든 것이 아닌 HTML, CSS, JS가 의도대로 동작하는지 확인해도 큰 문제x 하지만 기능이 많고 다양한 동작이 발생한다면 최적화가 필요해짐 Br의 최적화를 위해선 결국 Br의 동작 원리를 이해하는 것에서부터 시작 해당 포스트에서 알아볼 것 => Br의 렌더 과정 & 원리 ( 아래는 선 4줄 요약 ) HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드 DOM & CSSOM을 결합하여 렌더 트리를 형성 렌더 트리에서 레이아웃을 실행 => 각 노드의 기학학적 형태를 계산 개별 노드를 ..