jQuery plugin 의 의미와 탐구방안

jQuery plugin 은 결국 jQuery 개체를 활용하거나 확장하거나 새롭게 정의하여 확장하는 것이라고 볼 수 있습니다.

결국 javascript object oriented programming(OOP:덩어리 지향적 프로그래밍)을 jQuery라는 framework 위에 하게 되는 것이고 jQuery라는 특성에 맞는 몇가지 프로그래밍 패턴을 익히는 것이 그 주축이라고 할 수 있습니다.

결국 jQuery plugin에 관해서 공부한다는 자바스크립트의 덩어리 지향적 프로그래밍 방법과 이를 활용한 jQuery의 확장이라는

두가지 형태 살펴보는 것이 될 것입니다.

javascript object oriented programming

먼저 JS OOP에 관해서 알아보도록 하겠습니다.

javascript에서의 OOP라고 하면 다소 생소한 느낌을 가지시는 분들도 있겠지만

전정한 의미의 프로그래밍이라고 하면 사실상 빠져서는 안될 요소라고 감히 생각합니다.

그에 대해 당연히 javascript programming에도 예외가 될 수는 없는 것 입니다.

그러므로 조금 이해하기 난해한 부분이 있더라도 조금만 인내심을 가지고 잘 이해해둘 필요가 있습니다.

그럼 JS OOP라고 하면 일반적으로 사람들은 아래의 2가지 형태로 많이 사용합니다.

1. Object 데이터 타입data type을 생성하고(instantiation) 이 instance를 확장하여 사용하는 방법입니다.

2. object를 상속하게 되는 function을 선언하고 해당 function 안에서 정의를 확장하거나 object 형에 존재하는 prototype이라는 속성(property)을 통해서 정의를 확장하며 constructor를 통해서 정의된 내용을 상속(inherit)하여 확장할 수 있는 방법이 있다.

마지막으로 1과 2를 비빔밥 처럼 말아서 먹는 경우도 있습니다.

참고로 필자는 바쁘고 배고플 때 복잡하게 영양가 따지면서 먹는 스타일이 아니라 바가지에 아마 생각없이 반찬 다 넣고 비벼먹는 스타일 입니다.

위 2가지 형태의 방식을 위와 같이 언어기술만으로 그냥 이해하라고 하면 필자는 아마 맞아도 싼 놈이 될 것입니다.

지금부터 차근 차근 풀어나가도록 할테니 이해못하는 것이 처음 읽은 사람으로써는 어쩌면 당연할 수 있다고 생각하시면 됩니다.

그리고 잘 하시는 분들은 제 의견에 수긍하는 부분과 수긍하지 못하는 부분을 머리 속으로 버무리시면서 지적질을 서슴치 않아 주시면 될 것 같습니다.

물론 위와 같은 반응 당연하다고 생각을 하지만 혹~~~~~~시 이해한다면 당신은 저 처럼 천재이십니다. 하하하

(참고로 저는 위의 2가지 방법에 관한 말을 모를 때 봤다면 이해 못했을 것입니다. 뭔 스님들끼리 나누는 화두도 아니구 어떻게 알겠어요.)

object type을 이용한 덩어리 지향 프로그래밍

이미 말씀드린 바와 같이 object 형을 instance화해서 이를 확장 하는 방법입니다.

     <script language="javascript" type="text/javascript">
        // object형의 instance생성
        var _company = new Object();

        // Property 만들기
        _company.CompanyName = "My Company";
        _company.Owner = "Me";

        //Method 만들기
        _company.AlertCompanyName = AlertCompanyName;

        function AlertCompanyName() {
            alert(this.CompanyName);
        }

        //개체 사용하기: 속성
        alert(_company.CompanyName);
        //개체 사용하기: 메서드
        _company.AlertCompanyName();

    </script>

이건 뭔가 조금 하수 같은 느낌을 줍니다.
왜 일까요? 아마도 필자 생각에는 나는 뭔가를 정의하는 개발자 정도는 된다는 럭셔리한 개발자를 꿈꿔서 그런 것이 아닐까 합니다.

하지만 JS OOP에서는 그 용도로만 보면 object형을 instance화해서 사용하더라도 평범한 경우에는 웬만하면 원하는 결과를 얻을 수 있니깐.

저의 경우에는 위와 동일한 방법이지만 아래에서 계속 될 내용으로 코딩을 줄이고 들어쓰기를 잘해줘서 사용하면 뭔가 뽀대가 나가 시작합니다. 하하 아닌가?(anonymous function.. json 궁시렁 궁시렁..)

<script language="javascript" type="text/javascript">
    var _company = new Object();
    _company.CompanyName = "My Company";
    _company.Owner = "Me";
    //익명함수를 사용하여 코드를 줄여봅니다.
    _company.AlertCompanyName = function () {
        alert(this.CompanyName);
    }
    alert(_company.CompanyName);
    _company.AlertCompanyName();
</script>

별도로 정의한 함수를 할당했던 것을 익명함수를 이용하여 바로 변수에 할당합니다.

<script language="javascript" type="text/javascript">
    //JSON 형식으로 object를 생성합니다.
    var _company = {
        CompanyName: "My Company",
        Owner: "Me",
        AlertCompanyName: function () {
            alert(this.CompanyName);
        }
    };
    alert(_company.CompanyName);
    _company.AlertCompanyName(); 
</script>

결국 object형은 instance가 생성되면서 그 모습이 흡사 dictionary(사전나 창고 같은 것으로 보면 될 것 같습니다.)과 같습니다.
key와 value를 맵핑 시키듯 넣어 주면 무조건 넣어지게 되는 것 입니다.

그래서 위와 같이 json 데이터가 바로 object 형으로 변환이 되어지는 것도록 된 것일 겁니다.

dictionary 같다는 걸 보여주는 예제를 다시 살펴보겠습니다.

<script language="javascript" type="text/javascript">
    var _company = {
        CompanyName: "My Company",
        Owner: "Me",
        AlertCompanyName: function () {
            alert(this.CompanyName);
        }
    };
    // key를 넣어서 value를 받아오듯 코딩 합니다.
    alert(_company["CompanyName"]);
    //key에 value를 할당하듯 value를 넣었다가 속성(property)사용하듯 합니다.
    _company["Location"] = "우리 사무실";
    alert(_company.Location);
</script>

위의 예제를 통해 실제적으로 object형의 특성을 알 수 있을 것이라고 생각합니다.

다시 한번 정리하면 첫번째 JS OOP는 object데이터 형의 instance를 생성하여 object데이터형인 dictionary특성을 이용합니다.

key, value를 매핑해서 속성을 만들 수 있으며 그 value로 정의 되어져 있는 function이나 익명 function을 사용하여 매서드를 만

들어 사용할 수있습니다.

나아가 json형식의 데이터를 자동으로 object 데이터 형으로 변환 할 수있으므로 json형식으로 key와 value를 맹핑하는 방법으

로 개체를 만들 수 있습니다.

그럼 마지막으로 예제를 하나 더 살펴보도록 하겠습니다.

<script language="javascript" type="text/javascript">
    var _몬스터 = {
        몬스터이름: "고블린",
        속성: "불",
        너의이름을말해봐: function () { alert(this.몬스터이름); },
        무기: {
            무기명: "나무망치",
            무게: 100
        },
        장비들:[
            {
                장비명: "거친천옷",
                가격: 500
            },
            {
                장비명: "가죽팬티ㅡㅡ",
                가격: 1000
            }
        ]
    };
    _몬스터.너의이름을말해봐();
    alert(_몬스터.무기.무기명);
    alert(_몬스터.장비들[1].장비명 + ": " + _몬스터.장비들[1].가격);
</script>

엽기적인 예제일 수 있을 것 같기도 하고 개인적 취미의 취향도 들어나고 "거시기" 해서 사용안할려고 했는데 건전하게 바꾸기도 이미 작성했으니 뭐 "거시기"해서 무례를 감안하고 그대로 올립니다.

내용만을 보시면 json value를 json으로 하면 이렇게 하위 개체를 바로 만들 수도 있고 value를 array로 하면 indexer로 만들 수

있습니다.

크하.. 이런 건 따로 단원을 만들어서 설명을 해야 하는데 저희의 본론을 위해서 확 생략 해버립니다.

오늘은 여기까지하고 다음 번에는 jQuery Plugin강좌 - JS OOP 2편:  js function class 정의하기,  prototype, constructor, 이형체, 상속 등을 살펴보면서 JS OOP에 관해서는 마치도록 하겠습니다.

감사합니다.

당신을 사랑합니다. 나 또한 어쩔 수 없는 세상의 것임을 늘 부끄러이 고해합니다. 그러나 전 언제나 당신을 향해 있습니다. 그 무엇도 막지 못할 영원이길 애타게 바라며