용우의 기타등등

오늘 보니깐  John Resig가 prettyDate 을 만들었네요.
그래서 전 beautyDate을 만들어 봤습니다.-_-;;
사실 이걸 보고 만든건 아니고요;; (소스중 분기하는 방법은 보고 참고했습니다.^^;)
전에 모프로젝트에서 쓸려고 만들었는데 사용할 일이 없어 공개합니다.
사용법은 간단합니다.
기본적으로는 첫번째 처럼 작동하고요.
옵션을 통해 자신에 입맛에 맞게 설정하시면 됩니다.
beautyDate(new Date); ->2008/01/30 01:04 beautyDate(new Date,{format:"{yy}/{mm}/{0d} {ww} {ap} {hh}:{ii}:{ss}"}); ->08/01/30 Wed am 1:08:49
옵션에는 총 4가지가 있습니다.
위에서 본 format 과 monthFormat,weekFormat,ampmFormat 입니다.
간단히 보면 format은 나오는 문자의 포맷입니다.
기본적으로 "{yyyy}/{mm}/{0d} {0h}:{0i}" 이런 형식이고 아래의 형식으로 자신에 맞게
구성할수 있습니다.
{yyyy} - 4자리 년도
{yy} - 2자리 년도
{mm} - monthFormat에 지정된 월 포맷
{dd} - 일
{0d} - 일이 한 자리 일 경우 앞에 0을 추가
{ww} - weekFormat에 지정된 요일 포맷
{ap} - ampmFormat에 지정된 am/pm 포맷
{hh} - 12시간 포맷
{HH} - 24시간 포맷
{0h}  - 12시간 포맷일때 한 자리이면 0 붙임
{0H}  - 24시간 포맷일때 한 자리이면 0 붙임
{ii}    -  분
{0i}   -  분이 한 자리이면 0 붙임
{ss}  -  초
{0s}  -  초가 한 자리이면 0 붙임

그리고 3개의 포맷이 있는데
monthFormat은 달의 포맷이고
weekFormat은 요일의 포맷,
ampmFormat은 am/pm 포맷입니다.
기본적으로
["01","02","03","04","05","06","07","08","09","10","11","12"] ,
["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
["am","pm"] 이렇게 각각 등록되어 있는데 맘에 안들면 원하는 포맷으로 바꾼 후 옵션파라메터로 넘겨서 사용하면 됩니다.

이렇게 4가지 옵션이 있으며 각 옵션은 아래와 같이 지정하여 사용됩니다.
var options = {format:"{0d}-{mm}-{yy} ({ap}){0h}:{0i}", monthFormat :["Jan","Feb","Mar","Apr","May", "Jun","Jul","Aug","Sep","Oct","Nov","Dec"], weekFormat:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], ampmFormat:["AM","PM"]} beautyDate(new Date,options); ->30-Jan-08 (AM)01:28

아래는 전체 소스입니다. 필요한 곳에 유용히 쓰세용.
/** * JavaScript beautyDate * * @author mixed <mailto:i . nevalose (at) gmail . com> * @license GNU * @blog http://mixed.tistory.com/ * * @param {Date} date * @param {Object} customOption * * @return {String} beautyDate */ function beautyDate(date,customOption){ if(arguments.length<1||date.constructor != Date){ return false; } var options = { format :"{yyyy}/{mm}/{0d} {0h}:{0i}", monthFormat :["01","02","03","04","05","06","07","08","09","10","11","12"], weekFormat :["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], ampmFormat :["am","pm"] } customOption = customOption||{}; for(var i in customOption){ options[i] = customOption[i]; } options["rowData"] = [date.getFullYear()+"", date.getMonth(), date.getDate(), date.getDay(), date.getHours()<12?0:1, date.getHours(), date.getMinutes(), date.getSeconds()]; return options.format.replace(/\{([^{}]*)\}/g,function(type){ var coptions = options; function addZero(num){ return (num>=10)?num:"0"+num; } function twelveNotation(num){ return (num>12)?num-12:num; } var rowData = coptions.rowData; var monthFormat = coptions.monthFormat; var weekFormat = coptions.weekFormat; var ampmFormat = coptions.ampmFormat; return type=="{yyyy}"&&rowData[0]|| type=="{yy}"&&rowData[0].slice(2,4)|| type=="{mm}"&&monthFormat[rowData[1]]|| type=="{dd}"&&rowData[2]|| type=="{0d}"&&addZero(rowData[2])|| type=="{ww}"&&weekFormat[rowData[3]-1]|| type=="{ap}"&&ampmFormat[rowData[4]]|| type=="{hh}"&&twelveNotation(rowData[5])|| type=="{HH}"&&rowData[5]|| type=="{0h}"&&addZero(twelveNotation(rowData[5]))|| type=="{0H}"&&addZero(rowData[5])|| type=="{ii}"&&addZero(rowData[6])|| type=="{0i}"&&addZero(rowData[6])|| type=="{ss}"&&rowData[7]|| type=="{0s}"&&addZero(rowData[7])||"'"+type+":undefined type'"; }); }

구글그룹스의 jquery 포럼을 메일로 받아보는데  재미있는 질문이 올라왔다.

어떤 친구의 질문은  jquery을 보면서 공부하고 있는데  fn = eval("false||function(elem){return " + fn + "}");
이런 문법이 있다. 왜 n = Function('elem', 'return '+fn)  이렇게 하지 않고 위와 같이 했냐라는 질문이였다.

처음에 이 질문을 보고 갑자기 나도 왜 위와 같이 했을까 라는 고민을 했다.

eval("false||function(elem){return " + fn + "}"); 이 문장을 보며 의아해 했던 것은 두가지 인데
첫번째는 왜 Function을 사용하지 않았나?
두번째는 앞부분에 false||을 사용했는가? 이다.

그래서 jquery를 받아서 eval("false||function(elem){return " + fn + "}"); 이 부분을 찾아봤다.
솔직히 이해를 잘 못했다.(내공 부족)-_-;;
그러다 포럼의 John Resig을 비롯하여 다른 사람들이 올린 글을 보니  이해하기 쉬웠다.

결론은
첫번째는 Function으로 만들면 scope가 local scope가 아니라 global scope가 되기 때문이라고 한다.
즉 eval("false||function(elem){return " + fn + "}");는 함수 scope안에서 있는것들을 사용할수 있는데 Function은 global 변수를 사용해야 하기 때문이다.

두번째는 약간의 브라우져의 특성때문이다.
우리가 json을 string으로 받아서 보통 eval("("+json+")") 이렇게 처리하는 이유와 비슷하다. 그래서 처음에는 John Resig 위에 방법으로 하다가 ie,opera에서 안되서  어쩔수 없이 eval("false||function("+....+"}") 이와 같은 방법을 했다고한다.

하여간 오랫만에 건진 팁!

난 dojo에 관심이 없어. 그냥 있었는데 오늘 보니 dojo에서 새로운 자바스크립트 압축기를 내놨다는 글을 봤다.
이건 일반적인 압축방법과 달라서 더 흥미롭게 봤다.

기존의 압축방식과 틀린 이유는 정규표현식으로 압축하지 않고 Rhino의 실제 파서를 이용하여 압축을 한다고 한다.

해당 페이지를 보면 압출률 또한 좋고 더욱 좋은것은 변수명을 변경해주므로서 보안상의 문제를 어느정도 해결한듯. 구글의 js를 보면 변수명이 변경되있는데 ShrinkSafe도 비슷한 효과를 내는것 같다.

음... 단점이자 장점일수 있는데 다른 압출툴과 달리 되돌릴 방법이 없다.

그리고 추후에는 Gzipping도 지원할것 같다.

그럼 배포의 최적화 조건인 Minifying, Obfuscating, Gzipping 이 3가지 조건이 다 만족하네.

다음은 압축된 모습 짤방.

John Resig씨가 ecmascript4를 사용할수 있는 환경을 셋팅하고 간단한 사용법을 동영상으로 촬영을 했습니다.

아직까진 브라우져와 연결하여 사용할순 없고 (구현중 이랍니다.그래서 브라우져에서 지원하는 함수들은 사용할수 없습니다.)
일부 기능들 또한 사용할순 없지만 그래도 es4를 느끼기엔 충분한것 같습니다.

ecmascript4의 기능인 class, getter,setter, inheritance, interface, type annotation...등 을 직접 사용할수 있습니다.
그리고 아래 ppt을 보시면 좀더 자세한 es4의 내용들을 볼수 있습니다.
아래 ppt는 얼마전에 John Resig씨가 포스팅한 ECMAScript 4 Speaking Tour 중 하나입니다.아니면 이곳에 가셔서 es4의 스펙을 확인하고 연습하시면 재미있을 것 같습니다.^^;;

올해가 아직 남아 있지만 지금까지 의미 있던 사건중에 하나가 매쉬업 경진대회 였는데.

내년에도 하는것 같다. 아직 자세한 내용은 안나와서 잘 모르겠지만

나와있는 내용만 보더라도 규모도 많이 커진 것 같고 선정 방식도 많이 바뀐것 같다.



이번엔 참가자 수도 상당히 많을것 같은데... 내년엔 뭐로 참가해볼까?

요즘 보면 상당히 잘 만든 매쉬업들이 보이는데 이번에는 1회때에 비해 양이나 질적으로 높아질것 같다.

또 한동안 즐거운 상상을 하면 지내겠구나!


많이 참석 하셔서 좋은 결과 얻으시길 바랍니다~

ps.입상하시면 돈도 줍니다.-_-;;;(내년에는 모르겠지만..)

JSSpec 토글링 기능 추가 됬으면 좋겠습니다.
필요해서 만들었는데 나중에 비슷한 기능 추가 해주세효.

ps. 아주 잘쓰고 있습니다.^^


javascript(onload시 추가)
document.getElementById('log').childNodes[1].onclick = function(e){
            var currentElement;
            if(e){
                currentElement = e.target;
            }else{
                e = window.event;
                currentElement = e.srcElement;
            }
            while(currentElement.nextSibling.nodeType!=1){
                currentElement = currentElement.nextSibling;
            }
            currentElement.nextSibling.style.display = (currentElement.nextSibling.style.display=="none")?"block":"none";
};

css
ul.specs li h3 {
    font-weight: bold;
    font-size: 0.75em;
    padding: 0.2em 1em;
    cursor:pointer;(추가)
}

오늘 Lazy Function Definition Pattern 이란 글을 읽었는데 도움이 될것 같아 정리해둔다.

Lazy Function Definition Pattern은 많은 언어도 있지만 늦은 초기화랑 비슷하다.
즉 필요할때 생성하고 그 이후에는 재활용하는것을 말한다.

피터씨는  이와 같은 패턴을 Lazy Function Definition Pattern이라고 한다.
자바스크립트에서 이 기법을 구현하는데는 많은 방법이 있는데 여기에서는 4가지 방법을 소개하고 최적의 방법을 알려 준다.

문제는, foo라는 함수는 호출을 하면 data객체를 반납하는데 처음에 호출시에만 date를 생성하고 다음 호출에는 재활용해야한다. 이러한 foo함수를 만드는것 문제이다.

1.고전 적인 방법.

var t;
function foo(){
    if(t){
       return t;
    }
    t = new Date();
    return t;
}

이 방법에는 두가지 문제가 있다.
첫번째는 여분의 t라는 글로벌 변수를 사용해야 한다.
두번째는 실행시 코드가 최적화 되어있지 않다. 즉 매번 if문을 실행 해야한다.

2.묘듈 패턴.(The Module Pattern)

var foo = (function() {
    var t;
    return function() {
        if (t) {
            return t;
        }
        t = new Date();
        return t;
    }
})();

이 묘듈 패턴으로 첫번째 문제는 해결할수 있다.클로우져(closure) 이용하여 글로벌 변수 t를 숨기고  오직 foo에서만 사용할수 있게 했다.
하지만 이 패턴으로는 두번째 문제를 해결할수 없다. 좋은 패턴이긴 하지만 여기에서는 유용하지 않다.

3.함수는 오브젝트(Functions are Objects)

function foo() {
    if (foo.t) {
        return foo.t;
    }
    foo.t = new Date();
    return foo.t;
}

자바스크립트에서는 모든 함수는 오브젝트이다. 그렇기 때문에 프로퍼트를 가질수 있고 위와 같은 방법을 사용할수 있다. 이 방법은 매우 깔끔하고 보기는 좋은나 여전히 두번째 문제는 조건절을 해결하지 못했다.
(이 방법은 원래 있던 프로퍼티를 있는 듯 사용하고 있어서 나중에 모르는 사람이 봤을때 많이 헤갈리는것 같았다. 개인적으로 비추.)

4. Lazy Function Definition
이글의 저자인 피터씨가 추천하는 방법이다.

var foo = function() {
    var t = new Date();
    foo = function() {
        return t;
    };
    return foo();
};

이 방법의 원리는 클로우져를 이용한 방법이다.
처음 foo를 실행했을때 처음 t에 Date가 할당되고 foo함수에 클로우져가 할당되고 Date를 반환한다. 그 다음 호출할때는 foo에 할당된 클로우져를 호출하여 바로 Date를 반환한다.
이 방법이 이해가 되지 않는다면 이글을 참조하면 될것 같고 하지만 이글과 다른게 이 방법은 의도적으로 사용했다는 점이다.

얼마 전에 블로고스피어을 떠들석하게 했던 google gear~
Choosing an Offline Application Architecture에  흥미로운 것들이 있다.
어떻게 오프라인 어플리케이션을 구축할것인가?

UI개발자로서 너무나 흥미로운글. 전에 고민했던 내용들이 있다.
오프라인과 온라인 어플이 같아야할까? 싱크를 어떤식으로 맞추는것이 좋은 방법인가? 등등..
언제나 트레이드오프는 존재한다. 어떻게 효율적으로 오프라인을 구성해야하는가?

ps.음..UI개발은 아무리 생각해봐도 재미있는것 같다.
왜 UI개발을 천대받는지 모르지만 정말 재밌는 직군이다~
개발도 할줄 알아야하지, 디자인 감각도 있어야하지, 심리학,사회학 등등 할줄 알아야하는 만능 엔터테이너~
빨리 빨리 공부하자!!!!!

스크립트을 쓰다보면 제일 난감한 것이 디버깅이다.
물론 firefox에서는 상당한 수준의 디버깅 툴인 firebug가 있기 때문에 다행이고 opera등 타 브라우져도 그럭저럭 괜찬은 수준의 디버깅툴을 지원하고 있다.하지만 제일 디버깅 하기가 난감한 브라우져는 ie....난감할때가 많다. 물론 ie developer tool을 제공하고 기타 visual studio와 연동되어 에러시 해당 부분을 알려주는 등 많이 편해지긴 했으나 아직은... 불편하다.

그러다 몇일전 우리 팀의 한분인 태곤씨에게서 ie pro를 추천받았다.
ie pro는 간단히 말하면 ff의 장점인 user script,plug in 등 기타 부가기능을 사용할수 있게 해주는 add on 프로그램이다.

이것 저것 살펴보다가 plugin 쪽에 firebug lite++를 확인했다.firebug lite++는 firebug lite를 확장한것 같았다. firebug lite는 간단히 ff뿐만이 아니라 타 브라우져에서도 firebug의 적은 기능을 사용할수 있게 하는 툴이다.
(물론 사용하기엔 아직 많이 부족하다.)

그러나 firebug lite++는 설명에 보면 괜찬을것 같아 한번 설치 해봤다.

1. 먼저 ie pro을 설치하기(브라우져 닫고 다시 열어야함.)
   
2. firebug lite++ user script 설치하기
3. firebug user plug in 다운 받기.
1. plug in을 다운 받은후 압축을 푼후에 나온 파일확장자를 다시 zip을 수정후 다시 압축을 풀어야한다.
4. 플러그인 폴더(C:\Program Files\IE7Pro\plugins)에 폴더 만들고  안에 3개(js 1개,png 2개)을 넣고 브라우져를 닫고 다시 열면됨.

위와 같이 설치했다면 아래와 같이 firebug lite++단추와 ie pro단추가 보인다.

그리고 초록색 버튼을 클릭하게 되면 아래와 같이 나온다.

주요기능으로는 dom tree를 확인할수 있고 기본기능인 console과 dom tree에서 원하는 엘리먼트를 클릭하면 해당 엘리먼트의 프로퍼티들을 확인할수 있다. 그외의 기능은 아직 굉장히 블안하고 사용할만 하지 않다.



아직은 많이 불안하긴 하지만 기존의 디버깅하는 방법과 같이 사용한다면 그리 나쁠것 같지 않다.

ps.별다른 debugger없이도 다들 잘 개발하던데 난 아직 멀었나보다..;;