JavaScript 로 본 MVC 모델

2006.09.12 13:35

보통 웹어플리케이션을 구현하는 과정에서 항상 나오는 얘기는 MVC 패턴으로 뷰와 모델, 컨트롤러를잘 분리해서 개발을 해야한다 라는 것이다.

이런 과정에서 지금껏 아무생각 없이 자바스크립트 언어를 사용해오던 방식 - 자바스크립트를 화면 랜더링,property변경, form유효성검증 등의 HTML 의 보조용도로 사용해 오던 것 - 이 아니라, 화면 계층의 메인 프로그램언어로서 사용하게 됨으로써 점점 복잡한 스크립트 언어를 사용하게 되고 요즘에서는 Ajax 라는 용어로 요약되는것 처럼, 잘못된스크립트 코드의 남용은 곧바로 유지보수가 거의 불가능한 스파게티 코드를 양산해내게되고 있다.

일단 자바스크립트라는 것을 이해하는 차원에서 위의 MVC 모델을 적용해서 이해해볼 필요도 있겠다. 약간은 억지스런 느낌도 있지만, 이렇게 이해하면 나름대로 머릿속에 쏙쏙.. 들어오는 느낌을 가질수 있겠다.

코드 예

[CODE]

function sample(id, element){

this.id = id;

this.div = element;

this.div.onclick = this.clickHandler;

}

[/CODE]

위와 같은 함수를 만들었다고 생각하자. 이경우 각각 모델, 뷰, 컨트롤러에 해당하는 부분은 어떻게 적용할 수 있을까?

1. 모델 : sample 이라는 객체 자체가 일종의 모델이라고 할 수 있다. id 와 div 속성을 가지고 있는 모델.

2. 컨트롤러 : 모델의 div 객체의 onclick 이벤트를 처리하는 함수가 clickHandler 라고 연결 되어 있는데, 이때 이벤트를 처리하는 이 clickHandler 라는 함수가 컨트롤러라고 생각할 수 있다.

3. 뷰 : sample 함수를 호출할때 넘어오는 객체 element 는 뷰단에서 이벤트를 발생시킨 객체를 의미한다. element라는 파라미터로 넘어온 객체가 뷰라고 할 수 있다.

이렇게 자바스크립트 코드내에서도 MVC 를 적용해서 생각한다면 스크립트 내에서 이벤트를 처리하는 함수를 구현하거나 이해할 때 혼란스러운 부분을 줄일 수 있을 것 같다.

즉 브라우저가 동작하는 방식에서 이해해본다면 브라우저는 DOM 엘리먼트를 클릭하는 경우 해당 이벤트의 처리 함수의컨텍스트로 DOM 엘리먼트를 지정하게 되고 이 이벤트의 정보를 담은 Event 객체를 생성해서 인자로 넘겨주게 된다는 의미.

신고

나는 자애로운 군주(Benevolent Ruler) ??

2005.10.31 18:40

Kingdomality - The Benevolent Ruler

중세시대의 직업으로 알아보는 당신의 인성??

당신의 인성 유형은 ‘자애로운 군주(Benevolent Ruler)’이다. 자애로운 군주는 중세에 번성했던 대부분의 왕국에존재했던 역할이다. 당신은 이상적인 사회를 꿈꾸는 몽상가이다. 당신의 최우선 목표는 당신이 속한 세계의 사람들이 겪고 있는문제를 해결해주는 것이다. 당신은 자신이 그리는 이상적 세상에서 모든 이들이 행복해지기를 간절히 원하는 사회 개혁가이기도 하다.당신은 인류의 고통과 궁핍에 특히 민감한 반응을 보인다. 당신은 대개의 경우 스스로 인식하는 문제에 대한 해결책을 구상하고구현할 기술과 이해력을 갖추고 있다. 당신의 긍정적인 측면은 창조적인 설득력과 카리스마를 갖추었다는 점과 사회 문제에 관념적인관심을 갖는다는 점이다. 부정적 측면은 때로 비현실적인 감상에 빠지거나 산만하고 충동적인 성향을 보이기도 하고, 또 때로는교활하게 작위적인 행태를 드러내기도 한다는 점이다. 흥미롭게도 당신의 인성 성향은 오늘날의 기업 왕국에도 잘 들어맞는다.

신고


티스토리 툴바