정적 웹/동적웹은 뭔가요?, MVC 웹 프레임워크가 뭔가요? / Angular, React, Vue가 뭔가요?

정적웹은 움직이지 않는, 같은 리소스를 보여주는 웹이다. 

 

-> 진열대에 놓인 것으로 그대로 보여주게 된다. (html, css, javascript)

 

시간, 랜덤, 서버 자료 등을 보여줄 수 있다. -> 접속할때마다 받게되는 것들을 그대로 보여주는 것

 

 

게시판 처럼 새롭게 글들이 올라오는 것은 동적으로 만들어야 한다!! 

 

일일히 데이터베이스에 저장해서 서버로 옮기게 되면 블로그 자체에 로드가 많이 걸린다.

 

이래서 jekyll, Hugo 와 같은 정적 웹 생성툴로 블로그를 많이 운영하고 있음. 

 

---------------------------------------------

동적 웹 

Model

데이터의 형식을 지정하고 불러오는 작업들에 관한 코드들이 모델 파트에서 이루어짐 

View

목록, 글, 입력 화면 등으로 시각적으로 보여주는 것이 HTML, CSS 에서 이루어짐 

Controller

이를 연결해서 GUI 형태로 움직이게 하는 것이 컨트롤러이다 

 

 

이를 쉽게 만들기 위해서 프레임워크를 제공한다.!!! 

 

이는 Spring, lalabel, django(Model, Template, View), Ruby on rails 등이 있음 

Scala의 Play 등이 있음. Angular 도 있음. 

C# 의 .Net Core Frame Work 

----------------------------------------------

Ajax 란?

Asynchronous Javascript and XML 

 

왜 필요한가? 

HTTP WEB Service 

 

http : 웹상에서 자료를 오가게 하기 위한 프로토콜로 간주하면 된다. 

브라우저와 웹 서버간의 request 와 response는 계쏙 해서 세션을 열고 끝내고 한다.

 

전체 페이지 갱신이 아니라 특정영역만 바꾸고 싶다.

-> 어떻게??

 

-> 버튼 같은 거 누르면 자바스크립트는 서버 통신하지 않고 자체에서 하게 된다. 

 

특정값만 바꾸게 되는 경우, 특정 부분만 바꾸게 하기 위해서 (request, response) 

"XML Http Request()"라는 함수를 호출하게 된다." 

 

왜 Asynchronous 인가? 

함수 호출할떄 통과되고, 콜백 함수 쓴다, 기다리지 않고 

콜백함수로 값을 받게 된다!! 

 

 

 

 

-----------------------------------------------

Single Page Application 프레임 워크이다 -> Angular, React, Vue

 

기존 MVC의 문제점 -> 데이터 베이스를 불러오고 html, csss, javascript를 변경해서 보내준다. 

-> 매우 비효율적이다! -> 데이터 자체도 문제였다. -> 페이지를 

 

1.  ajax로 자바스크립트로 변경할 수 있다. 

-> 수고로움이 있다.

 

2. 모바일, 피씨, 등등에서 할려면 ??

서버에서 받은 값을 렌더링을 통해서 동일한 작업르 수행해서 데이터를 전송할수가 있게된다. 

 

정적은 진열된 편의점, 동적은 직접 요리해준다면

SPA는 종원이 가져다 준것을 손님이 요리하는 것! (요리는 여기서 렌더링을 뜻한다 이것을 사용자 기기에서 작동함) 

 

재료는 서버에서 주고 (원하는 재료 있으면 추가로 준다) 요리는 클라이언트에서 한다! 

 

 

------------------------------------------------

출처 유투버 얄팍한 코딩 사전 

youtu.be/C06xRvXIAUk

youtu.be/AERY1ZGoYc8

youtu.be/iE29lbjbow0

기술 노트 with 알렉 

youtu.be/_Kh5Kdha3Ww