어제도 무척이나 덥더니, 오늘도 매한가지군요;; 집에 에어컨이 없는관계로 너무나 더운 초여름을 맞이하고 있습니다. 어제 새벽엔 개인적인 사건사고가 끊이지 않아~ 피곤한 밤이기도 했습니다. ㅎㅎ

오늘은 저번 강좌에서도 밝혔듯이 bind 개념의 후속타인 extend에 대해서 알아볼까 합니다. PJS에서 extend의 개념은 두가지로 쓰이고 있습니다. 하나는 확장이며, 다른하나는 상속입니다. 어찌보면 두개의 개념이 같을 수도 있습니다. 같은 행동을 취하지만 개념은 다르다라고 말씀드리는게 더 정확하다고 말하고 싶군요.

Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}

먼저 extend의 소스부터 보시죠. 감이 오시나요? 그렇습니다. 마냥 읽어서 shallow copy를 하고 있습니다.
Shallow copy는 일명 '얕은 복사'입니다. 얕은 복사는 대상 오브젝트를 참조하는 참조변수로부터 복사되어지는 변수만을 가지는 복사를 말합니다. 이해가 잘 안가신다구요? 그렇다면 저~ 뒷쪽에 변수의 scope를 설명하는
부분을 참고하시면 이해가실겁니다. shallow copy의 반대는 뭘까요? 그렇습니다 deep copy(깊은 복사)입니다. 너무 쉽죠? 깊은복사는 말그대로 객체를 복사할때 참조변수가 주소값만을 가지는게 아니라 새로운 객체자체를 가지는것을 말합니다. 이쯤하면 shallow copy와 deep copy가 구분되어지리라 생각합니다.

음, 제가 말하고 싶은건 'extend는 shallow copy다' 라는 것입니다. ㅎㅎ

그럼 다시 extend의 목적인 두가지를 알아보겠습니다.

첫번째, '확장'입니다.
확장이란 말그대로 무언가를 넓히는 것입니다. 그게 개념이든  메소드이든 말이죠. 그럼 확장의 extend를 언제
사용할까요? 바로 객체의 메소드 및 프로퍼티를 추가할 때 입니다. 이해가시죠? 어느 객체에 필요한 프로퍼티와 메소드들을 추가하여 없던 기능들을 넣음으로써 확장하는 것입니다. 이것을 PJS에서는 아래와 같이 사용하고
있습니다.

Object.extend(Hash, {..toQueryString : function(){}..toJSON : function(){}...}) 

처음에 Hash를 생성할 당시에는 toQueryString이란 메소드가 없다가 확장을 통해 메소드를 추가하는
모습입니다.

두번째의 개념은 '상속'입니다.
상속이란 확장의 확장편이라고 해야할까요? ㅎㅎ 그냥 의미그대로 해석해보겠습니다. 상속이란 위에서 그냥
내려받아 내것처럼 사용하는 것을 말합니다. 쉽게 저는 빵을 못만들지만 아버지가 빵을 만드는 방법을
알고있다면, 자식인 제가 아버지의 재능을 상속받아 저또한 빵을 만들 수 있다는 이야기 입니다.
이해가 가시는지요. 그럼 PJS에서는 어떻게 상속의 개념을 설명하는지 코드를 보겠습니다.

Object.extend(Hash.prototype, Enumerable)

아주 심플하군요. 소스설명은 Hash 오브젝트가 Enumerable이 사용하는 메소드들을 상속받아서 Hash에서도
사용할 수 있다는 이야기 입니다. 상속이란 이런 개념인거죠. 내가 못하는거 상속받으면 상속해준 것의 행동을 할 수 있다. 이해가 되시죠? 그렇습니다. 그렇게 어려운 개념이 아닙니다.


오늘은 여기까지 작성토록하고 다음 강좌에서 다시 만나겠습니다.

posted by blankus

이번 강좌는 PJS의 11장에 해당되는 Function에 대해서 알아볼까 합니다.
PJS의 중간에 다른 챕터들도 있지만 일단 다른 소스를 분석하려면 필수 개념들이 몇개 필요하다고 전 강좌에서 말씀드렸습니다. 그중에 하나인 bind의 개념을 소개하고자 챕터 11인 Function을 먼저 이야기하고자 합니다.

소스의 길이가 그리 길지 않으므로 원소스를 일단 보도록 하겠습니다.

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

이것과 비슷하게 생긴 bindAsEventListener 라는 것도 있지만 대동소이하므로 아랫부분에서 간단하게
알아보겠습니다.

뭐 이렇게 생긴놈입니다. ㅎㅎ 이해가 잘 안되신다구요? 잠시 기다려주세요. 일단 문제부터 풀어봐야 합니다. 문제는 아래와 같습니다.

window.name = "window object"

var foo = {
 name : "foo object",
 scope : function(){
  alert(this.name);
 }
}

function fx(f){
 f();
}

var f = foo.scope.bind(foo);

fx(f); ----------------------------- ①
fx(foo.scope); -------------------- ②

1번의 답과 2번의 답. 예상되시는지요? 만약 정확하게 맞추시고 이유도 아신다면, bind의 개념은 이미
정립되었다고 봐도 무방합니다.

1번의 답은 "foo object"이고 2번의 답은 "window object"입니다. 답을 맞추셨나요? 그렇다면 이유도 설명할 수 있나요? 있다면~ 패스~! 없다면 아래의 글을 봐주세요. ㅎㅎ

var foo 는 name이라는 멤버 프로퍼티를 가지고 있으며 scope라는 멤버 메소드를 가지고 있습니다. 멤버라는 것은 객체에 속한 오브젝트라는 뜻입니다. 다들 아시죠? scope라는 멤버 메소드는 this.name이라는 값을 출력하는 행동을 담당하고 있군요.

function fx()는 인자로 함수를 받아 실행하는 단순구조로 되어있습니다. 아마 처음보신 syntax일 수도 있겠습니다. 처음보신 분은 "저런게 가능하다"정도로만 이해주시면 될듯합니다. 저런 syntax가 가능한 이유는
자바스크립트에서는 인자로 오브젝트를 넘길 수 있으며, 자바스크립트에서 함수또한 함수 오브젝트 이므로
함수도 인자로 넘길 수 있는 것입니다. 계속가죠~

var f = foo.scope.bind(foo); 라고 되어 있는데, 일단 뭔가를 하는놈인지 알 수 없지만, 그렇다 치고
넘어가시고 다음줄을 봐주세요.
일단 2번부터 살펴보면, 위에서 설명한것 처럼 객체의 멤버 메소드인 foo.scope를 함수의 인자로 넘기고
있습니다. 여기서 부터 함정이 있는데요, 그것은 다음과 같습니다.

fx(foo.scope)의 답이 "foo  object"라고 생각하신 분은,
  1. 함수가 실행된다? 함수는 this.name을 출력한다.
  2. 함수안에 name이라는 놈이 있다? 그놈을 출력한다
  3. 그리하여 답은 "foo object"가 출력된다.

제가 예상한게 맞았나요? 하지만 위에서 말씀드렸듯이 답은 아닙니다. 정확한 답은 이 한줄로 표현할 수
있을것 같습니다.
"함수의 scope는 구현시점이 아닌 실행시점의 scope를 가진다" 무슨말이냐면,

fx(foo.scope)를 수학에서의 대입법을 통해 알아보면, fx(alert(this.name)) 이렇게 됩니다.
즉, 단순한 alert(this.name)을 출력하는데, 제가 묻겠습니다. this.name은 누구입니까? "foo object"입니까? 아닙니다. 바로 "window object"입니다. 이해가 잘 안가시는 분은 제가 밑에서 강의한 "변수"부분을 다시 읽어주시기 바랍니다. 그 글을 읽으시면 충분히 이해하시리라 믿습니다. 그래도 안읽고 이것만 보시는 분을 위해
간략하게 설명하면 "변수의 scope는 전역변수보다 지역변수가 우선하며, 지역변수가 존재하지 않을시 그위의
객체의 변수(더이상 없으면 전역변수)를 참조한다"라고 말할 수 있습니다.

그렇다면 어떻게 하면 이런 scope의 변경없이 원하는 답을 얻도록 함수를 실행할 수 있을까요? 그렇습니다.
답은 bind 메소드 입니다. bind의 형태를 자세히 보시면 bind의 인자로써 참조객체를 넘기고 있습니다.

var f = foo.scope.bind(foo);

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

그리고 bind를 설명드리면 var __method = this는 bind가 참조하고 있는 메소드가 되겠습니다. 위에서는
var __method = scope함수객체 가 되겠군요. 그리고 args = $A(arguments)라고 되어있습니다. $A메소드는
전 강좌에서 알아봤듯이 인자로 넘어온 객체를 배열객체로 만들어 리턴합니다. 여기서는 foo 객체자체가 배열로 들어오겠군요. 왜냐구요? .bind(foo)로 넘겼잖아요 ^^
object = args.shift()는 args가 가진 배열의 요소중 첫번째것을 object에 담고 나머지는 다시 args에
셋팅하게 됩니다. 예를 들면, args가 3개의 배열요소[1,2,3]을 가지고 있다고 합시다 그럼 object = [1]이
되고, args는 [2,3]이 됩니다. 이해하셨는지요? shift라는 메소드가 그런 역할을 하고 있습니다.
그럼 여기서는 어떻게 되나요? arguments로 넘어온 것은 foo객체 하나이므로 args의 크기는 1인 배열이
되겠군요, 그리고 바로 shift로 잘라내고 나니 object에는 foo객체가, args에는 빈배열이 되어버렸군요. ㅎㅎ

여기까지는 쉽게 이해하셨지요? 구분을 좀더 보시면 return을 함수로 하고 있군요. 이런 구문은 Class.create() 에서 다뤄봐서 알겠지요? ㅎㅎ 그럼 계속 설명을 하겠습니다. 여기서 오해가 좀 생길 수 있으니 정신을
집중하세요 ^^

function() {
    return __method.apply(object, args.concat($A(arguments)));
  }

위 소스가 바로 리턴되는 함수의 원모습인데, 여기서 보시면, __method는 scope 인것을 이미 확인했고, object는 foo객체가 되고 args에는 아무것도 들어 있지 않습니다. 빈 배열이죠. 그다음 논란이 되는
구문인 args.concat($A(arguments)) 입니다.

많은 사람들이 왜 args에 다시 $A(arguments)를 다시 concat(두개의 배열을 합쳐 새로운배열을 리턴)하느냐고 묻습니다. 하지만 단호하게 대답하겠습니다. 위 구문에서의 arguments와 args = $A(arguemnts)에서의 arguments와는 다릅니다. 왜일까요? 네, 그렇습니다.
바로 return __method.apply(object, args.concat($A(arguments))) 가 정의된, 구현된 시점에서의  arguments가 아닌 실행시점의 arguments이기때문에 다른 것 입니다. 이해가 되셨는지요?

좀더 부연설명을 드리면, arguments는 실행시점에서 함수가 인자로 넘어온 값을 처리하는 native 컬렉션
오브젝트입니다. 그러므로 var __method = this, args = $A(arguments), object = args.shift(); 여기에서
정의된 $A(arguments)와는 다른것입니다.  여기까지 이해하셨다면 bind의 개념은 이미 다 정립된 것입니다.

bind를 말로 풀어내면, "함수가 다른 함수안에서 실행될때 자기자신의 scope가 없어지는 것(멤버 프로퍼티에 접근하는 this 키워드 사용시)을 방지하기 위해 실행될 함수가 가지는 객체의 모든 것을 인자로 넘겨 실행시에 scope가 변경되지 않도록 하기 위함" 이라고 정의할 수 있겠습니다.

약간은 어려운 개념일 수도, 이해가 잘 안가실 수도 있는데 수학에서의 대입법을 통해 직접 확인해 보심이
좋을 것 같습니다. 백문이 불여일타 라고 하지않습니까? ㅎ 직접 해보시면서 제글을 보시면 더 확실히 이해가 가실거라 생각합니다.

위에서 잠시 언급한 bindAsEventListener의 모습은

Function.prototype.bindAsEventListener = function(object) {
  var __method = this, args = $A(arguments), object = args.shift();
  return function(event) {
    return __method.apply(object, [event || window.event].concat(args));
  }
}

이렇게 생겼는데, bind와 거의 유사하고 다른점이 하나있다면, apply할때 event객체를 args배열의 앞쪽에 먼저 붙여준다는 것외엔 다를것이 없습니다. 따로 설명은 드리지 않겠습니다.

이상으로 PJS의 11장에 해당하는 Function에 대해서 알아봤습니다. 자바스크립트의 syntax에 약하신분은 좀
버거운 내용이 아니였나 싶은데, 몇번을 읽고 또 읽고, 직접 실행을 해보면서 하시면 충분히 될 것으로
생각합니다.  그럼 다음 강좌때 뵙기로 하고 오늘은 여기까지 하겠습니다.

posted by blankus

오랜만에 다시 포스트 하는것 같습니다. 그동안 개인적으로 좀 바쁜것이 있어서 블로그에 글을 포스트하지
못했습니다 ㅠㅠ 오늘은 회사의 당직이라, 편안히 글을 써볼까 합니다. ㅎㅎ

제목에서와 같이 오늘은 Class  입니다. 이부분에 대해서는 크게 쓸것은 없지만 개념적인 부분은 집고
넘어가겠습니다. 우리는 자바스크립트로 클래스를 생성할때 어떻게 하고 있습니까? 보통 이렇게 하겠지요?

var Test = function(){
  ..........
}
var test = new Test();

여기서 Test는 객체이고 test는 객체의 인스턴스가 되겠죠. 물론 Test 객체를 정의하는 방법은 이것말고도 많습니다만 일반적으로 저렇게 많이들 하시죠. 구조적으로 하자면 Test객체를 구현하는 "구현부"와 new 를 통한
객체생성을 하는 "생성부"로 나눌 수 있겠습니다.

그러면 PJS에서는 어떻게 쓸까요? 다음 코드를 보시죠.

var Animal = Class.create();

Animal.prototype = {
  .............
}

var snake = new Animal("b_snake","12");

이런식으로 사용하며 var Animal = Class.create() 부분을 "선언부", Animal.prototype = {...}을 "구현부", new Animal 부분이 "생성부"로 나눌 수 있습니다.

그럼 1번방식과 2번의 PJS방식의 차이점이 무엇일까요? 그렇습니다. 선언부입니다.
PJS에는 명시적으로 클래스의 생성에 대해서 "선언부"를 가지며, 개념적인 의미를 부여합니다. 즉, "나는
클래스로서 생성되었습니다, 그러니 저를 클래스로 인정해주시고 부디 다음부터는 new를 통해 생성해서
인스턴스를 만들어 사용해 주세요"라고 말이죠. 혹자는 이렇게 이야기를 합니다.
왜 불편하게 한줄을 더 추가하면서 까지 저렇게 쓸까요? 단순히 개념적인 것이 전부인가요?

아닙니다. 물론 내부적으로 개념적인 부분이 사용되는 것은 맞습니다. 하지만 그것이 다는 아닙니다.
PJS의 원 소스를 보시죠.

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

create가 실행되면 함수를 리턴합니다. 어떤 함수냐구요?  바로 아래의 함수입니다.

function() {
      this.initialize.apply(this, arguments);
}

쉽게 표현하자면, var k = Class.create() 라고 하면,
var k = function(){this.initialize.apply(this, arguments);} 이런식으로 되겠죠. 쉽게 수학에서의 대입을
생각하시면 됩니다. 그리고 우리가 k 객체를 생성하기 위해 new k()를 하는 순간 코드는 다음과 같이 변합니다.

new function(){this.initialize.apply(this, arguments);}()

위에서  this는 바로  new function, 자기자신을 나타냅니다. this.initialize 또한 new function안의
멤버이기때문에 new function에서 가지고 있어야할 객체입니다. apply는 native 메소드로 뭔가를 실행시켜주는 역할을 합니다. 인수로는 자기자신과 실행할 메소드의 arguments를 받구요. 비슷한 메소드로는 call이
있습니다. call은 이렇게 사용합니다. call(obj, [param1, param2, param3....])
다시 본문으로 돌아가서, 위 구문을 말로써 해석하면 이렇게 됩니다.

"새로 정의된 함수(new function)의 initialize 메소드를 실행(apply)하세요,
인자는 arguments로 넘겨드립니다"

여기서 우리는 알게됩니다. Class.create()로 생성한 클래스는 반드시 멤버메소드로 initialize가 존재해야
한다는 것을,  JS에는 존재하지 않는 "생성자"의 개념을 사용하고 있다는것을.

var Animal = Class.create();

Animal.prototype = {
  initialize : function(name, age){
    this.name = name;
    this.age = age;
  },
  getName : function(){
    return this.name;
  }
}

var snake = new Animal('dog', '5');

위의 소스는 다시 분석하지 않아도 여러분들이 쉽게 이해하실 거라 생각합니다.
참고로 생성자는 클래스가 생성될때 초기화를 담당하게 됩니다.

이상 Class에 대해서 설명을 드렸는데 감이 오시는지 모르겠네요. 사실 PJS에는 여러가지 필수 개념들이 몇개
있습니다. 이것을 이해하지 않고서는 PJS의 소스를 이해하시는데 어려움이 있을것이라 생각합니다.
각 장을 설명드리면서 이번과 같이 개념정리를 하는것이 있을텐데, 잠시 먼저 말씀드리면
bind, extend, hash, abstract 입니다. 이 개념들은 천천히 알아보도록 하고, 토요일 오후인데
좋은주말 보내세요~ ^^

posted by blankus

[3, 5, 6, 1, 20].without(3) 
// -> [5, 6, 1, 20] 

[3, 5, 6, 1, 20].without(20, 6) 
// -> [3, 5, 1]








posted by blankus

회사일이 많아 퇴근전에 글을 쓰고 있네요..ㅎㅎ 요즘 Ajax로 이런저런걸 하다보니 일이 많군요..ㅎㅎ
오늘부터는 Ajax의 프레임워크인 'PrototypeJS(이하 PJS)'를 강좌로 해볼 생각입니다. 사실 개인적인 생각으론 PJS가 프레임워크라기보단, 라이브러리에 가깝다고 생각합니다. 제가 자바개발자라서 그런지 프레임워크라고
하면 스트럿츠나,  스프링 같은 것이 먼저 떠오르기때문이죠.

위에서 나열한 자바 프레임워크들은 내부적으로 모두 MVC를 기반으로 작성되어 있으면서, 사용자로 하여금
MVC에 맞춰 개발되도록 도와줍니다. 물론 PJS도 틀을 제공하긴 하지만 MVC자체를 제공해주지는 못하고
있습니다. 나름대로 지금껏 웹개발을 해오면서 제대로된 MVC를 적용해본적은 별로 없습니다. 그나마 현재 근무하고 있는 회사에서 Ajax로 클라이언트단의 MVC를 구현하여 개발해놓게 다행이라고 해야하나? ㅎㅎ 암튼 한국 웹개발시장이 현재 그러한듯 합니다. 얼마 안되는 시간에 빠른개발을 원하다보니, 제대로 이해도 안되는
상황에서 주먹구구식으로 프레임워크에 맞춰서 개발하거나, 그도 안되는 작은 회사의 직원들은 Jsp model 1방식(jsp일때)으로 개발을 많이 하고 있습니다. "빨리빨리"의 모습이 좋은모습일 수도 있겠지만, 결코 좋은면만
가진것은 아닌것 같습니다. ㅎㅎ 이야기하다보니 또 주저리 주저리 떠들고 있군요..ㅋㅋ

오늘은 제목처럼 " PJS의 Function부분"을 진행해보자구요.
이부분은 제가 밑에 포스트한 변수범위와도 관련이 있는 부분입니다. 그 강좌를 보신 분이라면 아마도 쉽게 이해하실 수 있을거라 생각합니다.

<script>
   window.name = "the window object";

   function scopeTest(){
      alert(this.name);
   }

   scopeTest(); -------------------- ①

   var foo = {
      name : "the foo object",
      otherScopeTest : function(){
         alert(this.name);
      }
   }

   foo.otherScopeTest();------------- ②
</script>

위의 소스를 보시지요. ① 부분의 실행결과는 "the window object"가 리턴되겠죠. ② 부분의 실행결과는
"the foo object"가 되겠죠. 이해가 잘안가시는 분은 밑의 강좌를 한번 다시 읽어주세요. 계속 설명드리죠.
보시다시피 "오브젝트 안에서는 지역변수가 전역변수보다 우선한다"가 성립하는 부분입니다. 그럼 아래 코드를 봐주세요.

<script>
 var obj = {
   name : "A nice demo",
   fx : function(){
     alert(this.name);
   }
 };
 
 window.name = "I am such a beautiful window";
 
 function runFx(f){
   f();
 }

obj.fx(); ---------------------------------------- ①

 runFx(obj.fx);----------------------------------- ②

 var fx2 = obj.fx.bind(obj);
 runFx(fx2);-------------------------------------- ③
</script>

1번의 실행결과가 예상이 되나요? 그렇습니다. obj의 지역변수격인 name이 있기때문에 결과는
"A nice demo"입니다. 그러면 1번과 2번의 차이점은 무엇인가요? 네, 함수를 직접 호출해서 사용하는것과,
함수를 다른함수의 인자로넘겨 실행하는것이 다릅니다. 어떻습니까? 결과가 예상되십니까? "A nice demo"라고 답하신분이 대부분일 거라 생각합니다.. 그렇습니다.. 오답입니다 ^^; 답은 엉뚱하게도 "I am such a beautiful window"가 됩니다. 왜 이런일이 생기는 걸까요? 눈치 빠르신분은 아~! 하고 이야기 하실지도 모르겠네요.
바로 Scope의 변경때문입니다. 단순하게 obj.fx()를 실행하는 것은 오브젝트 안의 scope를 가지고 실행하기에 this.name을 찍으면 지역변수격인 "A nice demo"가  찍힙니다. 허나 두번째 방법은 좀 다릅니다.
2번의 구문을 다시 표현하면 아래와 같습니다.

function runFx(){
   alert(this.name);
}

이해가 안된다구요? 자 천천히 봅시다. runFx의 인자로 함수가 넘어갔습니다(함수를 포함한 오브젝트가
아닙니다). 그리고선 인자로 넘어온 함수는 runFx의 내부에서 실행되게 됩니다. 허나 인자로 넘어온 함수는  this.name을 찍으려고하나 runFx의 내부에는 name이란 지역변수가 존재하지 않습니다. 그래서 그 위인 전역변수중에 이름이 name 인것을 찾아 출력하려고 하고, 그결과 "I am such a beautiful window"가 출력되게 됩니다. 이해가 가셨는지요.

그럼 3번을 볼까요? 2번과는 다르게 bind라는 함수를 거쳐 runFx로 함수를 보냅니다. 결과는 ? 놀랍게도
"A nice demo"가 출력됩니다.

어째그 이런결과가 나올까요? PJS의 소스코드를 잠시 참고합니다.

Function.prototype.bind = function() {

  var __method = this, args = $A(arguments), object =  args.shift();
 
  return function() {
    return __method.apply(object,  args.concat($A(arguments)));
  }
}

PJS에는 이렇게 정의되어 있습니다.
__method에는 this가 담기는데.. 여기에선 bind 된 것이 담기므로 obj.fx가 담기게 되고,  args에는 arguments로 넘어온 obj 오브젝트가 통으로 담기게 됩니다. $A 함수는 오브젝트를 배열 오브젝트로 변경하는 역할을 담당하고 있습니다. object는 args의 shift를 담고 있는데 shift는 배열의 첫번째것을 잘라내어 담고, 나머지는
다시 자기자신에게 담는 역할을 합니다. 그러므로 처음엔 args가 arguments의 전부를 가지고 있다가 arguments의 첫번째는 object에게 주고 나머지는 다시 args에 할당됩니다. 그리고 위에서 할당된 __method를
실행하게됩니다. obj의 모든것을 넘겨받아서 내부적으로 처리하여 실행하는거죠.
소스코드보다 말이 더 어렵네요 ^^; 하핫

Function안에 있는 bindAsEventListener 또한 같은 원리입니다. 다만 Event라는 것만 다르지 다른것은
똑같습니다. 원본소스는 아래와 같습니다.

Function.prototype.bindAsEventListener = function(object) {
  var __method = this, args = $A(arguments), object = args.shift();
  return function(event) {
    return __method.apply(object, [( event || window.event)].concat(args).concat($A(arguments)));
  }
}

위의 소스설명은 하지 않겠습니다. 제가 설명한 부분을 참고하시어 직접 분석해보세요.

이상으로 PJS에 있는 Function부분을 마치겠습니다.

posted by blankus

아래의 글을 읽으신 분은 아시겠지만, 어제 시시회 당첨영화를 보러갔드랬습니다. "뜨거운 녀석들" 제목부터가 별로 맘에 안들었습니다. 영화가 시작하고 조금후부터 사람들이 한둘씩 나가더군요.. 영화를 끝까지 보고
나왔습니다. 후회가 되었습니다. 나도 진작 나올껄 ㅠㅠ
도대체 돈이 얼마나 남길래 저런영화를 만드는 겁니까? 그런돈 있음 불우이웃을 좀 도와주세요 네???

오늘은 저번 강좌에 이어 클로져에 대해서 이어가겠습니다. 클로져에 대해서 개념이 안잡히신 분들을 위해
간략하게 정리하겠습니다.

함수안에 존재하는 지역변수는 지역변수로써 살아야하며, 함수가 죽으면 따라죽을 운명인데, 클로져는 죽어
마땅한 함수의 지역변수를 밖으로 끄집어내어 영역을 변경(확장)하는 것을 의미합니다. 물론 이한줄이 클로져를 전부 나타낼 수는 없습니다. 하지만 전 이렇게 설명하려 합니다. 다르게 설명해봤자 서로 헛깔릴게 분명
하거든요 ^^ 사람이든 변수이든 자기의 영역에서 벗어나면 안되나 봅니다..ㅎㅎ 왜냐구요? 클로져도 문제가
좀 심각하거든요... 이름하여 "Memory leak(메모리 누수)" 현상 때문입니다.

메모리 누수의 전체적 그림은 중급강좌정도에 보실 수 있겠네요. 여기서는 클로져에 의한 메모리 누수에
대해서만 다루겠습니다. 메모리 누수 모델이 몇가지 있는데 그걸 다 다루자면 제목에서 보듯이 [기초강좌]에서 범위가 벗어납니다. 우리가 좀전에 뭘 배웠습니까? 영역을 벗어나면 문제가 된다고 했지요 ㅎㅎㅎㅎ

자 다시 본론으로 가서, 클로져는 한 내부함수의 지역변수를 함수 리터럴을 통하여 밖으로 꺼내오는 것을
의미한다 했습니다. 그럼 제가 질문을 해보겠습니다. 그 한 내부함수가 종료되면 클로져에 의해 밖으로
튀어나온 변수는 어떻게 될까요? 그렇습니다... 계속 살아 있습니다. 계속 살아있으므로 부모함수가 죽었는데도 불구하고 계속 호출되어 사용됩니다. 나중에 다시 이야기 되겠지만 이것이 "IE에서의 메모리 누수 모델 1"
입니다. 보통 FireFox나 오페라 같은 브라우저는 클로져가 생성되어도 참조값이 0이면 브라우저메모리에서
GC에의해 소멸되게 됩니다. 허나, IE는 그렇지 못하여 문제가 되는거죠. 전 강좌를 열심히 보신분이라면 쉽게 이해하시리라 봅니다. 클로저의 메모리 누수는 이쯤으로 마치겠습니다. 사실 메모리 누수에 대해서는 할말이
무지 많습니다. 허나, 역시 범위를 넘기면 문제가 ㅎㅎㅎㅎ

이번강좌는 이쯤으로 해서 마무리 하겠습니다. 좋은 하루 되세요

posted by blankus