[02-01] 웹 동작-1

 

1. 화면 조작/전환

Routing	Rendering
사용자 요청에 따른 URL처리 -> 페이지 or 데이터 제공	데이터를 화면에 표시

- Rerendering: 화면 일부 처리

DOM 조작	주체	장단점	비고
직접 조작	js	(-) haard to mange ==개발 빡셈 (-) repetitive == WB도 빡셈(DOM 변경에 의한 다수의 렌더링 발생)
간편 조작	j-query	(+) 브라우저별 호환성 문제 해결 (-) repetitive == WB도 빡셈	Cross Browsing
간접 조작	react	짱임...최고임	VDOM 사용

	Hard Navigation	SPA /Soft Navigation
URL변경 시	새 HTML 페이지로 이동	JS가 새 화면을 구성함
네트워크 사용	화면 전환 시마다	초기 로드에 사용, 이후 화면 전환 시 미사용
방식	Server-side => SSR, SSG	Client-side => CSR/SPA
Ex	window.history	navigate = useNavigate

 

 

깨알 모음

- Cross Browsing

    : WB간 상호 호환성을 보장하는 기법

- SSR(Server Side Rendering)

    : 요청마다 서버가 페이지 생성 

- SSG(Static Site Generation)

    : 정적 사이트 생성 방식, 웹 페이지 빌드 시점에 페이지 생성

- SPA(Single page application)

    : 단일 HTML 페이지로 동작, 사용자와 상호작용하여 동적업데이트

    : 초기 로드 시, . html, .js .css 로드 => 이후 서버에 새로운 페이지 요청 X, js로 동적 업데이트

 

이전 글: 2024.12.05 - [ASAC/정리용] - [1주차] 웹 구성 간 흐름

다음 글: 2024.12.11 - [ASAC/정리용] - [2주차 1차시] React가 어쩌다가