JavaScript로 구현한 MV 패턴
1. MVC 패턴이란?
MVC 패턴이란 하나의 어플리케이션을 크게 Model, View, Controller이라는 세 영역으로 구분하고 각 영역간의 코드 결합도를 최소화 시키는 개발 패턴 중 하나이다.
- 다시말해 패턴의 주요 목적은 Model과 View 영역간의 코드 결합도를 최소화 시키는데 있다고 볼 수 있다.
2. 영역간의 역활 정의
Model: 어플리케이션에 비지니스 로직과 사용되는 데이터를 다루는 영역이다.
- 보통 비지니스 로직에 필요한 데이터는 해당 DB에 의해 관리되고, 그 데이터를 다루는 연산은 SQL 문법을 통해 구현된다.
View: 최종 사용자에게 보여줄 프리젠테이션 로직을 담당하는 영역이다.
- 웹으로 말하자면 정적 리소스로는 HTML, 동적 리소스로는 ASP, PHP, JSP 등의 파일로 나뉠 수 있다.
Controller: 이 포스트에서 다루는 코드들은 MV 패턴으로만 구현할 것이기에 이번 포스트에서는 Controller 영역은 설명하지 않겠다.
3. 영역간의 진행 순서
사진출처: http://cheucheu.tistory.com/48
- 위 그림은 초기 웹 개발 시(하지만 현재도 많이 사용되고 있는 개발 패턴 중 하나이다) 많이 사용되던 패턴이며, 패턴에 대한 진행 순서은 아래와 같다.
1. Client(최종 사용자)가 특정 View(HTML, ASP, PHP, JSP) 영역을 호출한다.
2. 요청받은 View 영역은 특정 Model 영역의 비지니스 로직을 호출해 그에 대한 수행 결과(보통 DB 연동을 통한 데이터들의 집합이다)를 반환받는다.
3. Model 영역을 통해 반환받은 데이터를 가공하여, 클라이언트에게 응답(제공)할 UI를 생성한다.
- 패턴 진행 순서: View >> Model >> View
- 장점: 프로젝트 유지보수 시 비지니스 로직에 대한 변경 사항이 많지 않은 경우 개발 비용이 상대적으로 적게든다.(사실 아무리 작은 프로젝트라 하더라도 이런 경우는 흔하지 않다.)
- 이 말은 View에 대한 특정 컨트롤을 따로 작성할 필요가 없으므로 상대적인 개발 비용이 적게 든다는 말과 같다.(단 이는 MVC 패턴에 대한 상대적 예라는 것을 염두해야 한다.)
- 단점: View와 Model 영역간의 결합도가 상당히 높아 View 영역의 재활용성이 떨어진다.(Model 상의 비지니스 로직 변경 시(프로그램 설계 변경/추가/삭제 시) 그것들을 호출하는 각 View의 프리젠테이션 로직들을 전부 수정해야한다.)
4. JavaScript로 구현한 MV 패턴의 예
- 아래 작성된 패턴에 대한 설명은 코드 상 주석으로 표기하였다.
참고 사이트:
MVC 패턴이란?
http://cheucheu.tistory.com/48
얼마 전 그룹에 올라온 글을 보고...
얼마 전 활동 중인 그룹(undefinedD)에 새롭게 올라온 글을 본 후 JS 생성 패턴에 대해 나름 다시한번 정리해 보는 시간을 가졌다.
먼저 아래는 그룹에 올라온 글에 대한 전문이다.
1. JQuery 객체 생성 패턴
- 아래는 실제 JQuery 코드 상에서 사용되고 있는 객체 생성 패턴의 예이다. 하지만 이와 같은 생성 패턴은 JS Prototype 순환 참조로 인해 포함되지 않아야 할 메서드($.init(name))가 포함되는 문제가 존재한다.
var $ = (function(){
var $ = function(name){
return new $.fn.init(name);
}
$.fn = $.prototype = {
init: function(name){
name = name || '';
this.name = name;
return this;
},
getName: function(){
return this.name;
}
}
$.fn.init.prototype = $.prototype;
return $;
}());
console.log('A: ' + $('mohwa').init); // init function
console.log('A: ' + $('mohwa').getName()); // mohwa
2. 수정된 객체 생성 패턴
var $ = (function(){
var $ = function(name){
return new init(name);
}
function init(name){
name = name || '';
this.name = name;
return this;
}
init.prototype.getName = function(){
return this.name;
}
return $;
}());
console.log('B: ' + $('mohwa') === $('mohwa')); // false
console.log('B: ' + $('mohwa').init); // undefined(이전 패턴과 달리 $.init(name) 메서드가 존재하지 않는다.)
console.log('B: ' + $('mohwa').getName()); // mohwa
3. 생성자 + 싱글톤 패턴
- 위 생성자 패턴에 싱글톤 패턴을 추가 하였다.
var $ = (function(){
// 싱글톤을 위한 인스턴스 private 변수
var instance = null;
var $ = function(name){
return new init(name);
}
function init(name){
name = name || '';
this.name = name;
// 싱글톤 패턴
return instance = instance ? instance : this;
}
init.prototype.getName = function(){
return this.name;
}
return $;
}());
console.log('C: ' + $('mohwa') === $('mohwa')); // true
console.log('C: ' + $('mohwa').getName());
4. 객체 생성자(Class)를 강제 시킨다.
- instanceof 연산자를 통해 객체 생성자 함수($(name))를 강제 시키는 코드를 추가시킨 패턴이다.
var $ = function(name){
name = name || '';
var _this;
if (!(this instanceof $)) _this = new $(name);
else _this = this;
_this.name = name;
return _this;
};
var $$ = function(){
}
console.log('D: ' + $.call(new $$(), 'mohwa').name); // fn.call(context, arguments) 메서드를 사용해 호출한다.
console.log('D: ' + new $('mohwa').name);
보수(음수 표현 방법)에 대한 포스트를 읽고...
참고 사이트:
보수란?
http://211.228.163.31/30stair/complement/complement.php?pname=complementrms
JavaScript 보수 계산기(간간히 오류가 존재한다.)
http://www.iwiz.pe.kr/bbs/view/webdev/article_51.html
N진법의 보수1
http://cms.kut.ac.kr/user/yjjang/dig12/ch02_radix.pdf
N진법의 보수2
