Static Wep Page

정적 웹페이지

미리 만들어 놓은 웹페이지를 사용자에게 전달하는 웹페이지

(HTML+CSS)

 

dynamic server web page

동적 서버 웹페이지

서버에서 실시간으로 생성되는 웹페이지

(정적 웹페이지 + 서버& DB)

 

좌) 동적 웹 사이트 / 우) 정적 웹 사이트 (이미지 출처 : https://dzone.com/articles/the-comparison-of-single-page-and-multi-page-appli)

 

Fat Client

기존 클라이언트에서 서버에 요청하는 방식에서 클라이언트 자체에서 처리

대신 클라이언트의 처리하는 데이터가 너무 많아지다보니 과부화와 유지보수가 어렵다는 단점이 있다.

(+ DOM & JavaScript)

 

SPA(Single Page Application)

새 페이지를 불러오지 않고 현재 페이지를 동적으로 재 작성[동적 웹페이지 + (XHR ⇒ CSV+XML+JSON)]

Angular,Vue,React가 여기에 해당한다.

좌) 일반적인 페이지 생명주기 / 우) SPA 생명주기 (이미지 출처 : https://dzone.com/articles/the-comparison-of-single-page-and-multi-page-appli)

 

Full-Stack

프론트엔드 영역과 백엔드 영역이 합쳐진 페이지

Full Stack 웹사이트 구조 (이미지 출처 : https://harshp.com)

 

Frontend:SSR(Server Side Rendering)

서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법

서버 사이드 랜더링 구조 (이미지 출처 : https://javascript.plainenglish.io/simple-guide-to-server-side-rendering-ssr-in-next-js-d346e4db3078)

 

회고 : 웹페이지를 만들고 디자인만 해왔었지, 구조가 다양하니 새롭게 와닿았다.

+ Recent posts