JasonPA

• Part 1: 31 minutes
• Part 2: 25 minutes
• Part 3: 11 minutes
• Download slides (zipped PowerPoint file)

자바스크립트로된 라이브러리 혹은 프레임웍 들을 살펴보다보면 눈엣 가시처럼 거슬리는 코드들이 보인다. 평소에 보지못한방식이라서 그럴 수도 있고, 워낙 고수들이 만들어놓은 자바스크립트 고유의 장점들을 살려서 작성해놓았기 때문일 수도 있다.

어쨌든 그중에 자바스크립트를 생성할때 네임스페이스를 구현하는 방법 등을 둘째 치더라도 (보면 그냥 이해가 되는 부분이기도 하니까) 왜 이런 라이브러리들은 프로토타입 객체를 통해서 함수들을 선언해 놓을까?

가장 큰 이유는 개인적인 생각에서는 메모리의 문제가 아닐까 한다. 물론 다른 이유도 많겠지만...

메모리의 측면에서 보기위한 예를 들면:

function mySample() {

var field1 = "test";

var today = new Date();

this.todayis=function(){

alert("Today is " + this.today);

}

}

위와 같은 함수가 있다고 생각해보자. 이때 todayis 라는 함수는 오늘 날짜를 alert 창으로 찍어서 보여줄 것이다.이런식으로 mySample 함수 생성 메소드 내부에 함수를 추가하는 방식을 사용하는 경우에는 mySample 객체의 인스턴스가생성될때 마다 매번 함수를 새로 만드는 형태가 된다. - 객체를 대량으로 만드는 경우에는 메모리 사용면에 있어서 취약할 수 있다.

이런 고려사항때문에 대부분 Prototype 객체를 사용해서 함수를 연결하는 형태를 취하고 있는 것으로 생각된다.
하지만 Prototype 을 사용하는 경우에 주의해야 하는 사항은 가비지 문제이다.

함수내부에 함수를 추가한 형태의 경우에는 내부적으로 클로저가 만들어진 경우인데 (클로저는 함수 내부에 또 다른 함수를 구현하는 경우에만 동작한다), 이때 생성 메소드에서 DOM 엘리먼트를 다루는 경우에는 함수의 지역 변수로 선언된 내용이 가비지 컬렉터에게 수집되지 않는 문제점이 발생할 수 있다.

쩝... 여러가지고 JavaScript 코드를 사용해서 뷰단에서 멋진 효과및 이벤트 처리를 위해서는 많은 고려해야할 사항이 있는 것 같다.

보통 웹어플리케이션을 구현하는 과정에서 항상 나오는 얘기는 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 객체를 생성해서 인자로 넘겨주게 된다는 의미.