렌더링
-
SPA, CSR, SSR개발공부/CS 2023. 12. 5. 15:51
오늘은 렌더링 방식에 대해 공부하고자 한다. 왜냐하면 프론트엔드 개발자는 각 렌더링 방식의 장단점을 이해하고, 웹 어플리케이션의 특성에 맞는 렌더링 방식을 선택할 줄 알아야 하기 때문이다! 렌더링 종류 렌더링 종류는 아래와 같다. 싱글 페이지 어플리케이션 (Single Page Application) 클라이언트 사이드 렌더링 (Client-Side Rendering) 서버 사이드 렌더링 (Server-Side Rendering) 이제 하나씩 자세히 알아보려고 한다. 싱글 페이지 어플리케이션 (Single Page Application) 모든 페이지가 단일 페이지로 구성되어 있는 방식 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션 예시로는 React, Vue.js..
-
브라우저 렌더링 원리개발공부/CS 2023. 11. 9. 10:34
오늘은 브라우저 렌더링에 대해 알아보고자 한다. HTML 파싱 후 DOM 트리 구축 CSS 파싱 후 CSSOM 트리 구축 JavaScript 실행 DOM과 CSSOM를 조합하여 렌더트리 구축 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 (Layout 단계) 계산한 위치 및 크기를 기반으로 화면에 그림 (Paint 단계) 위에 과정을 통해 브라우저가 렌더링된다고 한다. 하지만 나는 아직 완벽하게 이해하지 못했기 때문에 하나씩 차근 차근 알아보고자 한다. 브라우저란? 동기적으로 HTML, CSS, JS 언어를 해석하여 내용을 화면에 보여주는 프로그램 CSSOM (CSS Object Model) CSS 내용을 파싱하여 자료를 구조화 한 것 즉, CSS 내용을 해석하고 노드를 만들어 ..