JavaScript 로 알아보는 클라이언트 사이드 렌더링 MVC 구조

JavaScript 로 알아보는 클라이언트 사이드 렌더링 MVC Architecture

데이터(Model), 표현 계층(View), 사용자 상호작용 계층(Controller)

1. 사용자가 애플리케이션과 상호작용한다.

2. 컨트롤러의 이벤트 핸들러가 실행된다.

3. 컨트롤러는 모델에게 데이터를 요청하고 그 결과를 뷰로 전달한다.

4. 뷰는 데이터를 사용자에게 표시한다.

Model

자바스크립트는 데이터를 원격으로 가져와서 클라이언트에 일시적으로 저장한다. 클라이언트의 데이터 접속은 마치 메모리에서 데이터를 가져오듯이 즉시 처리된다. 이는 인터페이스에 큰 영향을 미친다. ORM을 이용하면 상당히 쉽게 데이터를 얻을 수 있다. ORM을 통해서 서버 데이터를 가져와서 모델 레코드를 갱신하는 방법을 사용한다.

Controller

컨트롤러는 애플리케이션의 뷰와 모델의 존재를 알고 있는 유일한 컴포넌트이다. 그렇기 때문에 뷰와 모델을 묶는 역할을 한다. 페이지를 로드할 때, 컨트롤러는 이벤트 핸들러를 뷰에 부착하고, 콜백을 처리하고, 모델과 데이터도 주고 받는다. 컨트롤러를 만들 때 중요한 점은, 얼마나 컨트롤러의 상태를 로컬로 저장할 수 있으며, 모듈로 캡슐화할 수 있는가 이다.

과거에는 서버가 세션 쿠키로 상태를 관리했다. 따라서 사용자가 새 페이지를 탐색하면 쿠키만 저장하고 기존 페이지의 상태는 잃어버릴 수 밖에 없었다. 하지만 자바스크립트 애플리케이션은 단일 페이지에서 실행되므로 클라이언트 메모리에 상태를 저장할 수 있다. 이렇게 하게 되면 인터페이스의 반응속도가 무척 빨라진다. 클라이언트에 상태가 저장되어 있으므로 다음 페이지 로드를 기다릴 필요가 없어진 것이다. 그렇다면 그 상태값을 어디에 저장해야 하는가?에 대한 문제점에 봉착하게 된다. 현재까지는 MVC 구조를 이용하여 애플리케이션의 컨트롤러에 상태를 저장했다.

즉, 컨트롤러는 뷰와 모델을 연결하는 접착제라고 할 수 있다.

View

뷰는 애플리케이션의 인터페이스를 제공한다.

뷰는 애플리케이션의 컨트롤러가 관리하는 로직을 포함하지 않는 HTML 조각이다.

뷰에 로직을 추가하게 되면 MVC 추상화가 깨진다.

템플릿 엔진

html 코드 조각을 자바스크립트로 동적으로 추가할 때 이용하는 방법 중 하나이다. 순수 자바스크립트 파일로부터 html 코드를 따로 분리함으로써, 가독성과 유지보수성을 높일 수 있는 방법이다. handlebar.js 와 같은 수 많은 템플릿 엔진들이 제공되고 있다.

기본적인 원리는 html 코드에 {{ }}과 같은 태그를 생성하여 동적으로 수정해야하는 data를 자바스크립트로 컨트롤 하는 원리이다.

바인딩

클라이언트의 뷰 렌더링 시 실제 효과를 느낄 수 있는 기능이 바인딩이다. 기본적으로 바인딩은 뷰 엘리먼트와 자바스크립트 오브젝트를 연결하는 것을 의미한다. 자바스크립트 오브젝트가 바뀌면 새로 바뀐 오브젝트를 자동으로 뷰에 반영한다. 이렇게 하게 되면 컨트롤러가 처리해야 할 작업이 줄어든다.

Data Flow

애플리케이션이 실행되면서 Controller가 생성된다. 그러면서 Controlelr 생성자 함수에 정의된 함수들이 실행되는데, 이 때, 이벤트를 받기 위해 View와 binding 된다. Event 가 발생하면, binding 된 function 이 실행되는데, 이 때 컨트롤러 프로토타입에 프로퍼티도 저장되어 있는 함수, 즉 컨트롤러의 메소드가 실행된다. 이 컨트롤러의 메소드는 model에게 데이터를 조적하는 역할을 위임하고, 콜백으로 전달된 view의 함수를 call하는 역할을 한다. 이 구조를 callback구조라고 한다. 직관적이지 않을 수 있다. 

 - The End -