jQuery, Javascript Tip과 강좌 게시판

jQuery MsgBox 0.2.6 BETA 출시!

컴포지트 — Thu, 10 May 2012 11:01:23 +0900

지금 버전부터 MIT 라이센스로 배포합니다.

다운로드 : jquery.msgbox.js jquery.msgbox.min.js

Firefox 스타일의 초간단 경량 경고창(?) 스크립트 msgbox 베타버전입니다.
MIT 라이센스이기 때문에 비상업적이던 상업적이던 누구나 저작권 명시 조건 하에 무료로 사용 및 재배포가 허용됩니다.
버그 보고나 제안사항을 댓글로 남겨주시면 적극적으로 검토하겠습니다.
또한 github 도 신설하였으니 관심있거나 기능향상에 참여하고자 하시는 분은 fork 등으로 참여할 수 있습니다.
많은 이용과 관심 바랍니다. https://github.com/composite/jQuery.MsgBox

사용법
$.msgbox('메시지',function(){});
$.confirm('질문',function(bool){});
$.prompt('입력',function(string){});

참 쉽죠?

주의 :
이 스크립트는 경고창을 대신할 수는 있으나 사용자가 클릭할 때까지 대기하지 않습니다.
내장 함수 alert,confirm,prompt 와 똑같이 사용하지 마십시오.
반드시 이벤트 함수를 사용해야 사용자 활동에 대응할 수 있습니다.

jQuey plugin - 코드 샘플 Code Sample

한머리 — Mon, 09 Apr 2012 14:12:31 +0900

아래 강좌에서 알려드린 가이드에 맞추어서 작성된 샘플입니다.

// RollOverMenu Plugin
// example: $('.rollovermenu').RollOverMenu({ html: '<div style="background-color:white;border-width:1px;border-style:solid;font-size:14px;font-family:tahoma;padding:5px;">menu1<br />menu2<br />menu3<br />menu4<br />menu5<br />menu6<br />menu7<br /></div>', opacity:0.4 });
(
    function ($) {
        // private variables
        var defaultparams = { html: 'default popup content<br />default popup content', opacity: 0.7, xoffset: 5, yoffset: -5 };

       //event procedures
        function setPopup() {
            $("._popupmenu").remove();
            if ($.isFunction(defaultparams.html)) {
                var _t = defaultparams.html;
                $(this).html($(this).html() + '<div style="position:absolute;display:inline-block;" class="_popupmenu">' + _t(this) + '</div>');
            }
            else
                $(this).html($(this).html() + '<div style="position:absolute;display:inline-block;" class="_popupmenu">' + defaultparams.html + '</div>');
            $(this).find("._popupmenu").css({ opacity: defaultparams.opacity });
            var p = $(this).find("._popupmenu").offset();
            p.left = p.left - $(this).width() + defaultparams.xoffset;
            p.top = p.top + $(this).height() + defaultparams.yoffset;
            $(this).find("._popupmenu").offset(p);
        }

        function removePopup() {
            $(this).find("._popupmenu").remove();
        }

        //define methods
        var methods = {
            init: function (options) {
                $.extend(defaultparams, options);
                this.each(function () {
                  $(this).bind('mouseenter.RollOverMenu', setPopup);
                   $(this).bind('mouseleave.RollOverMenu', removePopup);
                });
                return this;
            }
        }

        $.fn.RollOverMenu = function (method) {
            if (methods[method])
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
           else
               return methods.init.apply(this, arguments);
        }
    }
)($);

// ImageRadioButton Plugin
// example: $(".radiobutton1").ImageRadioButton({ group: "group1" });
(
    function ($) {
        // private variables
        var defaultparams = { group: 'defaultgroupname', onimageurl: 'ic_bell_on.gif', offimgeurl: 'ic_bell_off.gif' }

        //private event procedure
        function toggleImage() {
            var mygroup = $(this).data().ImageRadioButton.group;
            $("img").each(
                function () {
                    if ($(this).data().ImageRadioButton != undefined) {
                        if (mygroup == $(this).data().ImageRadioButton.group) {
                            $(this).attr("src", $(this).data().ImageRadioButton.offimg);
                        }
                    }
                }
             );
             $(this).attr("src", $(this).data().ImageRadioButton.onimg);
        }

        //define methods
        var methods = {
            init: function (options) {
                $.extend(defaultparams, options);
                this.each(function () {
                    if (this.nodeName.toLowerCase() == "img") {
                        $(this).data("ImageRadioButton", {
                            group: defaultparams.group,
                            onimg: defaultparams.onimageurl,
                            offimg: defaultparams.offimgeurl
                        });
                        $(this).attr("src", $(this).data().ImageRadioButton.offimg);
                        $(this).bind('click.ImageRadioButton', toggleImage);
                    }
                });
                return this;
            }
       }

        $.fn.ImageRadioButton = function (method) {
         if (methods[method])
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            else
              return methods.init.apply(this, arguments);
       }
    }
)($);

기존 요소 유지하면서 텍스트만 바꾸기.

컴포지트 — Thu, 16 Feb 2012 11:08:12 +0900

제목만 보면 못알아들을 거 압니다. 제목학원 안다닌 덕분이죠.
예제를 통해 기존 하위 요소하면서 텍스트만 바꾸는 방법을 알려드리죠.
어쨌든 이렇게 마크업이 구성되어 있습니다.

<a id="mylink" href="#">
<img src="http://fiddle.jshell.net/favicon.png"/>링크1
</a>

보시면 이미지 태그와 그냥 텍스트가 공존해 있습니다.
이 상태에서 $('#mylink').text('링크다'); 이렇게 실행하시면
이미지 태그가 없어지고 링크다 라는 텍스트가 들어가게 됩니다.
만약 저 이미지 태그를 유지하면서 텍스트만 바꾸고 싶다면,
깊숙히 들어가서 바꿀 수 있습니다. 조금 어려운 방법이죠.
먼저 $('#mylink').contents() 메서드를 사용합니다.
contents() 메서드는 children() 메서드와 비슷하지만,
텍스트 요소까지 모두 받아들이는 차이점을 가지고 있습니다.
이렇게 한 다음에 텍스트 요소만 필터링합니다. 이때부터 표준 속성인 nodeType를 이용하죠.

$('#mylink').contents().filter(function(){
return this.nodeType == 3;
});

이렇게 하면 nodeType 가 3, 즉, 텍스트 요소만 필터링하게 되는 겁니다.
그런 다음에 지웁니다.

$('#mylink').contents().filter(function(){
return this.nodeType == 3;
}).remove();

모든 텍스트 요소가 삭제됩니다.
이제 할 일이 끝났으니 되돌아 가면 되겠습니다. end() 메서드를 통하여 다시 이전 선택자로 돌아갑니다.

$('#mylink').contents().filter(function(){
return this.nodeType == 3;
}).remove().end().end();

end() 한번 쓰면 contents() 로 뽑은 요소들이 선택되고, 또 end() 쓰면 $('#mylink') 선택자에 대한 작업을 준비하게 되겠습니다.
이런 다음에 텍스트를 포함시키면 끝.

$('#mylink').contents().filter(function(){
return this.nodeType == 3;
}).remove().end().end().append('링크다');

어때요. 참 쉽죠?
만약 이미지 태그 앞에다 넣고 싶다면?

$('#mylink').contents().filter(function(){
return this.nodeType == 3;
}).remove().end().end().prepend('링크다');

이렇게 하시면 되겠습니다.
빠르게 온라인 예제를 바고 싶다면 주저마시고 요기 링크를 클릭하세요.
그럼 이만!

그리고 보너스로 제이쿼리 없이 하는 방법도 있습니다. 의외로 간단하더군요.

var link=document.getElementById('mylink');
for(var i = 0,childs = link.childNodes; i < childs.length; i++){
if(childs[i].nodeType == 3)
link.removeChild(childs[i]);
}
link.appendChild(document.createTextNode('링크다'));

attr를 활용한 마우스따라 리스트색상 변하기...

박규정 — Wed, 08 Feb 2012 15:48:36 +0900

이..이걸 팁이라고해야 할지 잘 모르겠네요..ㅎㅎ

어째든 간단히 정리하면..

리스트가 뿌려진 상태에서 리스트 안에서 마우스가 움직이면 마우스따라 선택된 "tr" 영역이 선택안된 "tr"영역과 색이 틀려지는

소스입니다..

$(document).ready(function () {

jQuery("td").mouseover(function(){

var obj = jQuery(this).parent();

obj.attr("id","sub");

});

jQuery("td").mouseout(function(){

var obj = jQuery(this).parent();

obj.attr("id","");

});

</script>

여기서 봐야할건 빨간 바탕이겠죠..

대분분 css는 한대 모아서 정리 후 include 하기 때문에 id = "sub" <= 여기 sub만 수정하시면 되겠죠. ^^

제가 attr속성에 대해 잘몰라서 서너시간 헤매다가 만들었습니다..

너무 간단하고 기본적인것인데 이런것 때문에 시간 소비하지 마시라고 올려봅니다. ^^

골때리는 자바스크립트 미니버전

컴포지트 — Fri, 18 Nov 2011 14:14:26 +0900

자바스크립트로 프로그래밍 짜면서 아마 이 연산자는 쓰실런지 모르겠습니다.
바로 물결표시 (~) 인데요.

자바스크립트에도 이 물결 연산자가 먹힌다는거 알고 계셨습니까?
네. C 언어와 마찬가지로 비트로 부정하는 연산자입니다.
예를 들면, 브라우저는 대부분 32비트니 32비트 정수죠.
9 = 00000000000000000000000000001001
--------------------------------
~9 = 11111111111111111111111111110110 = -10

대충 이런 식이 성립되는군요. -(n+1)

물론 잘 안쓰죠. 자바스크립트에 비트 연산 거의 쓸일이 없거든요.
가뜩이나 node.js 빼면 파일이나 이진법 연산도 안되는 이 연산자.
하지만 쓸 곳이 하나 있다는 사실 아십니까?
바로 indexOf 메서드입니다. String 에. 문자열에 내장된 함수죠.
왜냐구요? 직접 연산해 보시길.
~-1 = 0
~0 = -1
~2 = -3
자. 이제 감 잡으셨죠? indexOf 는 지정된 문자열을 찾지 못하면 -1 이 반환됩니다.
결국 이렇게 편리한 논리식이 성립됩니다.

if(~'oh my god'.indexOf('m')){
alert('m이 요기잉네?');
}else{
alert('m 따위 내가 먹었음.');
}

어때요. 참 쉽죠?
그것도 모자라 물결표시 2개짜리도 있습니다. ~~ 입니다. 그럼 이건 뭘까요?
쉽게 생각하세요. !!a 처럼 반전에 반전을 한겁니다. 그렇게 생각하면 쉬워요.
하지만 문제가 뭐냐면..

~~3.4356456 == 3

정수가 되버린다는 사실. 그것도 소수점 다 버립니다. Math.floor() 처럼요.
그러고 보니까 Math.floor 의 대안이 될 수 있겠군요.
근데 왜 소수점을 다버릴까요? 흐음.. 글쎄요. 그것까지는 모르겠습니다.
하지만 정말 유용할 것 같군요. 소수점을 버리고 정수만 표현하고 싶은데
여태까지 Math.floor 써왔는데 겨우 물결표시 2개로 해결되다니.

뭐 알고보면 유용하군요.

골때리는 자바스크립트는 여기까지로 하겠습니다.
링크는 물결 연산자를 영문으로 잘 설명해 준 글을 인용합니다. 영어 잘한다면야 링크된게 제 강좌보단 낫죠.
그럼 즐자스코딩~

jQuery Plugin - Plugin 작성 가이드

한머리 — Wed, 16 Nov 2011 11:28:13 +0900

들어가기 전

강좌를 바로 바로 올려야 하는데 마지막 강좌 후에 가장 중요한 jquery plugin작성법은 정작 하지 않은 상태에서 잠수 탄 것 처럼 오랫동안 강좌를 못올려서 죄송합니다.

일때문이라는 말도 안되는 변명 보다는 그냥 좀 노느라.. 조금 놀다 오느라...

기다리신 분없겟지만 늦어서 죄송합니다. ( 원맨쑈~~~!!)

jQuery plugin이란 것은

이미 instance화 되어진 object인 jQuery object를 확장하여 새로운 function을 만들어서 사용할 수 있게 하는 것을 의미합니다.

이전 강좌에서 배웠듯이 간단하게 instance화된 새로운 함수 명에 새로운 함수를 작성하면 된다고 볼 수 있다.

하지만 jQuery object의 강점중에 하나인 selector로 반환되어져오는 jQuery object를 그대로 사용할 수 있는 형태여야 할 것이다.

그래서 미리 만들어진 방법인 $.fn 이라는 namespace밑에 확장해주면 원하는 결과를 얻을 수 있다.

이렇게 보면 jQuery plugin의 작성이라는 건 굉장히 단순해 보인다. 실제로도 그렇다.

하지만 특정 plugin을 작성하려면 많은 methods, event procedures 그리고 속성 등을 사용할 수 있어야 편리할 것이다.

그래서 jQuery org에서 말하는 plugin 작성법을 기준으로 몇가지를 숙지해 두는 편이 나은 방법인 것과 공유되질 수있는 방법론이 될 것이다.

1. $.fn을 확장하면 $ jQuery object를 활용하여 사용할 수 있는 plugin 작성가능하고 $.fn은 jQuery effin'이라고 읽어라는 군요. 제이쿼리 에핀 이렇게 읽으면 되는 건가?(영어가 편한 언어가 아니라. 아픔이 큽니다.)

2. 외부 코드와 분리해주시기 위해서 self-invating function을 이용하여 작성하자.

3. method의 호출 결과로 반드시 특정 object나 value를 반환해주는 것이 아니라면(왠만하면 그러지 않는 것이 좋을 것다.) jQuery에 chainability(사전에도 없는 말이다.
굳이 한글로 바꾸자면 연쇄적으로 내지는 연속적으로 호출가능한 형태)를 유지해주자.

4. 동작에 필요한 defaults 값들을 object정의하고 외부에서 받아올 options object을 받아서 $.extend()로 확장하여 사용한다.

5. 하나의 plugin이라도 수많은 methods를 다른 함수로 일일히 작성하지 말고 하나의 plugin함수 안에서 paramter를 받아서 내부에서 분기하도록 하자.

6. bind 등(애매한 표현 등... 하하 이벤트에 procedure를 붙이는 방법이 다른 좋은 방법들과 이슈가 되는 많다고 하니 이렇게 애매하게 표현하는게 상책이죠.)을 통해서 event procedure를 호출하려고 할때에 다른 plugin과 구분하거나 한번에 unbind하기 위해서라도 plugin이름을 활용하여 명명하자.

7. 일반적으로 object의 속성과 비교하면 상이한 점이 꽤나 있다.
   하지만 이 instance화되어져 있는 jQuery의 plugin으로서 마찬가지 instance화되어져 있는 속성이라는 것이 각 개체의 특정 값을 유지하거나 공유하기 위해서라면
   이걸 jQuery에서는 data라고 하고 data메서드를 활용하여 작성한다.
   여기서 마찬가지 하나 data메서드, 결국 하나의 data라는 object인데 그 하위에 plugin과 같은 이름 명명하고 그 하위에 값이나 개체의 형태로 data안에 해당 plugin의 속성을 작성해준다.

위의 방법이 반드시 강제성을 띠는 것은 아니다. 단지 가이드 라인이라고 해야할 것이다.

필요하고 더 나은 방법이 있다면 다른 방식으로 구현하고 그 방법이 실제로 더 나은 방벙이라면 역으로 제시하여 새로운 가이드가 만들어질 수도 있을 것이다.

이제 위의 항목들을 하나 하나 살펴보도록 하자.

<html>
<head>
<title>Javascript Sample Page - jQuery plugin basic</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
/*
가장 기본적인 형태의 jQuery plugin으로 jQuery instance의 $.fn을 확장하면 jQuery object를 확장하여 plugin으로 사용할 수 있다.
*/
$.fn.GetInnerText = function () {
this.each(function () { alert($(this).text()); });
}
$(document).ready(
function () { $(".title").GetInnerText(); }
)
</script>
</head>
<body>
<table>
<tr>
<td class="title">제목</td>
<td>진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td>김소월</td>
</tr>
</table>
</body>
</html>

2. 외부 코드와 분리해주시기 위해서 self-invating function을 이용하여 작성하자.

<html>
<head>
<title>Javascript Sample Page - jQuery plugin standard</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
/*
좀 더 복잡한 형태의 jQuery plugin 으로 사용되면서는 private function과 private 변수의 사용이 불가피해진다.
그러므로 다른 global 코드와 이름 중복으로 발생할 문제를 해결하기 위해서 jQuery를 parameter로 하는 self-invacation function을 사용해줍니다.
*/
(
function ($) {
$.fn.GetInnerText = function () {
this.each(function () { alert($(this).text()); });
}
}
)($)

$(document).ready(
function () { $(".title").GetInnerText(); }
)
</script>
</head>
<body>
<table>
<tr>
<td class="title">제목</td>
<td>진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td>김소월</td>
</tr>
</table>
</body>
</html>

자 그러므로 가장 단순한 형태의 jQuery Plugin 작성형태라고 하면 "(function ($){ $.fn.myplugin = function () { } })($)"이 될 것이다.

<html>
<head>
<title>Javascript Sample Page - Chainability 1 </title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
/*
예제에서 파악할 수 있듯이 기 구현되어있는 대부분의 jQuery의 function은 jQuery개체를 최종적으로 계속 반환함으로써 연쇄적인 호출이 가능한 형태로 구현되어져 있습니다.
*/
(
function ($) {
$.fn.GetInnerText = function () {
this.each(function () { alert($(this).text()); });
}
}
)($)
$(document).ready(
function () {
$(".title").css("background-color", "#eeeeee").GetInnerText();
$(".title").GetInnerText().css("background-color", "#eeeeee"); // css method 에러 발생
}
)
</script>
</head>
<body>
<table>
<tr>
<td class="title">제목</td>
<td>진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td>김소월</td>
</tr>
</table>
</body>
</html>

그럼 chainability하게 작성하는 방법에 관해서 알아보자.

<html>
<head>
<title>Javascript Sample Page - Chainability 2 </title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
/*
chainability를 유지해주기. chainability(사전에도 없는 걸 보면 지어낸 말이거나 아니면 신조어일까요?)
*/
(
function ($) {
$.fn.GetInnerText = function () {
return this.each(function () { alert($(this).text()); });
}
}
)($)
$(document).ready(
function () {
$(".title").GetInnerText().css("background-color", "#eeeeee");
//$("td").each(function () {$(this).width();});
}
)
</script>
</head>
<body>
<table>
<tr>
<td class="title">제목</td>
<td>진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td>김소월</td>
</tr>
</table>
</body>
</html>

적절한 예제라고 보기에는 억지가 많지만 작성법만을 보도록 하자.

결국 마지막에 instance화된 자신의 object를 의미하는 this를 반환하면 된다.

4. 동작에 필요한 defaults 값들을 object정의하고 외부에서 받아올 options object을 받아서 $.extend()로 확장하여 사용한다.

<html>
<head>
<title>Javascript Sample Page - defaults and options with $.extend </title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
//$.extend를 이용하여 좀 더 사용하기 편리한 parameters와 default값들을 지정하기
(
function ($) {
// plugin내에서 사용할 기본값으로 setting된 object를 미리 만들어 둡니다.
StylingDefaults = { font: "맑은 고딕", foreColor: "blue", backColor: "#eeeeee" };

$.fn.MyCompanyStyling = function (options) {
this.each(
//function (options) { //이것은 each라는 메서드가 넘겨주는 첫번째 parameter로 options은 each의 각 index가 넘어옵니다.
function () {
// plugin 내의 기본값을 가진 object를 기준으로 받은 options을 덮어 씁니다.
$.extend(StylingDefaults, options);
//$.extend(options, StylingDefaults); // 이렇게 하면 받은 options 값을 기준으로 원래 기본값을 덮어쓰면서 기본값이 적용됩니다.

//원하는 코드를 작성합니다.
$(this).css("font-family", StylingDefaults.font).css("color", StylingDefaults.foreColor).css("background-color", StylingDefaults.backColor);
}
);
return this;
}
}
)($)

$(document).ready(
function () {
$(".title").MyCompanyStyling({ foreColor:"red" });
}
)
</script>
</head>
<body>
<table>
<tr>
<td class="title">제목</td>
<td>진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td>김소월</td>
</tr>
</table>
</body>
</html>

5. 하나의 plugin이라도 수많은 methods를 다른 함수로 일일히 작성하지 말고 하나의 plugin함수 안에서 paramter를 받아서 내부에서 분기하도록 하자.

<html>
<head>
<title>Javascript Sample Page - Methods Namespacing</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
// 근본적으로 jQuery plugin이라는 것이 fn이라는 namespace 아래에 자리 잡는 것입니다.
// 그래서 plugin 하나 하나가 다수의 method를 만들면 결국 plugin 몇 개만 써도 엄청난 수의 method가 fn밑에 자리 잡게 되고
// 결국 어떤 plugin의 메서드인지 뭐하는 method인지 헤갈리게 될 가능성이 높을 것 같습니다.
// 그래서 jQuery org는 method이름을 paramter의 형태로 받아서 해당 plugin 내부에서 분기하라고 가이드 하고 있습니다.
(
function ($) {

// 사용할 method 선언부
var actions = {
TitleStyling: function (options) {
Defaults = { font: "맑은 고딕", foreColor: "blue", backColor: "#eeeeee" };
this.each(
function () {
$.extend(Defaults, options);
$(this).css("font-family", Defaults.font).css("color", Defaults.foreColor).css("background-color", Defaults.backColor);
}
);
return this;
},
ValueCellStyling: function () { this.each(function () { $(this).css("font-weight", "normal"); }); return this; }
}

// 각각의 sub procedure를 호출해주는 main
$.fn.MyCompanyStyling = function (action) {
if (actions[action])
return actions[action].apply(this, Array.prototype.slice.call(arguments, 1));
else
return actions.TitleStyling.apply(this, arguments);
}
}
)($)

$(document).ready(
function () {
$(".title").MyCompanyStyling({ foreColor: "red" });
$(".cellcontent").MyCompanyStyling("ValueCellStyling");
}
)
</script>
</head>
<body>
<table>
<tr>
<td class="title">제목</td>
<td class="cellcontent" style="font-weight:bold">진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td class="cellcontent">김소월</td>
</tr>
</table>
</body>
</html>

<html>
<head>
<title>Javascript Sample Page - Events Namespacing</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
(
function ($) {
var actions = {
// Event Procedure를 각각의 events에 bind해주는 역활의 함수
// 일반적으로 jQuery org예제처럼 plugin이 초기화되면 해당 동작을 많이 하므로 init이라는 이름으로 만들고 초기화하면서 bind해주는 경우가 많다.
// 본 예제에서는 이해를 돕기 위해 이름을 별나게 작성하였다.
AttachEvents: function () {
this.each(function () {
// 해당 plugin이름으로 하나씩 event bind해준다.
$(this).bind('click.myCompanyStyling', displayClickedCoordinate);
$(this).bind('mousemove.myCompanyStyling', displayMovingCoordinate);
});
return this;
},

// 필요할 경우나 개인적인 의견으로 한 페이지에서 끝나고 다음 페이지로 이동하는 웹페이지의 형태에서 잘 사용하지 않을 것 같으나 소멸자에서 사용이 되어진다.
// unbind해주는 method로 소멸자의 경우 일반적으로 destory라는 이름을 많이 사용한다.
// 본 예제에서는 이해를 돕기 위해 이름을 별나게 작성하였다.
DisattachEvents: function () {
// 해당 plugin 이름으로 한번 unbind
$(this).unbind('.myCompanyStyling');
return this;
}
}

// plugin 내부에 private한 함수들이다.
// self-invacation 되어 있으므로 현재 상태로는 외부에서 접근이 불가능한 코드이다.
function displayClickedCoordinate(e) {
$("#divClickedCoordinate").text('styling clicked coordinate x: ' + e.pageX + ', y: ' + e.pageY);
}
function displayMovingCoordinate(e) {
$("#divMovingCoordinate").text('mouse coordinate x: ' + e.pageX + ', y: ' + e.pageY);
}

// method로 분기해주는 main procedure
$.fn.MyCompanyStyling = function (action) {
if (actions[action])
return actions[action].apply(this, Array.prototype.slice.call(arguments, 1));
else
return actions.init.apply(this, arguments);
}
}
)($)

$(document).ready(
function () {
// 위의 plugin의 namespace가 아닌 다른 곳에서의 bind 2가지

// 1. window의 mousemove bind
$(window).bind('mousemove', function (e) {
$("#divGlobalMousePosition").text('mouse coordinate x: ' + e.pageX + ', y: ' + e.pageY);
});

// 2. plugin과 같은 개체의 같은 event에 bind
$('#tableContent').bind('click', function (e) {
$("#divClickedCoordinate").text('clicked coordinate x: ' + e.pageX + ', y: ' + e.pageY);
});
}
);
</script>
</head>
<body>
<table id="tableContent">
<tr>
<td class="title">제목</td>
<td class="cellcontent" style="font-weight:bold">진달래</td>
</tr>
<tr>
<td class="title">시인</td>
<td class="cellcontent">김소월</td>
</tr>
</table>
<div id="divGlobalMousePosition"></div>
<div id="divClickedCoordinate"></div>
<div id="divMovingCoordinate"></div>

<input type="button" value="attach events" onclick="javascript:$('#tableContent').MyCompanyStyling('AttachEvents');" />

<input type="button" value="disattach events" onclick="javascript:$('#tableContent').MyCompanyStyling('DisattachEvents');" />
</body>
</html>

먼저 간단하게 table cell 까만 막대기를 그려주는 jQuery plugin을 작성법대로 기본을 잡아주자.

<html>
<head>
<title>Javascript Sample Page - Events Namespacing</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
(
function ($) {
var methods = {
init: function () {
this.each(function () {
$(this).append($('<div style=\"background-color:black;height:15px;width:100px;\"> </div>'));
});
return this;
},
}

$.fn.RandomBar = function (method) {
if (methods[method])
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}
)($)

$(document).ready(
function () {
$(".sample tr td").RandomBar();
}
);
</script>
</head>
<body>
<table class="sample">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

자! 이제 랜덤한 길이로 보이도록 하자.
(참고로 차분히 이해를 돕기 위해서 step별로 하는 것이지 절대로 원고 불리기가 아닙니다. ㅡㅡ;)

<html>
<head>
<title>Javascript Sample Page - Events Namespacing</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
(
function ($) {
var methods = {
init: function () {
this.each(function () {
$(this).append($('<div style=\"background-color:black;height:15px;width:' + Math.floor(Math.random()*1001).toString() + 'px;\"> </div>'));
});
return this;
}
}

$.fn.RandomBar = function (method) {
if (methods[method])
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}
)($)

자! 그럼 이제 길이과 미리 정해진 색상과 라벨을 할당하고 이에 관한 속성을 만들어 보도록 하겠습니다.

<html>
<head>
<title>Javascript Sample Page - Events Namespacing</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
(
function ($) {
// private variables
var barnames = ['사랑', '평온', '행복']
var barcolors = ['red', 'blue', 'gray', 'black', 'yellow']

$.fn.RandomBar = function (method) {
if (methods[method])
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}
)($)

이렇게 만들어진 속성에 해당하는 data로 유지된 value를 event procedure에 활용하는 형태로 마무리해보겠습니다.

<html>
<head>
<title>Javascript Sample Page - Events Namespacing</title>
<script language="javascript" type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
(
function ($) {
// private variables
var barnames = ['사랑', '평온', '행복']
var barcolors = ['red', 'blue', 'gray', 'black', 'yellow']

//private event procedure
function displayBarInfo() {
$(".barinfo").text('이름: ' + $(this).data().RandomBar.name + ', 길이: ' + $(this).data().RandomBar.barlength + ', 색상: ' + $(this).data().RandomBar.barcolor);
}
function hideBarInfo() {
$(".barinfo").text('');
}

$.fn.RandomBar = function (method) {
if (methods[method])
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
else
return methods.init.apply(this, arguments);
}
}
)($)

$(document).ready(
function () {
$(".sample tr td").RandomBar();
}
);
</script>
</head>
<body>

<table class="sample">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div class="barinfo"></div>
</body>
</html>

마치며

이후 jQuery plugin 강좌는 특별한 계기가 없는 계획이 없으며 보내주시는 피드백을 보아서 jQuery Plugin 활용예제나 되짚어 상세히 보기 편을 만들 수 있으면 해보도록 하겠습니다. (아마도 가능성이 낮겠죠. 하하)

감사합니다.

윈도우를 위한 node.js 초간단 구축 가이드

컴포지트 — Tue, 08 Nov 2011 10:31:34 +0900

node.js 를 만지다 보면은 여간 불편한 일이 한두가지가 아니죠.

유닉스 기반의 경우는 처음부터 만들어져서 정말 쉽게 구축할 수 있지만

윈도우는 마소 이후로 이제서야 재대로 활성화되고 있기도 하죠.

오늘 node.js 를 간단하게 구축하는 가이드를 알려 드리도록 하겠습니다.

1. node.js 다운로드

별 말 있나요? 일단 다운받습니다. 이번 11월 4일 드디어 처음으로 윈도우도 안정화(stable) 버전이 나왔습니다.

0.6.0 입니다. node.js는 항상 최신으로 유지하시는 것이 건강에 좋습니다.

node.exe Windows executable

2. node 홈 경로 잡기

일단 중요한 일입니다. 왜냐하면은 node.js 모듈을 손쉽게 관리하기 위한 것이죠. 붙일 경로는 아무곳에나 해도 상관 없습니다.

그리고 저는 포터블 환경을 기준으로 설명하겠습니다. 서버 환경 기준은 끝에 부가적인 설명을 드리겠습니다.

제가 왜 포터블 환경을 고집하냐면 어느 컴퓨터에서든 똑같은 환경에서 개발하기 용이한 장점이 있기 때문이죠.

홈 경로 잡는거는 서버 환경에서도 공통적으로 사용한니 놓치지 마시고. 폴더 구조를 이렇게 잡는 것으로 하겠습니다.

node.js 폴더

└ bin 폴더

└ node.exe

└ node_module 폴더

└ python 폴더

자, 왜 python 이 있어야 하는가? 라고 궁금해 하시는 분들이 많을텐데요. 다음에 설명해 드리도록 하겠습니다.

이렇게 구조적으로 잡으세요.

3. python 다운로드

설치형도 상관없지만, 저는 포터블을 선호한 탓에 어떤 컴퓨터에서도 돌리는 파이썬 실행 환경을 추천합니다.

이미 컴퓨터에 설치됐다면, 이 과정은 패스하셔도 무방합니다.

파이썬 포터블 다운로드(HTTP)

어자피 설치를 하면, python.버전.msi 가 있습니다. 서버 환경에서는 이 파일을 실행하면 PATH 환경 변수 등에 등록되어

서버 환경에서 어느 경로에서나 파이썬 스크립트를 돌릴 수 있습니다. 하지만 그 과정은 포터블에서는 불필요하므로 패스.

자. 왜 파이썬을 받는지 4번에 설명드리도록 하겠습니다.

4. ryppi 다운로드

node.js 하면은 패키지 관리자. 비주얼 스튜디오에 nuget 같은 존재, 리눅스의 yum 같은 존재. 바로 npm이 있습니다.

하지만 안타깝게도 npm는 아직 윈도우를 지원하지 않고 있습니다. 제작자는 윈도우에 호환하려면 몇달은 걸린다고 하고 있죠.

아직까지 테스트적인 윈도우 환경에서 npm 돌리는 방법이 있지만, 요구사항이 많고 아직까진 불안정할 수밖에요.

그러나, 이렇게 윈도우 환경에 돌리기 어려울 줄 알았던 패키지 관리 프로그램에 또 하나 있다는 것이 감격스럽습니다.

바로 ryppi 입니다. npm 프로토타입을 파이썬으로 포팅한 ryppi는 아직까지 npm의 많은 기능을 지원하지는 않지만,

node.js 모듈을 손쉽게 받고 업데이트 까지 가능하다는 점에서 한줄기 빛이 일지 아니할 수 없습니다.

https://github.com/japj/ryppi/blob/master/ryppi.py

다운로드 링크 : ryppi.py

파이썬 왜 받아야 하는건지 아시겠죠? 바로 ryppi를 돌리기 위해서입니다.

스크립트 받으시고 node.js 홈 폴더에다 옮기세요.

5. 환경세팅.

이제 마지막 과정이 남았습니다. 바로 node.js 실행화 ryppi 실행인데요.

node.js 폴더에다가 배치 파일을 담고, node.js 샌드박스 환경을 만들어 node.js 를 실행하는 것입니다.

서버에서는 불필요하죠.

이 2가지 파일을 node.js 폴더에 담습니다.

node.cmd ryppi.cmd

하나는 node.exe 를 아무데서나 실행하도록 도와주고, ryppi.cmd 는 ryppi를 아무데서나 실행되도록 도와줍니다.

서버 환경에서 세팅하려면 node.cmd 는 필요없고 대신,

환경 변수에 NODE_PATH 추가 및 PATH 변수에 경로 추가를 하시면 됩니다.

그렇다고 내컴터 -> 속성 -> 환경변수 -> 추가 -> 추가... 이렇게 하면 귀찮으시겠죠?

명령어로 해결해 드리겠습니다. cmd 열고 아래만 실행하면 끝입니다. 물론 경로는 잡은 경로로 바꿔줘야 겠죠.

setx NODE_PATH=(node.js 경로)\node_module

setx PATH=%PATH%;(node.js 경로)\bin

setx 특성상 전역에는 등록되지만 명령어 환경에 바로 변수가 적용되지 않습니다.

이렇게 하고 cmd 열고 node 실행하면 꺽쇠만 보일 것입니다. 그럼 성공한 것입니다.

윈도우 서버 및 비스타 이상에서는 setx 라는 명령어가 있습니다. 하지만 XP는 없습니다. 따로 다운받거나,

http://www.microsoft.com/downloads/details.aspx?FamilyID=49ae8576-9bb9-4126-9761-ba8011fabf38&DisplayLang=ko

포터블 환경으로 위처럼 세팅하세요.

이렇게 하면 포터블 환경의 경우 폴더 구조가 이렇게 완성됩니다.

node.js 폴더

└ bin 폴더

└ node.exe

└ node_module 폴더(이 폴더에 node.js 모듈이 들어갈 곳)

└ python 폴더(여기 안에 python이 들어있음)

└ node.cmd

└ ryppi.cmd

└ typpi.py

6. 보너스로 초간단 웹 서버 구축을 해봅시다.

express 라는 node.js 프레임워크가 있습니다. 전에 제가 쓴 강좌에 소개된 jessica,nancy 같은 초경량 MVC 웹 프레임워크입니다.

(node.js 폴더)\ryppi.cmd install express

그럼 node_module 폴더에 여러가지 폴더들이 생겨나면서 express 및 필요한 종속 모듈들이 같이 깔립니다.

그다음, 아무데나 폴더 하나 잡고 hello.js 를 작성해 봅시다.

var express=require('express');
var app = express.createServer();
app.get('/', function(req, res){
res.send('hello world');
});
app.listen(3000);
console.log("웹 서버 시작 : http://localhost:3000");

그리고 node.js 실행해서 돌려봅시다.

(node.js 폴더, 서버환경에선 안써도됨)\node hello.js

이렇게 해서 콘솔에

웹 서버 시작 : http://localhost:3000

라고 써있고 브라우저에 http://localhost:3000 주소를 쳐봤을때 hello world 나오면 성공한겁니다.

어때요. 참 쉽죠?

이미지가 많이 없고 글만 있어서 아쉽지만 최대한 쉽게 설명해 드렸습니다. 그래도 이해 못하신다면 댓글 남겨주세요.

이것으로 구축 가이드를 마치겠습니다. 끄읕.

jQuery Plugin - JS OOP 2편, Self-Invocating function

한머리 — Fri, 14 Oct 2011 15:22:00 +0900

들어가기전

글을 쓰면서 항상 두려운 것이 있어 먼저 밝히고 들어 갑니다.

우선 전 전산분야의 비전공자이고 전산 분야에 제대로된 교육을 별도로 받은 적이 없습니다.

아~ 물론 실무를 바탕으로 제가 전산관련 학원강의를 한 경험은 있습니다.

하지만 알고 있는 것과 책을 바탕으로 길을 안내해드리는 일과 이렇게 어떤 내용에 관해서 글로 남기며 이 길과 정의가 맞다고 이야기 해나가는 약간 다른 의미가 있는 것 같습니다.

그래서 비전공자이면서 동시에 제대로된 이론 교육없이 작성을 하다보니 개념이나 용어가 다소간 원래의 의미에 맞지 않거나 통용되는 정의와 전혀 다른 혼자만의 정의였을 가능성을 배제할 수 없습니다.

그런 부분이 있다면 너그러이 이해해주시고 그냥 지나치지 마시고 지적해주셨으면 합니다.

자 본론으로 들어가겠습니다.

이전 강좌에서 다루었던 object의 instance를 생성하고 이를 확장하는 방식으로 OOP하는 것으로 왠만하면 충분하고 그런대로 문제가 없다고 했습니다.

그리고 실제로 jQuery plugin을 만들 때 대부분 이를 응용합니다.

하지만 그냥 "대부분의 경우에 충분하고 그런대도 괜찮다"는 딱 거기 까지 한계입니다.

(후후 이전 강좌를 배신하는 이 한마디...)

결국 Javascript라는 Script언어로 모든 쓰임새를 충족하고 쉽게 만족하는 OOP를 하기에는 어느 정도 Javascript script언어자체에서부터의 한계점이 있을 것 같아보입니다.

자.. 그리고 이전 강좌에서 다룬 Object instance를 확장하는 어설픔 방법(와~~ 완전 배신이다.)으로는 쉽게 생각해도 개체형식의 상속 등이 그 태생때문에서 부터 어려워 보입니다.

결국은 이번에 다루는 function으로 class를 선언하듯 하고 이를 new 키워드를 통해서 object형으로 instance화 해서 사용하는 방법이 중요하다는 이야기를 하고 싶은 것 입니다.

function을 사용한 class 생성

기본적인 class 정의 방법와 그 정의를 확장하고 사용하는 방법까지를 간단한 예제로 살펴보도록 하겠습니다.

헉~~ 함수를 new를 통해서 개체로 instance화 되어 지고 있습니다.

그럼 이 new라는 키워드가 함수를 개체로써 instance화 시킬 능력이 있다는 이야기 입니다.

아래 예제를 통해서 new 키워드의 동작을 흉내내어 자세히 살펴보도록 하겠습니다.

위의 예제를 통해서 금방 눈에 들어오는 이야기이지만 결국 new 키워드는 빈 object를 만들고 class 생성하고자는 함수 이름의 [function name].call 매서드를 통하여 해당 function을 생성자로 빈 object를 채워주는 것 입니다.

과연 그럼 new 가 빈 object에 call메서드를 동작한 걸까요?

아님을 증명하는 예제를 살펴보도록 하겠습니다.

자 위의 예제를 통해서 보면 알 수 있듯 new 키워드는 function 생성자를 통해 정의된 것과 prototype을 통해서 확장된 것까지를 완전히 instance화하는 것입니다.

하지만 흉내낸 방법은 단지 빈 object에 생성자 function안 있는 내용을 instance화 해서 넣어주는 것 입니다.

하여튼 위의 예제들을 통해서 알리고자는 것은 function을 new함으로써 기본이 object형을 상속받아서 function의 내용을 instance화 하여 사용할 수 있다는 것입니다.

그럼 function을 통해서 instance화 시킬 수 있는 class를 정의할 수 있지 않을까요?

(스스로가 의구심을 가지고 대답하시기 바랍니다.)

상속

개체정의의 형의 속성, 메서드를 그대로 가지고 다른 형을 다시 정의할때 이를 상속이라고 합니다.

VS의 intellisense에서 볼 수 있는 개체의 namespace의 상하 관계와는 아무런 관련이 없습니다.

상속이라는 단어를 사용하고 있지만 실상은 function object의 prototype이라는 속성에 상속할 object의 instance를 생성해 넣어 주고 새로운 constructor로 새로운 function object를 지정해주는 겁니다.

this 의 의미

this는 해당 instance를 function형 그 자체를 의미합니다.

많은 사람들은 소유자(owner)를 의미한다는 표현을 많이 사용합니다.

위의 표현으로 정확한 의미를 이해 하려고 하면 형은 상속관계를 가지고 있는 것을 상기해야 합니다.

많은 분들이 표현하는 owner라고 하는 것은 최하위 형을 의미하지만 최하위에서 최상위까지 계속 찾아간다는 걸 잘 이해하지 않으면 굉장히 어려운 상황에 직면하는 경우가 종종 생깁니다.

전역 variant의 지옥이라는 표현이 적절하리라고 생각하는 this의 지옥이라 표현이 있을 만큼 어려운 상황을 만드는 것은 전역 변수를 남용하게 되면 생기게 되는 것 입니다.

여기서 말하는 global이라는 표현보다는 page level이라는 용어가 더 어울리지 않을까 합니다.

그리고 몇가지 오해는 상속관계 등에 관한 정확한 이해가 없어서 발생하기도 합니다.

결론적으로 정확한 개념을 가지고 this를 사용해야 하고 global영역의 변수들은 왠만하면 솔루션을 만들거나 협업으로 많은 사람이 개입되어 있는 페이지를 작업할 때는 사용하지 않는 편이 좋습니다.

사용은 못하게 하고 글로벌 영역에서 바로 실행되어야 할 코딩에 관한 대안이 없다면 당연히 그건 무책인 한 것 입니다.

그건 욕하는 아이에게 욕하면 안된다고 하고 그 욕들 대신에 할말을 가르치지 않는 것과 같은 것 같습니다.

그 대안은 self-invocating function에서 찾도록 하고 그건 좀 있다 다시 설명하도록 하겠습니다.

prototype의 이해

쉽게 말하면 이것 저것 붙여서 맘대로 할 수 있는 레고같은 모형장난감에 비유하면 될 것입니다.

하지만 여기서 분명히 기억하여야 할 것은 function 정의를 확장한다는 것입니다.

위의 비용는 사실 형상적으로 나타나는 것을 쉽게 이해하기 위한 용도로 비유하여 설명한 것이고 좀 더 본연의 모습을 깊이 살펴보도록 합니다.

이전에 prototype은 object의 function 생성자 이외에서 정의를 확장하기 위한 속성이라고 했습니다.

prototpe은 object형의 prototype을 상속받은 겁니다.

여기서 상속이라는 말을 사용하고 있긴 하지만 좀더 정확히 이야기 하면 상속자를 instance화하여 피상속자의 prototype이라는 속성에 넣고 따로이 생성자를 지정하는 방법을 사용했었습니다.

결국 prototype으로 지정된 속성은 해당 object의 소유가 아니라 이전 상속자의 instance가 소유한 것 입니다.

이런 내용을 hasownproperty라는 method를 통해서 확인할 수 있는 예제를 살펴보겠습니다

참 그리고 object가 instance화 되고 나면 prototype은 사용할 수 없는 것입니다. (확신이 없지만 본 적도 없고 상식적으로 아닐 것 같습니다.)

여기서 당연하고 흥미로운 사실 두가지를 알아보도록 하겠습니다.

이형체

사실 jQuery plugin을 공부하면서 이형체에 관해서 언급할 개연성은 없어보인다 하지만 여기까지 왔으니 간단하게 한번 살펴보고 가도록 하겠습니다.

아래와 같은 살짝 억지스런 예제를 살펴보도록 합니다.

다음으로 이형체에서 언급하는 게 맞는 건지 아니면 별도로 뭔가 타이틀을 잡고 해야 할지 확신이 없지만 javascript는 같은 개체 안에서 다른 메서드로 구현하는 건 불가능합니다.

하지만 함수의 parameters의 형이 어자피 object 동일하고 function 호출시 몇 개를 제외하고 해도 그 값이 null인 형태로 function호출이 가능하므로 그냥 하나의 함수에서 여러 개의 내용을 모두 담거나 그 안에서 받는 서로 다른 private한 function으로 분기하는 편이 나은 방법입니다.

필자가 억지로 JS OOP라고 해서 가만히 있는 javascript language를 억지로 OOP이라는 틀에 맞추려고 한 경향이 있긴 합니다.

이 모든 것이 제가 부족한 탓에 단순히 있는 그대로를 나열하면 어려워서 개인적으로 난잡한 개념을 추상화하는 가운데 생긴 부산물일 수 있습니다.

이를 너그러이 살펴 주시옵고 조금이라도 이상하면 지적질~~~ 부탁드립니다.

감사합니다.

휴~ 사실은 위까지만 쓰고 다음 번에 다시 작성하려고 했는 기왕 내친 김에 다음 강좌와 내용을 겹쳐서 바로 갑니다.

Javascript Self-Invating Function

self-invocating 또는 self-executing function은 말 그대로 혼자서 실행되는 함수 또는 class 라고 보시면 됩니다.

복잡한 설명 먼저 드리는 것보다는 아래와 같은 예제를 살펴보는 편이 나을 것 같습니다.

이게 저게 뭐야 말이 어렵지 뭐할려고 저런 걸 만들었을까? 라는 생각이 절로 드는 pattern일 수 있습니다.

그래서 아래와 같이 복잡하게 많은 js 파일들로 구성된 예제를 살펴 보겠습니다.

바로 그것 입니다.

function이 내에서 선언되어서 사용되는 변수는 외부와 독립적이라는 것 입니다.

다시 말해 외부적인 환경에 신경쓰지 않고 편하게 변수명와 함수명을 사용하면 가독성 높은 프로그래밍이 가능하다 것 입니다.

위의 예제는 변수이지만 그것보다도 내부에서 함수를 사용하다면

오~~ 여기까지만 보면 마치 self-executing function은 마치 그 안이 별천지 같이 독립된 공간처럼 보입니다.

하지만 그 환상을 깨야 합니다. 아래의 예제를 보겠습니다.

위의 예제로 느끼셨겠지만 딱 혼자서 자동으로 실행하는 class 딱 거기까지가 self-invocating function의 능력입니다.

마치며

급 마무리 하겠습니다.

편집을 마무리하며 차분히 읽어보니 처음 보시는 분들께는 다소간 어려울 것 같은 생각이 많이 듭니다.

짧은 시간에 준비하며 욕심을 좀 부리다가보니 그렇게 되었습니다.

너그러운 이해 부탁드리겠습니다.

facebook like 도 좀 해주시고 반응도 괜찮고 하면 원하시는 부분 짚어서 다시 한번 상세히 다루는 기회를 마련해보도록 하겠습니다. 하하 (추천 구걸 이건 나쁜 건데.ㅠ)

다음 강좌는 이전 까지의 다소 복잡한 내용을 넘어서 가벼운 맘으로 jQuery plugin을 실제로 만드는 부분으로 넘어가도록 하겠습니다.

감사합니다.

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

jQuery Plugin - JS OOP 1편

한머리 — Tue, 11 Oct 2011 15:56:17 +0900

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화해서 이를 확장 하는 방법입니다.

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

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

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

    //익명함수를 사용하여 코드를 줄여봅니다.
    _company.AlertCompanyName = function () {
        alert(this.CompanyName);
    }

alert(_company.CompanyName);
_company.AlertCompanyName();

</script>

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

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

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

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

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

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

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

들어 사용할 수있습니다.

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

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

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

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

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

있습니다.

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

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

감사합니다.

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

jQuery plugin - 들어가기 전에

한머리 — Fri, 07 Oct 2011 19:33:02 +0900

시작하기 전

이 내용을 준비하는 제가 아무래로 asp.net & c# 사용자이니만큼 다른 제품 사용자에게는 다소 이질적인 면이 존재할 것이라고 생각합니다.
그런 면은 넓은 이해와 아량으로 지적질~~ 부탁드립니다.

본론을 시작하기 전에 jQuery plugin 작성은 jQuery에 관한 완전 초보분들께는 조금은 무거운 내용이리라고 생각합니다.
약간 익숙하시면 이용해주시는 것이 정신 건강에 좋을 것 같습니다.

추가로 jQuery org와 기타 다른 분들의 정보를 모으고 섞여 제 머리 속에서 칵테일된 내용일 수 있는 관계로 어디선가 마셔 본듯한 느낌을 주더라도 작성자의 뱃속부터 타고나지 못한 지식을 너무 탓하지 말아주셨으면 합니다.

그리고 제가 이 내용을 작성하면서도 공부해나갈 가능성이 높을 것 같아서 읽어주시는 분들께도 감사드립니다.

왜 jQuery Plugin인가?

- 개인으로써의 장점

매우 작업 효율적입니다.

매번 프로젝트를 할 때마다 비슷 비슷한 코딩을 한 기억이 다들 제법이나 있을 거라고 생각합니다.
조금 신경써서 자~~알.. 하나 만들어 놓고 내지는 아니면 잘 만들어진 plugin을 평소에 잘 익혀두었다가 높은 생산성을 보이는 거죠.
그렇게 줄여진 시간에 커피 한잔이랑 잡담을 즐기면서도, 일 잘하는 모습을 보여주자는 거죠. (아주 희망스럽기도 한 상황이지만 ㅡㅡ")

코드를 물리적 라인 수를 줄일 수 있습니다.

주저리 주저리 적어나가야 하는 날 코딩(??)을 미리 만들어 놓은 plugin인을 사용하면 중복하여 계속해서 코딩 할 필요가 없으니 당연히 코딩 라인 수가 줄어 들것 입니다.

- 프로젝트나 회사로써의 장점

역시나 비용면에서나 리스크 관리 차원에서 효율적입니다.

이 분께서 고민한 것을 저 분께서 또 고민해주시고, 이 분께서 실수 하신 거 또 저 분께서도 실수해주시고 쉽게 나타나는 현상이죠.
이런 문제를 조금 더 확대하면 이 프로젝트, 저 프로젝트가 되는 것이고, 더더욱 확대하면 이 팀, 저 팀이 되는 거겠죠.

추상화를 체계적인 정리와 프로그래밍 측면의 접근성

개체에 관한 설계만 잘 한다면 namespace와 개체의 상하 관계를 통해서 해당 업무 내용을 완벽하게 알지 못하더라도 이름을 통해서 쉽게 필요한 함수를 찾아서 사용할 수 있도록 설계 가능합니다.

그리고 개인과으로써의 장점과 마찬가지로 이런 추상화 과정을 통해서 많은 경우 라인 수를 확 줄일 수 있습니다.

추가로 vs 2010이상 등을 사용하여 javascript intellisense(인텔리센스:발음나는대로 적은 건데, vs에서 점찍으면 팝업되어나오는 속성이나 메서드명)를 활용한다면 정말 쉽게 필요한 부분을 찾고 매개변수를 보면서 활용하여 작성할 수있습니다. (개인적인 경험으로는 환상적이었습니다.)

그외에 어떤 좋은 점을 상상할 수 있을까요?

예를 들어 "우리회사.결재.기안.싸인하기(사용자아이디)" 이런 형태로 되어져 있고

그 안에 복잡한 로직들이 포함되어 있다고 가정하죠. 그걸 통해서 어떤 장점이 있을까요?

"우리회사.인증.웹인증.인증하기(아이디, 비밀번호)" 이런 건 기능이고

"우리회사.웹표준UI.메뉴.롤오버메뉴(추가메뉴들의json형태)" 이런건 UI이구요.

이런 내용의 plugin을 실제로 구현할 거라고 생각하시면 해골 속에 지렁이 백마리가 기어다니는 느낌이 드니깐요.

그냥 만들어진 것을 파악하고 이해하여 그냥 사용만 하신다고 상상해보세요.

그럼 아마도 쉽게 이 모든 장점들이 상상이 되리라고 생각합니다. 그리고 나아가 더 많은 장점을 파악할 수 있을 것 입니다.

위의 내용은 거의 object oriented programming(덩어리 지향적인 프로그래밍)의 장점을 일부만 생각나는 대로 나열한 수준일 겁니다.

결국에는 jQuery plugin이 javascript object oriented program이고 그 framework이 jQuery가 되는 거니깐요.

그럼 하필 왜 jQuery Plugin일까?

가장 많이 사용되는 javascript framework 중에 하나로 대부분의 경우 벤치마킹을 통해서 우수한 품질과 풍부한 framework자체의 컨텐츠를 사용할 수있다는 장점이 뭐니 뭐니해도 제일 큰 장점이라 할 수 있을 것이다.

그리고 또 cross browsing, 성능, 편리성 등 골치아픈 문제에 대해서 비교적 자유로운 검증된 framework이니깐 사용하는 거라고 생각합니다.

( jQuery를 쓴다고 해서 위의 문제에서 완전히 벗어났다고 생각하면 완벽한 오해입니다.

좋은 도구를 준다고 훌륭한 장인이되는 법은 아니죠.

저처럼 좋은 망치를 가지고 자기 손을 한번씩 내려치고 못은 매번 잘 박히지 않고 벽만 상하는 경우가 많으니깐요. )

그리고 위의 이유를 포함하여 다른 장점들로 인하여 많은 사용자를 확보하고 있기 때문에 jquery.org나 기타 웹 검색을 통해 수많은 jQuery Plugin를 접할 수있고 활용할 수 있습니다.

왠만큼 골치 아프다고 생각하는 건 대부분 사용자들에 의해서 이미 plugin형태나 예제의 형태로 개발되어지고 공개되어져있다고 감히 생각해봅니다.

단지 현재의 내가 주어진 환경에 맞지 않거나 너무 작은 경우의 수만을 고려하여 만들어서 버그를 많이 안고 있는 코드가 간혹있긴 하지만 말입니다. - 제가 만들어서 개인적으로 사용하는 것들 만큼이나요.

덧붙인 여담)

어디 jQuery plugin 광고 내용을 작성한 것 같아 좀 찜찜한 기분이 드는 이유가 뭘까요?

준비되는대로 본론으로 들어가 겠습니다.

jQuery Plugin Example - 자진삭제

한머리 — Fri, 07 Oct 2011 16:18:47 +0900

jQuery plugin guide 에 충실하지 못한 예제이라 자진 삭제하고 다시 올리려합니다.

댓글이 남아 있어 함부로 지우지 못하고 내용을 수정하였습니다.

감사합니다.

덧글:

혹시 내용 안에 함수(javascript에서 SOAP 호출 등)들에 관심이 있으셨던 분이 찾으신다면 별도 라이브러리의 형태로 다시 올리도록 하겠습니다.

혹~~~시~~~~나.. 그런 분들이 있으시다면 덧글 부탁드립니다.

ajax 페이지에서 live, delegate의 오남용!!

싸우라비 — Tue, 20 Sep 2011 11:59:12 +0900

요즘 ajax를 게시물 형태의 게시판에서 많이 볼 수 있는데요.

이때 조심해야 할것이 있습니다.

바로 live, delegate 인데요.

게시물형태의 리스트에서 화면전환 없이 등록버튼이나, 페이지 처리시에

새로운 글화면이나, 다음페이징 처리를 ajax로 호출해서 화면에 append()하는 경우가 종종 있습니다.

ajax를 호출하는 페이지, 호출당하는 페이지가 있다면...

주의하실게~

ajax 호출당하는 페이지안에 정의하는 <script>~</script>블럭안에는

live나 delegate를 사용하지 않아야 한다는 겁니다.

호출하는 페이지의 글등록버튼을 통해 ajax로 호출당하는 페이지를 요청하여

아래의 "layerNewReg" 라는 영역에 랜더링 했다고 합시다.

이때 호출당하는 페이지안에 다음과 같으면 문제가 발생할 수 있습니다.

$(document).ready(function(){

$('form').live('submit', function(){

});

</script>

live나 delegate로 해당 이벤트를 등록시에 submit 이벤트가 누적됩니다. 고로 여러번의 submit이 일어나는 거죠.

(당연한 이야기. 버튼을 여러번 눌러보세요. trigger Event~ 누적)

페이징 처리나 레이어 팝업에서 해당 글의 신규글,글수정 처리시에 까딱했다가는

의도하지 않은 중복이벤트처리로 DB가 피똥(!!)쌀 수 있습니다.

무심결에 손가는데로 하다가는 큰일납니다.

ajax페이지에서는 live나 delegate보다는 bind나 direct로 구현해야 하겠네요.~

아시는 분들은 스킵 ^^*

-테스트환경

-xhtml1.0,

-jquery.1.6.2.js

-Google Chrome 13.0.782.220

컴포지트가 추천하는 조낸 빠른 자바스크립트 CDN 활용

컴포지트 — Wed, 31 Aug 2011 10:18:26 +0900

제가 요즘 웹개발할때는 CDN 주소를 적극적으로 활용합니다.

제가 댕기는 회사에 있는 웹 서버가 사양이 빵빵한데도 불구하고 똥컴이 생각나는 성능을 내줘서 골칫거리거든요.

제이쿼리를 적극 활용하는 저에게는 CDN 주소가 있는 것만 해도 축복이지 않습니까?

하지만 CDN 호스팅도 한국에 맞게 설정하는게 좋겠죠?

이렇게 CDN 으로 스크립트 불러오는 모든 분들을 위해 제가 추천하는 CDN 주소를 보내드립니다.

속도? 보장합니다.ㅋ

jQuery CDN은 구글보다 마소가 더 빠릅니다. 한국에 접속할 경우 홍콩으로 들어가는데, 말도 안되게 진짜 빠릅니다. 고로,

jQuery 1.6.2 :

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2-vsdoc.js

jQuery UI 1.8.16 :

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js

그 외 유명 jQuery 확장도 있기 대문에 나머지 부분은 직접 확인해 보시길.

http://www.asp.net/ajaxlibrary/CDN.ashx

AOL이 호스팅하는 CDN에는 한국 서버로 접속이 됩니다. 당연히 속도 날라갑니다. 근데 dojo 프레임워크만 해줍니다.ㅋ

Dojo : http://o.aolcdn.com/dojo/1.6/dojo/dojo.xd.js

이 외에도 ext JS, mootools 등의 프레임워크 쓰는 분이나, cufon 같은 글꼴 렌더링, raphael 같은 SVG 그래픽 프레임워크 쓰는 분들도 있을 겁니다. 좋은 점은 이런 유명한 프레임워크를 CDN으로 호스팅해주는 곳이 존재한다는 겁니다.

또한 차세대 HTML 필수 프레임워크 modrenizr 도 호스팅을 해주는 사실.

속도? 미국을 경유한다지만 그래도 좋습니다. 일본 서버 경유하기 때문에 그나마 속도 나옵니다.

속도 좋습니다. 원하는 프레임워크는 아래 링크에서 찾아보시고 CDN 주소 이용해 개발하시면 됩니다.

http://www.cdnjs.com/#/search/#popular

여기서 사용하는 호스팅이 CloudFlare 라는 업체인데, DNS 서비스더군요. 근데 재밌는게 로깅에다가 앱 확장에 minify 기능까지 제공해줍니다.

IE 감지 스크립트

컴포지트 — Tue, 26 Jul 2011 15:44:04 +0900

웹 개발을 하다보면 인터넷 익스프로러라는 흔한 복병을 만나게 됩니다.

물론 ERP 같은 인트라넷성 웹 프로그램을 만든다면 어자피 액티브엑스가 약방에 감초로 들어가 IE만 신경쓰기 땜에 상관은 없지만,

대중들에게 공개되는 홍보성 및 쇼핑몰, 커뮤니티 등등의 웹 프로그램은 IE와 다른 브라우저간 렌더링 차이로 골칫거리이기도 하지만,

스크립트를 짤 때에도 꽤나 좀 짜증나는 면도 있죠. 예를 들면, innerText 속성은 IE에만 있고 다른 브라우저에는 없습니다. (물론 구현은 가능합니다.) 근데 <canvas> 태그는 IE9 이전 버전에는 아예 없는 요소이죠. 이런 등등.

어쨌든 IE에게만 돌아가게 하는 조건식을 하려면 대부분 이렇게들 하죠.

navigator.appVersion.indexOf("MSIE")

물론 이 경우에는 브라우저 버전 체크가 용이합니다. 하지만 IE 통틀어서 체크하는데 이렇게 긴 글은 필요없습니다.

어떻게 하냐구요?

'v'=='\v'

이거면 떡을 칩니다. IE와 다른 브라우저에서 비교 테스트 해보시면 입이 벌린거 입 추워지니까 닫으시길.

하지만 IE9부터는 스크립트 엔진이 아예 분리되어 더이상 이 식이 통하지 않습니다.

하지만!

또다른 IE 감지 스크립트가 나타났습니다. 이거보단 약간 길어졌지만, IE 감지에 확실한 역할을 해줍니다.

어떻게 하냐구요?

(!+ '\v1')===true

이렇게 하면 됩니다. 어때요. 참 쉽죠?

[jQuery 동영상 강좌] 20. jQuery Performance

승연아빠 — Sun, 10 Jul 2011 20:40:57 +0900

안녕하세요. 승연아빠 입니다.

[jQuery강좌] 20. jQuery Performance

jQuery 시리즈 동영상 강좌 리스트

jQuery 시리즈 강좌 리스트

[jQuery강좌] 1. 웹 개발자를 위한 jQuery 기본이해
[jQuery강좌] 2. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (1)
[jQuery강좌] 3. jQuery를 이용한 HTML DOM 접근 - 기본 셀렉터 (2)
[jQuery강좌] 4. jQuery Selector - 속성(Attribute)
[jQuery강좌] 5. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (1)
[jQuery강좌] 6. jQuery Selector - DOM 계층(Hierarchy)을 이용한 요소 접근 (2)
[jQuery강좌] 7. jQuery Filter - 기본필터(Basic Filter)
[jQuery강좌] 8. jQuery Filter - 폼 필터(Form Filter)
[jQuery강좌] 9. jQuery Filter - 자식필터(Child Filter)
[jQuery강좌] 10. jQuery Traverse - Filtering
[jQuery강좌] 11. jQuery Traverse - Miscellaneous Traversing
[jQuery강좌] 12. jQuery Traverse - Tree Traversal
[jQuery강좌] 13. jQuery Core
[jQuery강좌] 14. jQuery CSS - 스타일 관련 메서드에 대하여
[jQuery강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여
[jQuery강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여
[jQuery강좌] 17. jQuery Event - 이벤트 지원 메서드
[jQuery강좌] 18. jQuery Event - bind() 메서드
[jQuery강좌] 19. jQuery Event - 이벤트에 생명을~
[jQuery강좌] 20. jQuery Performance