JavaScript로 구현한 MVC 패턴

1. MVC 패턴이란?

MVC 패턴이란 하나의 어플리케이션을 크게 Model, View, Controller이라는 세 영역으로 구분하고 각 영역간의 코드 결합도를 최소화 시키는 개발 패턴 중 하나이다.

- 다시말해 패턴의 주요 목적은 Model과 View 영역간의 코드 결합도를 최소화 시키는데 있다고 볼 수 있다.

2. 영역간의 역활 정의

Model: 어플리케이션에 비지니스 로직과 사용되는 데이터를 다루는 영역이다.

- 보통 비지니스 로직에 필요한 데이터는 해당 DB에 의해 관리되고, 그 데이터를 다루는 연산은 SQL 문법을 통해 구현된다.

View: 최종 사용자에게 보여줄 프리젠테이션 로직을 담당하는 영역이다.

- 웹으로 말하자면 정적 리소스로는 HTML, 동적 리소스로는 ASP, PHP, JSP 등의 파일로 나뉠 수 있다.

Controller: 기존 MV 패턴에서 View가 맡아하던 Model 영역과의 일부 로직들을 Controller 영역으로 대체하여, Model과 View 영역간의 코드 결합도를 줄여주는 영역이다.(결국 패턴의 궁극적인 목적을 이루기 위한 가장 중요한 영역이라고 볼 수 있다.)

3. 영역간의 진행 순서

사진출처: http://cheucheu.tistory.com/48

- 이전 MV 패턴과는 상대적으로 복잡한 구조를 지닌 것을 것을 볼 수 있으며, 패턴에 대한 진행 순서은 아래와 같다.

1. Client(최종 사용자)가 특정 Controller 영역을 호출한다.

2. 요청받은 Contoller 영역은 특정 Model 영역의 비지니스 로직을 호출해 그에 대한 수행 결과(보통 DB 연동을 통한 데이터들의 집합이다)를 반환받는다.

3. Controller는 Model 영역을 통해 반환받은 데이터들의 집합을, 특정 View를 호출해 클라이언트에게 응답(제공)할 UI를 만들도록 한다.

- 패턴 진행 순서: Controller >> Model >> Controller >> View

- 장점: 

1. 어플리케이션 유지보수 시 비지니스 로직에 대한 변경 사항이 많은 경우 추가되는 개발 비용이 현저히 내려간다.(Contoller 영역을 통해 Model과 View 영역간의 코드 결합도를 현저히 낮춤으로써 Model 영역의 비지니스 로직 변경 시 해당하는 View 영역의 변경 사항이 줄어든다.(하지만 이는 아래 단점에서도 볼 수 있듯이 Controller 영역을 어떻게 설계하느냐에 따라 크게 달라질 수 있는 부분이기도 하다.))

2. Contoller 영역을 통해 전체 어플리케이션 코드 관리가 용이해진다.(이는 위 장점과 마찬가지로 유지보수 시에 대한 또 다른 장점이며, 결국 이 또한 Model과 View 영역간의 코드 결합도를 낮춤으로써 나타나는 결과이다.)

- 단점: 

1. 이전 MV 패턴과는 달리 좀더 복잡한 개발 구조를 통해 초기 개발 비용이 올라간다.(단순히 생각해도 이전에 없었던 Contoller 영역의 추가로 인해 초기 개발 비용이 상승하는것은 너무도 당연한 일이다.  다시말해 영역들간의 좀더 세밀한 역활 분기로 인해 설계 및 작성해야 할 코드량이 많아진다는 것이다.)

2. 앞서 말했듯이 MVC 패턴의 복잡한 아키텍처로 인해 각 영역에 대한 재 사용성은 이전 MV 패턴에 비해 많은 부분 좋아졌지만, 그 만큼 새롭게 추가되는 Contoller 영역의 역활이 중요해졌으며, 만약 개발이 잘 못 되었을 경우 어플리케이션 전체에 미치는 악 영향이 매우 커질 수 있다.

4. JavaScript로 구현한 MVC 패턴의 예

- 화면 UI는 이전 MV 패턴과 동일하며, 아래 작성된 패턴에 대한 설명은 코드 상 주석으로 표기하였다.

참고 사이트:

MVC(Model / View / Controler) 패턴:

http://blog.naver.com/yellobox62?Redirect=Log&logNo=80048634644