CS지식 2

브라우저 렌더링을.araboja

브라우저 렌더링 과정을 이해하기 위해서 먼저 웹 브라우저의 구조를 알아야한다. 사용자 인터페이스 : 웹 페이지를 제외하고 사용자와 상호작용 하는 것 ( 주소 표시줄, 이전/다음/새로고침 버튼) 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 연결하는 것 렌더링 엔진: HTML과 CSS를 파싱하여 요청한 웹페이지를 표시하는 것 통신: 네트워크 요청을 수행 UI 백엔드: 기본적인 위젯을 그려주는 것 JS엔진: 자바스크립트 코드를 실행하는 인터프리터 자료 저장소: 로컬 스토리지나 쿠키같은 보조기억장치에 데이터를 저장하는 파트 여기서 우리는 렌더링 엔진에 대해서 이야기할것이다. 렌더링 엔진의 목표 1. HTML,CSS,JS,이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다. 2. 업데이트가 필요할 때,..

CS지식 2023.02.01

CSR과 SSR 차이를(feat.SPA&MPA).araboja

CSR: 클라이언트 사이드 렌더링 SSR: 서버 사이드 렌더링 CSR = 클라이언트측에서 렌더링 하는 방식 SSR = 서버측에서 렌더링 하는 방식 +)SSG 라는것도 있음: Static Side Generation SSR이랑 SSG 둘다 서버측에서 HTML을 보내는거라 비슷한데.. SSR은 요청이 들어오면 만들어서 보냄 (미리 만들어두기 어려운 경우) SSG는 미리 다 만들어둔거 (캐싱해두기 좋은 경우) CSR의 동작 과정과 특징 동작 과정 1. 유저가 웹사이트 방문한다. 2. 브라우저가 서버에 콘텐츠를 요청한다. 3. 서버는 빈 뼈대 HTML만 보내준다. 4. 브라우저가 연결된 JS링크를 통해 서버를 통해 JS를 다운받는다. 5. JS를 이용해 동적으로 페이지를 만들어서 브라우저에 띄운다. 특징 1. ..

CS지식 2023.01.31