웹 애플리케이션의 MVC

MVC란 "Model-View-Controller" (모델-뷰-컨트롤러)의 약자이다.
모델이란 데이터와 데이터에 접근하기 위한 기능, 여기에 다양한 로직을 보탠 것을 가리킨다.
뷰는 콘텐츠를 어떻게 외부에 출력할지를 정의하는 부분이다. 사용자에게 전달되는 형태는 HTML일 수도 있고, JSON일 수도 있으며 다른 포맷을 취할 수도 있다.
컨트롤러는 특정 URL을 요청받았을 때(이 과정을 '라우팅'이라고 한다).
필요에 따라 컨트롤러가 모델과 정보를 주고받은 다음 적절한 뷰를 골라 사용자에게 반환한다.

프론트엔드 애플리케이션에서의 MV

는 MVC 애플리케이션의 뷰 부분에 해당한다.
본래, 웹 애플리케이션은 콘텐츠가 HTML에 포함된 채로 사용자에게 응답으로 전달되기 때문에 '뷰'안에 MV와 같은 구성을 할 필요가 없었다.
그러나 SPA에서는 '뷰' 안에서도 Ajax 등을 통한 데이터 접근 계층이 추가되거나 필요에 따라 URL을 교체하는 처리 등이 끼어들기 때문에 MV구조가 필요하게 되었다.

프론트엔드 애플리케이션 설계에 쓰이는 패턴

1990년대 이전부터 존재했던 애플리케이션 설계 패턴인 MVP와 MVVM, 여기서는 프론트엔드 애플리케이션 설계에 쓰이는 패턴을 설명할 것이다.

MVP= MV + Presenter

모델과 뷰 사이에 프리젠터가 위치하며 양자 간의 입출력 인터페이스 역할을 맡는다.
사용자가 모델의 정보를 수정하거나 읽으려면 반드시 뷰를 거쳐 프리젠터가 제공하는 인터페이스를 통해야 한다.

MVVM = MV + View Model

뷰-모델은 모델과 뷰 사이에 위치한다는 점에서 프리젠터와 비슷하지만, 그 역할이 뷰와 모델 간의 인터페이스 대신 양방향 데이터 바인딩을 담당한다는 점이 다르다.
여기서 말하는 "양방향"은 뷰를 통해 변경하려는 모델의 값이 뷰-모델을 거쳐 변경 내용을 탐지하고 모델에 변경 내용이 반영되기 떄문에 붙여진 말이다.

Flux : 페이스북에서 주창한 웹 애플리케이션용 아키텍처 패턴

1. 액션크리에이터 2. 디스패처 3. 스토어 4. 뷰 단계를 반복하는 형태로 웹 애플리케이션이 구성된다.

1. ActionCreator : "액션"을 생성하는 함수

액션이란 "이벤트 이름과 데이터를 함께 모아놓은 것" 이라 생각하면 된다. 애플리케이션 안에서 일어나는 다양한 사건들이 액션의 형태로 전달된다.
예를 들어, Ajax로 서버에 데이터를 요청하거나 사용자가 버튼을 누르는 행위 등이 이러한 사건에 해당한다. 액션크리에이터의 역할은 액션을 생성하여 디스패처에 넘겨주는 것이다.

2. Dispatcher : Dispatcher만이 store의 내용을 변경할 수 있다.

스토어는 애플리케이션의 상태를 나타내는 정보를 말한다. 애플리케이션 페이지 제목, Ajax통신으로 받아온 정보, 사용자를 발생시킨 상호작용에 대한 정보 등도 여기에 해당한다. Flux에서는 "디스패처만이 스토어의 내용을 변경할 수 있다"라고 정의되어 있다. 즉, 애플리케이션의 상태는 디스패처를 통해서만 변경될 수 있는 것이다.

3. View: 다른 패턴과 마찬가지로 사용자에게 보여지는 화면을 가리킨다.

콘텐츠 및 사용자 인터페이스로 구성, 한 가지 차이점이 있다면 뷰는 스토어의 상태에 따라 바뀐다는 점이다. 예를 들어 화면에 로딩 마크가 표시되면 스토어에 있는 어떤 프로퍼티의 상태가 "로딩 중"으로 바뀐 것을 뷰가 반영하는 것이다.

• 요약
  Flux에서 애플리케이션의 처리과정은 항상 한방향이다.
  맨 처음 초기화 액션이 액션크리에이터에서 디스패처로 전달되면 디스패처가 필요에 따라 스토어의 내용을 변경하고, 그 결과가 뷰에 반영된다.
  그 다음 사용자가 어떤 조작을 하면 다시 액션크리에이터가 액션을 생성하고 디스패처에 보내서 같은 과정이 반복된다.

이렇게 일방통행적인 흐름을 갖는 아키텍처를 이용하여 다양한 이벤트가 비동기적으로 발생하는 프론트엔드 애플리케이션에 걸맞는 처리과정을 구현한다.
Flux를 페이스북에서 발표했기 때문에 React에서 사용되는 패턴이라 생각하기 쉽지만, 프론트엔드 애플리케이션 전반에 적용할 수 있는 패턴이다. Flux는 특정 라이브러리를 가리키는 이름은 아니지만 이 패턴을 사용하려면 역시 페이스북에서 제공하는 Flux Utils나 Redux 등을 사용하면 편리하다.

Flux 깃허브
https://github.com/haruair/flux