아키텍쳐
아키텍쳐란?
- 많은 옷을 정리 할 떄에 옷장에다가 색깔별 또는 그에 맞게 정리하는 것 같은 느낌이다.
- 아키텍처라는 것은 좋은 구조를 만드는 것이다.
- 인터페이스는 서버가 어떤 데이터를 요청받고, 어떤 형식으로 응답할지를 정하고, 클라(프론트엔드)는 그 규격에 맞춰 데이터를 요청하고 응답을 처리한다.
MVC란?
- View(화면): 웹 프론트에서는 대개 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미한다.
- Model(데이터): 어딘가에는 실제의 데이터가 반영이 되어 나타나야 한다. 이러한 데이터를 주관하는 영역을 Model이라고 한다.
JS의 Object일 수도 있고, 서버의 API로 받는 데이터일수도 있고, 서버에 있는 DB일 수도 있다. - "Model"에서 말하는 객체 형식이란, 자바스크립트의 객체(Object)처럼 데이터를 구조화하여 다루는 방식
- Controller(컨트롤러: 이렇게 Model의 데이터를 받아서 화면에 그리고, 화면으로 부터 사용자의 동작을 받아서 Model을 변경하고, 이러한 Model과 View 사이의 중간 역할을 하는 것을 Controller라고 한다.
- 즉 컨트롤러가 없다면 클라에서 요청을 하거나 백에서 데이터를 응답할때에 역할에 중간다리 역할이다. 그리고 받아온 데이터를 화면에 표시하고 이는 서버에서 받아온 데이터가 있어야 그에 맞게 클라가 데이터를 뷰를 그리그 떄문, 컨트롤러가 없다면 뷰만 업데이트 할수 있다. 이떄 로컬에 있는 json도 마찬가지이다.
MVC가 나눠진 이유
- 화면을 다루는 문제와 데이터를 다루는 문제의 성격이 달라서 분리하고 싶고
- Model과 View간의 의존관계를 최소화 해서 화면의 수정이 데이터 수정에 형향을 미치지 않고 데이터 수정이 화면의 수정에 영향이 미치지 않고자 함이다.
웹 아키텍처의 발전
- 옛날 웹에서는 서버가 HTML을 렌더링하고 데이터를 가공하여 클라이언트에게 보냈다. 클라이언트는 단순히 그 HTML을 표시하는 역할
- 현재의 웹에서는 서버는 데이터만 제공하고, 클라이언트는 데이터를 요청하여 화면을 동적으로 그리며 최적화에 집중
- 모델이 변경되어도 뷰가 자동으로 업데이트되지 않는다. 뷰는 모델로부터 새로운 데이터를 요청해야만 화면이 갱신
- 서버 사이드 렌더링(SSR) 방식으로, 페이지가 매번 새로 로드되었기 때문에 웹사이트가 느리고 비효율적이였다.