[Essential Concepts] 동적웹의 모듈화와 SPA

웹은 정적웹과 동적웹으로 나뉜다

---

접속 시마다 받게되는 파일이 같아 '매번 똑같은 것'을 보여주는 웹을 '정적웹'
접속 시마다 '데이터베이스' 내용에 따라, 서버가 내용을 '업데이트'해서 보여주는 것을 '동적웹'이라 한다.

🍕 동적웹의 크기가 커질 때에는 ' 모듈화 '해서 접근한다.
그 중, ' MVC '라는 접근법이 많이 사용된다.

🍕Model, 🍕View, 🍕Controller라는 모듈로 이루어져 있고

• Model은 데이터에 관련된 것, 데이터 형식을 지정하고, 저장 및 불러오는 작업들에 관한 코드가 들어있다.
• View는 시각적으로 보이는 것(html, css 등의 요소)에 대한 코드가 들어있다.
• Controller는 Model의 데이터를 View에 연결하고 전반적인 제어를 담당하는 코드가 들어있다.

이러한 구조의 기본설계가 갖춰진 상태를 ' MVC 웹 프레임워크 '라고 한다

❓ 프레임워크란
-> 개발할 때, '자주 쓰이는 기능'을 '한꺼번에 제공'해 개발효율을 높여주는 '소프트웨어 환경'을 말한다

기존 MVC 웹의 단점과 SPA

---

⚠️ 일부분의 변화에 통채로 페이지를 새로 렌더링해서 비효율적
⚠️ 플랫폼에 따라 각자 다른 렌더링 방식으로 인해 비효율적

❓ 렌더링이란
-> 웹페이지를 그려내는 과정을 말한다.

if, 서버에서 HTML, CSS, JS로 렌더링하는 것이 아닌
각각의 브라우저에서 HTML, CSS, JS로 렌더링해낼 수 있다면,

서버는 어느 플랫폼에서 요청이 들어오든
데이터를 찾아 처리해서 주는 작업만 하면 되고,
변화가 생겼을 때,
브라우저에서 실시간으로 변화된 부분만을 렌더링하기 때문에
페이지를 통째로 리렌더링하지 않는다.

기존에 서버가 하던일(렌더링)을 브라우저에서 자바스크립트(JavasSript)가 하기 때문에
이 언어로 프레임워크(AngularJS, ReactJS, VueJS)를 만들어,

'한 번' 로드된 화면에서 많은 기능을 사용할 수 있는 환경을 ' SPA (Single Page Application) '이라고 한다