WebStorm은 Javascript용 IED이다. 여러가지 기능들이 Eclipse에서 자바개발 할 때에 준하는 편의성을 제공한다. 예를 들면 배열과 리터럴 객체의 마지막 요소 뒤 콤마(,)등을 Java의 문법오류와 비슷하게 보여주고, Git last commit의 local diff 표시, jslint inspection 등 일반 에디터에서 front-end 개발할 때와는 다른 사용자 경험을 제공한다. 물론 지인중에는 못생겼다는 이유로 싫어하기도 하지만..

그런데 한가지, Copy&Past를 하면, 들여쓰기가 필요이상으로 많이 되서 불편하다.

관련 옵션을 계속 찾았는데, 바쁘다는 핑계로 몸으로 떼워오다가(shift+tabsssss) 맘잡고 이리저리 찾아보다 드디어 찾았다.

Setting - IDE - Settings - Editor - Smart Keys

Reformat on past 란 옵션이 있는데, CnP를 할 때, 붙일 코드에 프로젝트에서 정한 Code Style을 어떻게 적용할지를 정하는 옵션이다. 기본값이 'indent Block'으로 Past Block째 들여써 버린다.(왜 이게 기본 값인지는 모르겠음.) 이 옵션을 그 이외의 옵션으로 바꿔주면, 이쁘게 코드가 붙는다. 더 이쁘게 붙기를 원한다면 Code Style 에서 code format을 정해주면 된다.

CodeMirror는 코드 에디터를 위한 javascript 라이브러리다. 이를 이용하면 웹에서 쉽게 highlight, braek point, search, replace, lineNumber 등이 지원하는 에디터를 붙일 수 있다. HTML, CSS, JS부터, SQL, C, Python, R까지 무려 38개에 달아는 언어, 문법의 코드 하일라이팅을 제공해서 jsbin.com, JSHint, webglplayground.net 에서도 활용되고 있는 멋진 라이브러리다.

CodeMirror는 XML 에디터도 지원하는데, 관련 모드가 두가지가 있다. XML/HTML mode와 Pure XML 모드다. 원래 CodeMirror는 XML/HTML만 지원했지만, Dror Ben-Gai란 분이 작년 8월경 'XML은 HTML과 완전히 다른거 같아. 그래서 내가 XML 파서를 만들었어' 하며 pull request를 날리면서 추가됐다.

XML/HTML 모드는 말 그대로 XML만 위한건 아니고 HTML도 지원한다. htmlMode와 alignCDATA 옵션을 통해 원하는데로 설정할 수 있다. 세팅도 정말 쉽다.

      //
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: {name: "xml", alignCDATA: true},
        lineNumbers: true
      });
      //

Pure XML 모드 는 순수한 XML만 다루며 더 간단한다.

      //
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: {name: "xmlpure"}});
      //

그런데, 이놈이 오늘 말썽이였다. 프로젝트에 이를 이용해 구현한 XML 에티더가 있는데, IE에서 Script 에러가 났다. (IE를 쓰질 않아서 몰랐음;) ExtJS4와 혼재된 소스였기 떄문에, 이것 저것 에러의 요인이 있을 수 있어서 처음에는 소스를 의심했으나 아 망할. CodeMirror 문제였다.

다음 코드중 f로 넘어오는 함수로 f.apply(this, arguments); 를 할때 Exception이 발생하는데, 파볼까... 하다가 버전업되리라 믿고 XML/HTML모드로 변경했다.

    // codemirror.js 1736 line
    function operation(f) {
      return function() {
        if (!nestedOperation++) startOperation();
        try {var result = f.apply(this, arguments);}
        finally {if (!--nestedOperation) endOperation();}
        return result;
      };
    }

사이트를 유심히 보니 현재 2.21버전까지도 pure XML 모드는 experimental 한 기능이다. 최신이 꼭 좋은건 아니다. ㅡㅡ; 이슈 등록하면 수정해 주려나..

이 글은 canvas의 toDataURL()과 'origin-clean'에 관한 글이다.

Canvas Sample

getContext('2d') 메서드를 호출하면 canvas Element는 2D 이미지를 그릴 수 있는 CanvasRenderingContext2D 객체를 반환한다.

    
    snapshot
    

이렇게 반환받은 CanvasRenderingContext2D 객체로 여기다가 드로잉 질을 할 수 있다. 노랑색으로 바탕색을 깔고 텍스트 하나를 그려주자.

    ctx.fillStyle = '#ffffaa';
    ctx.fillRect(0, 0, 300, 300);
    var text = "This is text drawn in canvas ";
    ctx.font = "15px serif";
    ctx.fillStyle="#ff0000";
    ctx.fillText(text, 50, 140);

그런데, 이 객체에는 벡터 방식의 드로잉 뿐만 아니라 외부에서 비트맵 이미지도 넣을 수 있다.

    var img = new Image();
    img.src = "some_image_URL";
    img.addEventListener('load', function(){
        ctx.drawImage(img, 10, 10, 200, 100);
    });

이미지 로딩이 끝나고 캔버스에서 써야 하므로 load 이벤트 핸들러로 처리한다.

toDataURL()

자 이제 이걸 PNG 이미지로 빼보자.

    var btn = document.getElementsByTagName("button")[0];
    btn.addEventListener('click', function(){
        var snapshotPNG = canvas.toDataURL();
        window.open(snapshotPNG, 'snapshot', 'width=300, height=300');
    });

Security Error

초간단 canvas 데모다. 자 그럼 이제부터 본론.. ctx.drawImage()로 canvas에 넣을 이미지의 도메인을 현재 페이지 도메인과 다른 도메인으로 바꿔보자.

    img.src = "other_image_URL";

이러면 canvas.toDataURL()라인에서 console에 다음과 같은 오류가 난다.

    Uncaught Error: SECURITY_ERR: DOM Exception 18

이는 '동일 원본 정책'위반으로 canvas는 현재 문서와 다른 도메인의 리소스가 들어가면 toDataURL()를 허용하지 않는다. cross-origin information leak 를 방지하기 위해서라나... 어쨌든 이건 생각보다 룰이 강력해서 canvas에 현재 보이는지 와는 관계 없다. 뭔 말인고 하니..

만약 drawImage()를 한 다음에 다시 싹 지워 버리면 어떨까? canvas는 Flash, SVG같은 retain mode가 아닌 immediate mode 라서 매번 pixel drawing이 일어나므로 뭘 그렸든 다시 위에 몽땅 덧칠을 해버린다. 그러면 상관없지 않을까?

    img.load = function(){
        ctx.drawImage(img, 0, 0, 100, 100);
        ctx.fillStyle = '#ffffaa';
        ctx.fillRect(0, 0, 300, 300);

    };

하지만 동일하게 에러. canvas.toDataURL()는 한번이라도 원본 정책이 손상되면 작동하지 않는다. 이것이 'Origin-Clean'이다. 한번이라도 더럽혀졌으면 용서없다. ㅡㅡ;

Origin-Clean

Origin-Clean은 플래그 값으로 canvas 가 시작할때 값은 true이다. 다음에 해당할때 false로 바뀌고 한번 바뀌면 true로 바뀌지 않는다.

• drawImage()가 현재 문서와 다른 도메인의 HTMLImageElement나 HTMLVideoElement를 호출되었을때.
• drawImage()가 origin-clean 값이 false인 HTMLCanvasElement를 호출되었을때.
• fiilStyle 속성이 현재 문서와 다른 도메인의 HTMLImageElement나 HTMLVideoElement의 CanvasPattern을 지정했을때.
• fillStyle 속성이 origin-clean 값이 false인 HTMLCanvasElement 으로 CanvasPattern을 지정했을때.
• strokeStyle 속성이 현재 문서와 다른 도메인의 HTMLImageElement나 HTMLVideoElement의 CanvasPattern 을 지정했을때.
• strokeStyle 속성이 origin-clean 값이 false인 HTMLCanvasElement 으로 CanvasPattern지정했을 때.

Origin_clean 값이 false이 되면, canvas.toDataURL()과 ctx.getImageData() 모두 보안오류가 난다.

샘플 전체 소스.

<!Doctype html>
<html>
<head>
    <title>canvas</title>
</head>
<body>
    <canvas width="300" height="300"></canvas>
    <button>snapshot</button>
    <script type="text/javascript">
        var canvas = document.getElementsByTagName("canvas")[0];
        var ctx = canvas.getContext('2d'); // return CanvasRenderingContext2D Object.

        ctx.fillStyle = '#ffffaa';
        ctx.fillRect(0, 0, 300, 300);

        var text = "This is text drawn in canvas ";
        ctx.font = "15px serif";
        ctx.fillStyle="#ff0000";
        ctx.fillText(text, 50, 140);

        var img = new Image();
        img.src = "some_image_URL";

        img.addEventListener('load', function(){
            console.log('inn');
            ctx.drawImage(img, 10, 10, 200, 100);

            //ctx.fillStyle = '#ff0000';
            //ctx.fillRect(0, 0, 300, 300);
        });

        var btn = document.getElementsByTagName("button")[0];
        btn.addEventListener('click', function(){
            var snapshotPNG = canvas.toDataURL();
            window.open(snapshotPNG, 'snapshot', 'width=300, height=300');
        });


    </script>
</body>
</html>

요즘은 왠만한 오픈소스는 github.com 에 있다. jQuery도 여기에 메인 레파지토리로 github를 쓴다. jQuery를 좀 까볼 속셈으로 https://github.com/jquery/jquery 들어가서 Fork를 하나 받았다. 적당한 폴더에 가서 fork 받은 repos에서 clone을 받는다.

$ git clone git@github.com:zziuni/jquery.git

테그를 찍어본다.

$ git tag

...
1.6.4
1.6.4rc1
1.6b1
1.6rc1
1.7
1.7.1
1.7.1rc1
1.7b1
1.7b2
1.7rc1

멋지게 release version 관리가 되고 있다. 굳. 꼴랑 0.0.1 올라갔을 때는 뭐가 바뀌는건가. 궁금해서 diff를 찍어본다.

$ git diff 1.7 1.7.1

diff --git a/Makefile b/Makefile
index 77219e3..b33fc2a 100644
--- a/Makefile
+++ b/Makefile
@@ -5,7 +5,7 @@ BUILD_DIR = build
 PREFIX = .
 DIST_DIR = ${PREFIX}/dist

-JS_ENGINE ?= `which node nodejs`
+JS_ENGINE ?= `which node nodejs 2>/dev/null`
 COMPILER = ${JS_ENGINE} ${BUILD_DIR}/uglify.js --unsafe
 POST_COMPILER = ${JS_ENGINE} ${BUILD_DIR}/post-compile.js

@@ -27,7 +27,8 @@ BASE_FILES = ${SRC_DIR}/core.js\
        ${SRC_DIR}/ajax/xhr.js\
        ${SRC_DIR}/effects.js\
        ${SRC_DIR}/offset.js\
-       ${SRC_DIR}/dimensions.js
+       ${SRC_DIR}/dimensions.js\
+       ${SRC_DIR}/exports.js
...
...

쿠~억. 너무 많다. 1.7.1에서 ajax 처리가 바뀐게 있나만 살펴 본다.

$ cd src
$ git diff 1.7 1.7.1 -- ajax.js

diff --git a/src/ajax.js b/src/ajax.js
index cfd43d9..bb64b68 100644
--- a/src/ajax.js
+++ b/src/ajax.js
@@ -261,7 +261,7 @@ jQuery.fn.extend({
 // Attach a bunch of functions for handling common AJAX events
 jQuery.each( "ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split( " " ),
        jQuery.fn[ o ] = function( f ){
-               return this.bind( o, f );
+               return this.on( o, f );
        };
 });

@@ -755,7 +755,7 @@ jQuery.extend({
                                        done( -1, e );
                                // Simply rethrow otherwise
                                } else {
-                                       jQuery.error( e );
+                                       throw e;
                                }
                        }
                }

아~하. bind() 대신에 1.7에서 추가된 on()으로 내부 사용을 변경 했구나. 그거 말고는... 에러 처리 방법이 바뀌었내. 1.7.1은 필요없고.. 1.7로 아예 돌려버릴까. 싶다면,

$ git reset --hard 1.7

그러면 소스가 1.7돌려진다. 내친김에 jQuery 1.0보고 싶다면,

$ git reset --hard 1.0

지금 처럼 모듈별로 나뉘지 않은 소스를 볼 수 있다.

구경 다 했으면 다시 원복.

$ git reflog
$ git reset --hard HEARD@{2}

요즘 이러고 논다.

HTML5, Moblie, Web, App 강의 자료

오늘 모바일 웹 전략 & 개발 워크샵 2010라는 자리가 있었는데, 두시간 강의를 맞아서 다녀왔다. 원래 7월말로 예정되었던 기획 and 개발의 이틀짜리 행사였으나 이런 저런 이유료 DevDay는 한달 후인 오늘 열렸다.

컨퍼런스와 달리 워크샵이란 타이틀로 열린 행사로 참가자는 20명 정도로 적었지만, 두시간 정도 진행하면 느낀 감(?)은 뭔가 간절해 보였다. 뭔가 아웃풋은 뽑아야 하는데, 뭘 준비해야 하는지 모르는 간절함? 어쨌든 일정을 완전히 잊고 있다고 급히 정리한 것 치고는 제법 정리가 잘되었는데, 조금이라도 도움이 되었기를 바라며..

P.S. 1

원래 밀린 일정들이 있어서 PT자료만 올리고 관두려 했지만, weinre 관련 질문을 잠시 뭔 생각을 했는지 엉뚱한 답을 했내? 그래서 A/S차원에서 포스팅 하나 하고, 겸사겸사 강의 후기와 자료도 같이 올린다. (한시간 소비 ㅠ ㅠ)

P.S. 2

역시 샘플 소스만드는건 너무 어렵다. 내용중 일부를 이 자료에서 따왔다.

웹페이지에  파라미터로 값을 넘겨서 뭔가 분기를 주고 처리를 하려면 ServerSide language가 필요합니다.
php, jsp, asp, RubyOnRails 등등 파라미터를 받아서 뭔가를 처리할 수 있는 환경이 필요하죠.
그런게 전혀없는 .html에서 인자를 받고 싶을땐 어떻게 해야 할까요?

그냥 넘기고 javascript로 받으면 됩니다.

http://zziuni.pe.kr/?001 를 넘기면 http://zziuni.pe.kr/001/index.htm  으로,

http://zziuni.pe.kr/?002 를 넘기면 http://zziuni.pe.kr/002/index.htm  으로 갔으면 좋겠습니다.


document.getElementById("contents").src = location.href.split("?").pop() + "/index.htm";



컨텐츠라고 만들어온 HTML을 시스템에 탑재하다가 짜증나서 편법을 써봤습니다.
split만 잘하면 좀더 복작한 인자도 얼마든지 가능하겠습니다.



간만에 간단 포스팅이군요. 근데도 쓰는데 10분걸림.  :)

jQuery로 javascript를 다시 스터디 중입니다.
jQuery는 1.5기준이며 스터디 차원의 포스팅이니 맹신은 금물, 딴지는 환영입니다. ㅋ

(function(window, undefined){
...
})(window);

위 소스는 jQuery 1.5의 첫줄과 맨 끝줄입니다. 최 외각이란 표현이 맞겠군요.

함수를 표현하는 방법
Javascript의 함수는 객체입니다. 함수객체라고 합니다.  함수객체를 만드는 방법은 표현형태에 따라 두가지로 분리합니다. Function Declaration과 Function Expression입니다. (말장난같지만) 우리말로 하면 함수문장, 함수표현식이 되겠습니다.

function foo(){   //function declaration 함수문장
    /*...*/
}    

var foo = function(){    //function expression 함수표현식
    /*...*/
}

함수문장으로 함수를 정의하면 함수를 정의한 위치와 관계없이 상단으로 끌어올려지며, 그 덕분에 함수정의보다 위쪽에서 호출해도 함수 실행이 됩니다. 이런 특징을 Hoisting이라고 합니다.
함수표현식으로 함수를 정의하면 Hoistring효과가 일어나지 않습니다.
왜냐하면 변수를 정의하고, 함수리터럴로 초기화하기때문에 초기화하는 라인에 도달하지 않으면 변수에 함수는 참조가 걸리지 않습니다.
함수문장도 의미상으론 var foo = function foo(){}에 해당하지만, 이렇게 적으면 함수표현식이 되며, hoisting효과는 없습니다. ( 그리고, IE에 관련 버그가 있습니다. 이렇게 적으면 안됩니다.)



function(...){/*...*/} 익명함수
익명함수란 이름이 없는 함수 function(){...}를 말합니다. 바로 jQuery최상단의 형태입니다.
익명함수는 function으로 시작하지만 함수명이 없습니다. 따로 부를 이름이 없으므로 따로 실행시킬 방법도 없습니다. (실행을 못시킨다는 말이 아닙니다.)
더군다나 익명함수만 덩그러니 적어놓으면(문장의 시작이 익명함수이면) 에러납니다. function으로 시작하니 함수문장으로 보이나 이름이 없으므로 오류입니다.
그럼 위 jQuery의 소스는 왜 에러가 안날까요?  이럴때는 괄호를 묶어주면 됩니다.

function(){
    /*...*/

}   //오류.

(function(){
    /*...*/

})   //오류아님.

그럼 익명함수는 함수문장일까요 함수표현식일까요? 이 부분은 확실하지 않은데 hoisting이 일어나지 않고, (...)를 사용하지 않으면 오류가 나는 것으로 보아 (불완전한) 함수표현식 으로 보는게 맞는거 같습니다.


근데 왜  익명함수일까요?
그냥 var jQuery = function(){..} 하면 될것을. 복잡하게 시리.
여러가지 이유가 있겠지만, javascript의 함수는 '참조가 발생하지 않으면 메모리에서 제거'됩니다. 반면 전역변수는 '페이지가 갱신/소멸 될때가지 메모리에 상주'합니다. 그러므로 전역변수에 함수표현식으로 함수를 만들면 참조가 일어나지 않아도 메모리를 차지합니다. 페이지가 죽을때까지.
결국 jQuery는 메모리에 스스로를 페이지로딩과 함께 통쨰로 올라가지 않습니다.
1074라인을 보면 다음 구문으로 jQuery Core만을 전역변수 jQuery와 $에 올립니다. 이것이 우리가 쓰는 $ 입니다.

return (window.jQuery = window.$ = jQuery);

()연산자
javascript에서 ()는 함수를 실행하는 연산자입니다. '함수명()' 이란 형태로 함수를 실행하죠. append(), get().. 모두 함수 실행이죠.(메소드라 부르지만)
하지만 때론 함수명이 없는 함수. 익명함수(anonymous function)를 실행하기도 합니다.  
함수란 사실 append같은 이름이 중요한것이 아니라 그 변수에 할당된 function(){...}이란 함수리터럴이기 때문에 이름은 따로 부를 일이 없으면 없어도 그만입니다 그러므로

(function(){    /*...*/})();

이름이 없을 뿐 실행됩니다.  결국  jQuery란 익명함수에 window를 인자로 넘겨서 실행한 결과입니다.

Google Map에 StreetView가 생겼을때, Google Earth에 화성, 달이 추가되었을때, 구글의 지구정복, 우주정복 이야기가 많았었죠.
이번엔 인체탐험입니다.

먼저 WebGL이 되는 브라우저가 필요합니다.

Chrome 8.0x기준으로 설명합니다. (현재 최신버전)

Night Build인 9.0은 Default로 WebGL이 설정되어있다고 하지만 아직 다운이 잦은고로, 8.0에서 WebGL을 on합니다.

주소창에 about:flags를 치면 각종 옵션이 뜹니다.
그중 GPU Accelerated Compositing 와 WebGL을 사용으로 설정하고 Chrome을 재시작합니다. (GPU는 WebGL과 관계있는건 아니지만.. 왠지 좀더 빠르지 않을까 해서. 켭니다. )


그리고 bodybrowser.googlelabs.com .


WebGL이 지원되는 브라우저로 들어가면 처음 접하는 화면입니다.  기본적으로 마우스로 회전/줌인이 됩니다.  메모리가 부족하면 외각선예 계단현상이 있을 수 있습니다.

좌측 슬라이더를 통해 인체 투명도 조절이 됩니다.

슬라이더 옵션을 바꾸면 인체 장기의 Depth(?)별로 골라 볼수도 있습니다.

장기를 선택하면 라벨과 함께 그장기만 보입니다. 이리저리 클릭질을 해보시면 단순 이미지가 아니라 정말 많은 3D 오브젝트들의 집합체인가를 알 수 있습니다. 혈관도 종류별루 선택가능. ㅡㅡ;

개인적으론 단지 와~ 신기하다가 아니라, 엄청나게 유용하다고 생각하고 있습니다.
의학은 무지한지라 정밀도나 의학적인 퀄리티는 잘 모르겠지만, 별다른 비용없이 WebGL을 지원한는 브라우저만 있으면 다음같은데 사용할 수 있지 않을까요?

1. 아이들교육용. :  인체 장기 설명할때 모형, 비디오 보다 훨씬 효과적일거 같습니다. 쉽게 파손되는 모형이나, 시청만하고 끝나느 비디오보다 직접 돌려보고, 찾아보고 훨씬 교육적이지 않을까요?
2. 관련종사자 교육용 : 아이들만이 아니라 간호학과등의 성인교육에도 부위명 암기 용도 등으로 어떨까요?
3. 진찰상담용 : 병원에서 환자들에게 설명할때 썼으면 좋겠습니다. 평민들은 잘 모르는 엑스레이, CT사진이나 이면지에 펜으로 그리며 설명하는거 말고, body browser로 설명하는건 어떨까요?

Body Browers 의 WebGL script source입니다. http://bodybrowser.googlelabs.com/r3/scripts.js 살짝 울렁거리는 군요. ㅡㅡ;
Body Browers는 웹에서 3D를 어따써? 에 대한 구글식 답변이라 생각합니다.
일반인들이 관심가질만한 범용 서비스는 아니지만, 3D쇼핑몰같은 것 보다 훨씬 실용적이고 기술적으로도 우월해 보입니다. 정말로 웹으로 모든게 통합될거 같군요.

이제 MRI촬영하고, 집에 오면, https로 발송된 메일에 short url로된 진료카드와 3D촬영 이미지를 받아볼 날이 올지도 모르겠군요.
Web으로!!

BarCamp 관련 링크를 따라다니다가 알게된 jania님의 위키에서 정말 괜찮은걸 찾았다.
바로 자바스크립트 TDD를 위한 JsUnit 이다.

http://jania.pe.kr/wiki/jwiki/moin.cgi/JsUnit


jania님은 필연적으로 디버깅이 어려울 수 밖에 없는 Javascript야 말로 TDD가 필요하다고 역설하면서  동영상 샘플강좌까지 제공하고 있다.

덕분에 좋은 정보를 얻어서 이번에 회사에서 Javascript Web Editor 개발을 시작하는데, 이걸 JsUnit를 이용해 TDD로 개발하는것을 도전해보려한다.

그러나, 아직 계념이 없는지라.. 요몇일 계속 삽질 중이다. ㅡ ㅡ;;

P.S
참고로, 동영상 강좌에 나오는 하단의 실시간 디버거는 위의 링크에 있는 소스(Runner.htm)를 띄워놓은거다.

블로그에 개발관련 글을 올릴때 불편한것중에 하나는 소스를 보기편하게 '꾸미기'가 어렵다는 거다.

맘에드는 형태를 찾다가.dp.SyntaxHighlighter 를 찾았다.

이 포스트 에서 처음 봤는데, 겐도사마님의 플러그인 이 이걸로 개발됬다는걸 알고 설치.

간단하게 <textarea></textarea> 를 사용하는 형태라 테터에서도 [ Code ] [ /Code ] 치환자를 사용하여 간단히 사용이 가능하다.
예를 들어 쿼리를 적으면. 아래처럼 표현된다.

Select * From TB_User
Where UserID = 'zzz'
and Level < 3

dp.SyntaxHighlighter 의 소스를 까보면 별거 아니라고 생각되기도 하지만, 이걸 만든다고 생각하면 머리에 쥐가.. ㅡ ㅡ^

다음 언어의 하일라이트를 지원한다.

C#

CSS

C++

VB & VB.NET

Delphi, Pascal

Java

JavaScript

PHP

Python

Ruby

SQL

XML, HTML, XSLT and any other XML style code

어쨌든.. 잘쓰겠습니다~