정적 웹, 동적 웹, MVC, Flux

그냥 만들 것이 아니라 생각을 하고 만들자.

개념 정리 시작!

언제 접속해도 같은 리소스를 출력하는 웹.

서버에서 가공해서 제공하는 것이 아닌, 미리 정해진 html, css, js 이미지 등 파일을 같은 내용을 고정으로 제공한다.

게시판 등 내용이 동적으로 바뀌어 출력되는 웹.

DB 와 연결해 서버가 출력할 데이터를 동적으로 가공해서 제공한다.

MVC 는 어플리케이션을 세 가지 역할의 컴포넌트로 구분한 개발 방법론이다.

Model : DB와 연동해서 데이터 형식지정 및 입출력 작업 담당
View : 눈에 보이는 것, html css 로 나타내는 요소 작성 담당
Controller : 클라이언트의 요청에 따른 컴포넌트간 전달 담당
클라이언트가 데이터와 함께 요청하면 적절히 가공해서 Model 에 전달 후, Model 에서 반환한 데이터로 화면을 생성하도록 View 에 전달한다.

MVC의 View 는 보여지는 결과물을 출력할 뿐이나 프론트엔드는 그 자체가 View 이다.

프론트엔드는 View 에서 수많은 이벤트가 발생하게 되는데 그렇게 되면 View 와 Model 이 양방향으로 복잡하게 연결된다.

게다가 View 를 여러개로 쪼개서 많아지게 되면 복잡도가 훨씬 올라가게 된다.

이 사이에 Controller 를 둔다고 하더라도 매우 복잡한 구조의 Controller 가 필요하다.

또한 프론트엔드의 View 는 트리구조의 DOM 을 자주 표현해야하므로 re-rendering 을 최소화하는 계층적인 구조를 가지는 것이 효율적이다.

그러므로 프론트엔드에서는 MVC 패턴보다는 데이터 바인딩, MVVM, Flux 등의 패턴을 사용한다.

View 와 Model 간의 데이터가 자동으로 변경된다.

그럼 변경된 Model 의 데이터에 따라 자동으로 re-rendering 이 일어나는 양방향 바인딩 구조이다.

이렇게 양방향 바인딩을 하도록 도와주는 프레임워크로 대표적으로 Svelte 가 있다.

Model-View-View Model 으로, VM 은 View 에서 사용되는 Model 을 가지고 있다가 View 에서 변경사항이 생기면 VM이 자동으로 변경되고, VM 이 변경되면 View 가 업데이트 된다.

대표적으로 Vue.js 가 있다.

앞선 내용과 같이 MVC 를 프론트엔드에 적용하면 복잡도가 올라갈 수 있으므로 React 에서는 단방향 바인딩을 하는 Flux 아키텍쳐를 적용한다.

View 에서 변경사항이 생기면 정해놓은 Action 에 따라 dispatch 라는 이벤트를 발생시키고, 변경된 값을 store 에 전달 후 다시 View 로 반환해 re-rendering 되는 방식이다.