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

자바스크립트로 프로그래밍 짜면서 아마 이 연산자는 쓰실런지 모르겠습니다.

바로 물결표시 (~) 인데요.

자바스크립트에도 이 물결 연산자가 먹힌다는거 알고 계셨습니까?

네. 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개로 해결되다니.

뭐 알고보면 유용하군요.

골때리는 자바스크립트는 여기까지로 하겠습니다.

그럼 즐자스코딩~

composite / 2012년 11월 13일 / 미분류 / 1 Comment

제이쿼리 팁! 기존 요소 유지하면서 텍스트만 바꾸기.

제목만 보면 못알아들을 거 압니다. 제목학원 안다닌 덕분이죠.

예제를 통해 기존 하위 요소하면서 텍스트만 바꾸는 방법을 알려드리죠.

어쨌든 이렇게 마크업이 구성되어 있습니다.

<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(‘링크다’);

이렇게 하시면 되겠습니다.

빠르게 온라인 예제를 바고 싶다면 주저마시고 링크 #1 을 클릭하세요.

그럼 이만!

보너스! 제이쿼리 없이 하고싶다면 아래 스크립트를 참고하시길.

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(‘링크다’));

의외로 쉽네..

composite / 2012년 11월 13일 / 미분류 / 0 Comments

[Polyfill] LocalStorage

LocalStorage 는 일단 모든 웹 브라우저에서 지원합니다.

하지만 IE 7 이하는 지원하지 않습니다.

하지만 MS는 영구히 보관 가능한 별도의 저장소 개념을 이미 만들어 놨습니다.

바로 #default#userData 입니다. 이게 뭐냐구요? 몰라요.

어쨌든 영구 보관 개념이 있기 때문에 IE7 이하도 사용 가능합니다.

웹 사이트에 윈도우 업데이트에서 사용하기도 했죠.

사용법입니다.

var b=document.createElement(‘b’);

b.style.behavior=’url(“#default#userData”)’;

document.body.appendChild(b);

//기존 localStorage 보관소의 데이터를 가져옴

b.load(‘localStorage’);

//localStorage에 새로운 키/값 등록

b.setAttribute(‘key’,’value’);

b.save(‘localStorage’);

//localStorage 에 저장된 key 의 값을 불러옴

var val=b.getAttribute(‘key’);

이렇게 씁니다.

따라서 localStorage 가 없는 구닥다리 IE를 배려하고자 한다면 아래와 같이 꾸미시면 되겠습니다.

if(!window.localStorage)

    window.localStorage = (function () {

        var userdataKey = ‘localStorage’,

            userdata = document.createElement(‘b’);

        userdata.style.display = ‘none’;

        userdata.style.behavior = ‘url(“#default#userData”)’;

        // userdata.addBehavior(‘#default#userdata’);

        document.body.appendChild(userdata);

        userdata.load(userdataKey);

        return {

            setItem: function (key, val) {

                userdata.setAttribute(key, val);

                userdata.save(userdataKey);

            },

            removeItem: function (key) {

                userdata.removeAttribute(key);

                userdata.save(userdataKey);

            },

            getItem: function (key) {

                return userdata.getAttribute(key);

            }

        }

    })();

하지만 안타깝게도 sessionStorage의 대안은 없습니다. 걍 쿠키드셈. 끝.

추가사항:

보통 localStorage 는 도메인당 5MB입니다. 하지만 IE의 영구저장소는 도메인당 1MB로 제한됩니다.

composite / 2012년 11월 13일 / 미분류 / 4 Comments

Windows 용 Git Server

Git는 원래 리눅스 개발할 때 버전관리를 위해 쓰던 형상관리 기술이다. 하지만 Github 등장과 Git 에 대한 관심으로 Git 형상관리에 개인 및 업체가 관심을 가지게 된 것도 일상다반사.

심지어는 자체 형상관리 프로그램인 팀 파운데이션 서버를 제작해낸 MS 까지 Git의 매력에 푹 빠지고 말았을 정도이다.

왜그럴까?

SVN보다 간결하고 오프라인에서도 버전관리가 가능다는 이점 등이 바로 Git의 매력이 아닐까.

Github 은 공개 저장소만 무료이고, 개인 저장소 쓰려면 돈내야 한다.

그래서 아마 자체 Git 서버가 필요할 분도 있을 것이다.

하지만 Git는 SSH와 맞물려 있다보니 리눅스에서만 돌릴 수 있는건 아는 사실일거다. git 프로토콜이.

하지만 Git는 http 프로토콜로도 돌릴 수 있다는 사실.

그래서 윈도우에서도 Git Server를 돌릴 수 있다는 사실.

그렇다면 윈도우에서 Git 돌릴 수 있는 프로젝트를 알아보자.

1. Gitstack

라이센스 : GPL, 2명 무료, 2명 이상 유료 (년단위 등록)

개발환경 : Apache 2.x 및 Python 2.7, PHP5

사이트 : http://gitstack.com/


Git server for Windows | GitStack

현재 윈도우에서 사용 가능한 Git 서버 중 유일한 안정 버전이다. 설치 마법사로 쉽게 설치하고 쉽게 사용할 수 있는 이점이 있다. 기업에서도 별 문제 없이 쓸 수 있는 버전인데, 안타깝게도 이 녀석의 배포본은 2명 이하에게만 무료로 제공하고, 그 이상은 연간 돈을 내야 하기 때문에 상용이다. 하지만 GPL 라이센스로 소스가 공개되어 있으니 관심있는 개발자는 한번 확인해 보는것도 좋을 것 같다.

참고로 Apache로 Git 서버 만드는 팁이 올라와 있다. 또는 Cygwin 으로 Git 서버 돌리는 방법도 있다.

이 GitStack 은 Apache 를 채용했으며, Python 으로 Git 버전 관리 프로세스를 구현하였다.

그리고 PHP로 Git 저장소 탐색 부분을 구현했다.

2. Bonobo Git Server

라이센스 : Ms-PL, 무료

개발환경 : IIS, ASP.NET 4 (.NET Framework 4)

사이트 : http://www.chodounsky.net/bonobo-git-server/

윈도우에 어떠한 상속도 받지 않고 닷넷 기술로 Git 서버를 만들어냈다.

.NET Framework 4 이상을 요구하므로, .NET Framework 4가 설치된 윈도우 서버 2003, 2008, 2008 R2, 2012 에서 구동할 수 있다.

2012는 처음부터 4.5 라서 별 상관 없지만, 2008 R2 이하는 기본적으로 설치가 안되 있으므로, 설치를 별도로 수행해야 할 것이다.

오픈소스이기 때문에, 입맛에 맞게 꾸밀 수 있다. Git 방식은 HTTP/HTTPS 를 지원한다. IIS 재량으로.

3. Git Web Access

라이센스 : Ms-PL, 무료

개발환경 : IIS, ASP.NET 4 (.NET Framework 4)

사이트 : http://gitweb.codeplex.com/

파이썬으로 만든 Grack을 토대로 만든 이 Git 서버는 심플하면서 Git의 기본적인 기능을 소화해낼 수 있는 기능을 제공한다.

ASP.NET Web Pages 기반으로 Razor 템플릿으로 제작되어 ASPX 보다 더 보기 좋게 디자인을 구성할 수 있다는 이점이 있다.

물론 기존 ASPX Page 기반으로도 사이트를 꾸밀 수 있는데. 이건 취향따라 정하면 된다.

이 프로그램은 Git for Windows 1.7.x을 필요로 한다. 먼저 설치 후 설치하는 것이 좋다.

이것도 IIS 재량이지만, 위에 어플리케이션과 한번 비교해보고 사용하는 것도 나쁘지 않을 듯 싶다.

이외에도 Git 서버를 구성하는 몇 가지 방법을 소개한다. 영어 문서지만 영어 좀 안다면 쉽게 따라갈 수 있을 것이다.

CopSSH/Git for Windows/PuTTY 로 Git 서버 구성(영문)

Cygwin 으로 Git 서버 구성(한글)

Apache 로 Git 서버 구성(영문)

이상으로 마치도록 하겠다. 끝!

composite / 2012년 10월 30일 / 미분류 / 1 Comment

jQuery Paging Plugin

업데이트: 제이쿼리 페이징 플러그인 0.2.0 업데이트! 아래 설명 쌩까고 Github 으로 신속히 이동하라!

실무에 많이 쓰지만 은근히 빡센 페이징. 동적 페이징에 머리 짜매고 계신가? 여기 종결자가 있다.

jQuery Paging Plugin!

가볍다. 2KB밖에 안되며 gzip 압축 시 1KB도 안될 것이다.

빠르다. 페이징 외 쓰잘데기 없는 효과나 부가기능 따위는 없다.

쉽다. 한줄이면 페이징 초기화가 끝난다. 서버에서 불러와야 할 거는 현재 페이지와 총 페이지 수, 그뿐이다.

동적이던 정적이던 다 된다. 전통 방식 게시판이던 ajax 로 만든 게시판이던 입맛에 맞게 쓸 수 있다.

오픈소스다. 당신이 죽쓰던 밥쓰던 상관않는 MIT 라이센스다. 물론 더 좋은 방법 있으면 공유하는 것은 미덕!

사용법?

$(‘#paging’).paging({current:5,max:50}); //총 50 페이지 중 5 페이지로 시작하는 페이징을 불러올 것이다.

이거덕분에 프로젝트 잘되서 제작자한테 커피 한잔 쏘고 싶으면 ukjinplant at hotmail dot com 으로 연락해도 된다.

그럼 다운로드는?

소스(개발용) 다운로드 | 최적화(실무용) 다운로드 | 프로젝트 홈페이지

페이징 방식이 여러가진데 이 페이징 플러그인의 롤모델이 뭐인지 궁금하면 여기여기 를 클릭하여 확인해보라.

jQuery.Paging

jQuery를 위한 간단한 페이징.

사용법 : $('#paging').paging({max:50});

속성 :
item : 페이징 요소 태그명, 기본값 "a".
itemClass : 페이징 요소 중 페이지 수 CSS 클래스, 기본값 "paging-item".
itemCurrent : 현재 페이지를 나타내는 CSS 클래스이며 페이징 요소와 중첩됨, 기본값 "selected".
format : 페이지를 나타낼 내용, 기본값 "[%d]".
sideClass : 다음 또는 이전 버튼 CSS 클래스, 기본값 "paging-side".
next : 다음 버튼 내용. 기본값 "[{5}&gt;]" ("[>]")
prev : 이전 버튼 내용. 기본값 "[{4}&lt;]" ("[<]")
first : 첫 페이지 내용. 기본값 "[1&lt;&lt;]"
last : 마지막 페이지 내용. 기본값 "[&gt;&gt;{6}]"
length : 페이지 표시할 개수. 기본값 10.
max : 최대 표현할 페이지 수. 기본값 1.
current : 현재 페이지 정의. 기본값 1.
href : a 태그일 때 링크 주소를 정의. 기본값 "#%d"
append : true 설정 시, 기존 내용을 삭제하지 않고 페이징을 포함시킴. 기본값 false.
event : 기본 이벤트 활성화. 새로고침 없이 동적으로 페이징 초기화됨. ajax에 유용. 기본값 true.
>event=true 일 때 가능한 이벤트 정의.
onclick : 페이징 버튼 클릭 시 호출. false 반환 시 동적으로 페이지가 바뀌지 않음. 동적 페이징을 원하지만
                  href로 인한 링크 이동을 원하지 않을 경우 이벤트 메서드인 event.stopPropagation() 호출.
onprev : 이전 버튼 초기화 시 이벤트. 'this' 는 이전 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onnext : 다음 버튼 초기화 시 이벤트. 'this' 는 다음 버튼 요소를 가리킴.(plain DOM. not jQuery!)
onitem : 각 페이지 버튼 초기화 시 이벤트. 'this' 는 각 페이지 버튼 요소를 가리킴.

치환자 (format,next,prev,href,first,last 속성 전용)
{0} = 클릭 시 페이지
{1} = 페이지 길이
{2} = 처음 페이지
{3} = 마지막 페이지
{4} = 이전 파트의 마지막 페이지
{5} = 다음 파트의 처음 페이지
{6} = 맨 마지막 페이지

판올림 내역
0.1.0 : 초기 버전
0.1.5 :
처음 페이지 및 마지막 페이지 추가. 내용에 치환자 적용 가능.
'append' 옵션 추가 : true 설정 시 기존 내용이 삭제되지 않고 포함됨.
{6} 치환자는 마지막 페이지(max 값과 동일) 를 가리킴
0.1.6 : first 또는 last 내용에 false 설정시 만들지 않도록 기능 추가.

composite / 2012년 10월 11일 / Piss Development / 11 Comments

app.js 자작 예제 프로그램 공개!

<

p style=”text-align: center; clear: none; float: none;”>

다운로드 링크 클릭 후 소스를 볼 수 있으며, HTML 로 만들어져 있다. 내가 만들었지만 app.js 는 놀랍다.

MIT 라이센스이므로 당신이 원하는 앱으로도 공부하기에 충분할 것이다.

composite / 2012년 9월 26일 / 미분류 / 0 Comments

appjs Dev kit

app.js 개발을 위한 키트.

내용물은 node.js 포함하여 app.js 등이 있으며 크기는 약 16MB.

첨부파일 제한 때문에 어쩔 수 없이 분할압축하여 올림.

이 배포본은 appjs 공식 사이트의 배포본을 기초로 하여 제작됨.

따라서 readme.txt 파일을 참조하여 유의사항을 짚어본 후 개발 및 배포할 것.

예제 또한 app.js 에서 만든 예제를 올려두었음.

그럼 app.js 의 재미를 느껴보기 바란다.

조만간 mac 및 linux 용 개발 키트도 만들어 올릴 예정이다.

cfile7.uf.1777D039505C203A0101C8.rar

<

p style=”text-align: left;”>cfile10.uf.184AE639505C203C330869.rar

한번에 받기 (github)

composite / 2012년 9월 21일 / 미분류 / 0 Comments

Node.js 로 데스크탑 앱을 만드는 app.js

node.js 에서 드디어 UI도 정복하는 건가? 커뮤니티에서 이미 데스크탑 UI까지 이식하려 한다.

UI 프레임워크는 다른 것도 봤듯이 API가 드럽게 방대해서 일반적인 데스크탭 앱 프레임워크를 만들기엔 당연히 무리.

하지만 그런 UI 구조에 구세주를 내려주셨으니 그것은 바로 Chrome Embedded Framework

바로 프로그램 안에 HTML5를 이식할 수 있는 프레임워크이다. 거기다가 크로스 플랫폼이다.

app.js 는 바로 이 크롬 임베디드로 UI 프레임워크의 방대함을 간단하게 극복했다.

만약 Qt나 WxWidget 를 자바스크립트로 이식한다 해도 그 API를 알아야 하지만, HTML은 그럴 필요가 없기 때문이다.

Morteza Milani 와 Brandon Benvie 2명이서 만든 이 node.js 프레임워크는 단 몇분만에 UI를 입힌 데스크탑 앱을 만들 수 있도록 도와준다.

준비물 : node.js 32비트 (64비트의 경우 크롬 엔진이 지원하지 않아 안된다 한다. 현재 수정 중).

NPM:

npm install appjs

NPM 설치 시 윈도우의 경우 Visual Studio 2010 컴파일러가 없는 경우 네이티브 코드 컴파일이 안될 것이다. 다행히도 각각의 바이너리를 제공하니 다운받으면 된다.

AppJS 0.0.19 Distributables:

      <ul><li><a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-win32-ia32.zip">Windows</a></li><li>Linux <a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-linux-ia32.tar.gz">32 bit</a> / <a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-linux-x64.tar.gz">64 bit</a></li><li><a href="http://dists.appjs.org/0.0.19/appjs-0.0.19-darwin-ia32.zip">Mac OS X</a></li></ul><p>그런 다음 <span style="font-family: Courier New;">node --harmony node_modules/appjs/examples/hello_world/app.js</span> 실행을 해 보시라.

화면이 대충 이런 식으로 나올 것이다.

아래는 본인이 직접 앱을 시연하는 동영상이다.

크롬 개발자 도구도 지원하기 때문에 UI 디버깅도 척척 해낼 수 있다.

그럼 이거를 어디다 쓰면 좋을까? 좋은 질문이다.

활용 범위는 다양하다. 일단 HTML5 이므로 여러분이 원하는 최대한의 표현을 할 수 있다. 차트던 그래픽이던 모두.

서버 모니터링할때 이쁘게 꾸밀 수 있지 않겠는가?

아니면 아예 클라이언트 데스크탑 앱으로 해도 손색이 없다. 커뮤니티 전용 앱이라던가, 웹 게임 등. 다양한 활용 범위가 있을 것이다.

또한 안정화가 되면 비즈니스에서 보안을 요구하는 사내 프로그램에 대한 생산성 향상을 꾀할 수 있다.

또한 HTML5/CSS/Javascript 정도 알면 당신은 이미 100% 데스크탑 앱을 만들 수 있다.

또한 node.js 자스 코드를 그대로 웹상에서 활용 가능하다. 말 다했다.

아직 취약점이 있고 개선해야 할 부분은 천지다. 하지만 이 가능성은 이미 충분하고도 남는다.

이제 자바스크립트로도 데스크탑 앱을 만들 수 있다. 준비 되었으면, 참여하고 경험하라!

composite / 2012년 9월 19일 / 1127 / 1 Comment

골때리는 자바스크립트 외전 2탄 – 지연된 객체(Deferred Object)

오랜만에 골때리게 한번 팁을 날려보겠습니다.

jQuery 1.5 에서 획기적이지만 잘 안쓰는 게 있죠.

바로 지연된 객체(Deferred Object) 입니다.

이 객체의 위력을 정말 느껴본사람 빼고는 잘 안쓰죠.

이놈의 패턴이 어떻냐..

$.get(‘/serv/get.php’,null,function(){

     alert(‘뭘 받아온듯.’);

});

이 기존 패턴과

$.get(‘/serv/get.php’)

    .success(function(){

         alert(‘뭘 받아온듯.’);

    });

이 제이쿼리에서 제안한 패턴과 똑같은 효과를 줍니다.

뭐.. 느낌상 패턴은 당연히 틀리죠.

분명 Ajax는 비동기 스크립트입니다. 하지만 동기한 것 처럼 뭔가 착각을 불러일으키기도 하고.

바로 비동기 스크립트를 이렇게 눈에 보기 좋게 꾸며 놓는다는 장점이 있습니다.

node.js 개발하다보면 이벤트 중점적이다 보니 종종 비동기 쓸때 이런 패턴이 발생합니다.

var mongodb = require(‘mongodb’),

Db = mongodb.Db;

var db = new Db(‘test_db’, new Server(process.env[“MONGODB_HOST”], process.env[“MONGODB_PORT”], {}));

db.open(function(err, db) {

db.collection(“test_collection”, function(err, collection) {

collection.find({“cmd”:cmd}, {“sort”:”order”}, function(err, cursor) {

cursor.each(function(err, item) {

if (item != null) {

// Do something

}

if (item != null) {} // 반복문 끝

});

db.close();

});

});

});

오우 쉣. 함수안에 함수안에.. 너무 지저분합니다.

하지만 제이쿼리가 제안한 지연된 객체 패턴으로 간다면 저걸?

db.open()

.collection(‘test_collection’)

.find({“cmd”:cmd}, {“sort”:”order”})

.fetch(function(err,cursor){

cursor.each(function(err, item) {

if (item != null) {

// Do something

}

if (item != null) {} // 반복문 끝

});

})

.close();

이런 식으로 비동기 스크립팅에 제이쿼리의 최강무기 메서드 체이닝을 구사할 수 있다는 겁니다.

물론 저런 패턴 제공하는 놈은 아직까지 없으니 그대로 따라하지 마시길. 그냥 예를 든거니까요.

그럼 어떤 원리로 하는건지 오늘 골때리게 설명해 드리도록 하겠습니다.

일단 먼저, 동적 클래스의 개념과 클로저 개념을 이해하고 있어야 합니다.

저는 그 이해를 하고 있는 분으로 간주하고 팁을 씁니다. 모르면 문학이님이 떡하니 강좌 올려놨으니 보시길.

..라고 무섭게 얘기했는데. 어렵지 않습니다. 먼저 동적 클래스를 만들 함수를 하나 짜주세요.

fuynction MyDefferd(){

this.fn={};

//초기화 할거 있음 하덩가.

}

그리고 지연된 객체에서 체이닝에 사용할 프로토타입 함수 하나 만들겠습니다.

MyDefferd.prototype.done=function(func){

this.fn.done=func;

};

뭐.. 준비 끝입니다.

그리고 이제 지연된 객체를 리턴할 함수를 하나 만들겠습니다.

그리고 이 함수는 비동기 작업을 할 겁니다. 간단하게 setTimeout 을 쓰겠습니다.

function Deffer(delay){

var deff=new MyDefferd();//아까 만든 지연객체를 동적으로 하나 불러와 주시고.

alert(‘작업 시작!’);

setTimeout(function(){

if(typeof(deff.fn.done)==’function’)

deff.fn.done();//done 함수를 끌어다 씁니다.

},delay*1000);//몇초 후에? 님이 쓴 초 후에.

return deff;//반드시 동적 지연 객체를 반환해줘야 합니다!

}

이것으로 지연객체 패턴을 사용할 수 있는 함수를 쓸 준비가 끝났습니다. 참 쉽죠?

어떻게 쓰냐? 간단합니다. 예를 들어 3초 후에 작업 끝 메시지가 나오도록 꾸며보겠습니다.

Deffer(3).done(function(){

alert(‘작업 끝!’);

});

그럼 처음에 작업 시작이란 경고창이 뜬 다음, 3초 후에 작업 끝이란 경고창이 뜰겁니다.

그렇게 나오면 성공!

어때요. 참 쉽죠?

동적 클래스는 함수 종료 후 클로저 때문에 메모리 다시 반납해 하는걸 개나 줘버라는는 성질 덕분에 deff 함수에서 언제든지 저렇게 동적 클래스 안에 있는 데이터를 잃지 않고 갖다 쓸 수 있습니다.

이걸 이용해서 지연된 객체를 통해 비동기 스크립트 패턴을 동기 스크립트 패턴같이 꾸밀 수가 있는 것이죠.

이런 지연 객체를 응용해서 Ajax는 물론, node.js 에서 할 수 있는 대부분의 비동기 작업에서 여러분의 눈을 정화시키는 패턴을 만들 수 있을 것입니다.

그리고 쿨하게 오늘의 골때리는 팁을 마치겠습니다.

링크 #1은 지연된 객체 패턴을 이용한 동적 스크립트 불러오는 함수입니다.

링크 #2는 이 강좌 예제입니다. 바로 실행되고 또 하고싶음 run 버튼 누르셈.

라이센스 : 해당 강좌에 사용한 기술은 죽써도 밥써도 상관없는 Public Domain. 강좌 자체는 크리에이티브 커먼즈 라이선스

composite / 2012년 9월 10일 / 미분류 / 0 Comments

jQuery MsgBox 0.2.6 Beta

아직 베타.

https://github.com/composite/jQuery.MsgBox

http://jsfiddle.net/preFy/

리뷰 곧 작성 예정

composite / 2012년 9월 10일 / 미분류 / 0 Comments