- 최신 버전을 사용해라. (1.4 보다 1.6이 2배 가까이 빠르다)
- id 선택자가 class 선택자보다 5-10배 이상 빠르다.
- 가상 선택자는 느리니까 최대한 쓰지 말 것. 검색 영역의 모든 요소를 다 뒤진다!!
- 부모에서 자식을 찾는 방법은 $parent.find(‘.child’) 가 제일 빠르다. 다른 것은 잊어라. (근데 왜 children() 이 더 안빠르지..)
- jQuery 객체는 꼭 필요할 때에만 만들 것.
- 항상 캐싱할 것
- 체인 방식을 애용할 것. 이미 필터링된 집합을 이용하므로 빠르다. 코드도 간단해진다.
- bind, live 보다 delegate가 좋다!
- DOM insert/append 는 가급적 한번에 끝낼 것. 무거운 연산을 해야 할 경우 일단 detach 했다가 다시 넣으면 좋다.
- $.each() 는 느리니까 그냥 for 를 쓸 수 있으면 써라.
- $.method 보다 로레벨 함수인 $.fn.method 가 빠르다.

대체로 아는 이야기라는 점이 슬프다. 그걸 아는 놈이 짠 코드가 이 모양이라니.. ㅠㅠ

그나저나 jsperf.com 같은 걸로 브라우저별로 검증해보지 않으면 다 공허한 이야기인 듯. 재미있는 건 IE 6/7 클래스 선택자의 속도가 다른 브라우저보다 1000-2000배 느리다는 점과, 크롬 13.x 의 성능이 갑자기 앞뒤버전보다 확 떨어졌다는 것.

data-xxx

jQM의 위젯들은 다른 jQuery 위젯이나 플러그인들과는 달리 자바스크립트로 옵션을 지정하는 대신, HTML 의 data- 속성을 이용해서 모양새와 동작을 지정한다.

가장 중요한 것은 data-role 속성인데, HTML 태그에 page, header, content, footer 에서부터 listview, navibar, button 등의 “역할”을 지정하면, jQM이 알아서 적당한 렌더링 해준다는 거다. 이를 통해서 자바스크립트 코드는 거의 손대지도 않고 순수 HTML 만으로 깔끔한 모바일 뷰를 만들어낼 수 있게 된다.

예를 들어 버튼을 만들어야 된다고 하자. 단순한 anchor 에 data-role=”button” 속성을 넣는 것만으로 버튼을 만들 수 있다. 버튼 아이콘은 data-icon 으로 바꾸고, 페이지 전환 애니메이션이 필요할 경우 data-transition= slide | slideup | slidedown | pop | flip | fade 을 사용하면 되고, 또 data-direction=”reverse” 으로 애니메이션 방향을 반대로 바꿀 수 있다. 만약 페이지 전환이 아니라 다이얼로그를 띄워야 할 때 anchor.rel 속성처럼 data-rel=”dialog” 속성을 지정하면 된다.

이 모든 것이 JS 코드 한줄 없이도 자동적으로 이루어지게 만든, jQM 개발팀에게 박수를 보낸다.

페이지와 캐싱

페이지는 보통 header – content – footer 로 나뉘는, jQM의 가장 핵심적인 구성 요소다. 그냥 모바일 화면의 하나의 뷰라고 생각하면 된다. HTML 파일 안에 여러 개의 페이지들이 존재할 수 있다. 보통은 각 페이지들 마다 #id 를 붙여두면 되긴 한데, AJAX 로 읽어오는 페이지들의 하위 요소(예를 들면 listview)에 #id를 붙여서 jQuery로 접근하는 것은 가급적 피해야 한다.

왜냐하면 모바일 환경의 특성상 이미 방문했던 페이지에 대해서 다시 서버에 요청을 하지 않기 위해서, jQM은 이미 한번 방문했던 페이지들은 URL 을 해쉬한 키값으로 DOM 에 저장한 후 숨겨버린다. 그러므로, 동일한 #id 를 가진 페이지가 캐싱될 경우 자바스크립트에서 검색하는 게 불가능하므로, 현재 화면에 보이는 페이지를 기준으로 CSS 클래스로 찾는 것을 권한다.

그냥 페이지 전환이 발생하면 항상 div.data-role=”page” 라는 게 무조건 추가된다고 생각하면 이해가 빠를 듯하다. 참고로 로컬 캐싱된 이런 페이지들에 대해 히스토리(Back-Forward) 이동을 적용하기 위해서 yourdomain.com/#/some/where 등의 로컬 주소로 변환된다는 점에 유의할 것.(트위터에서 쓰는 방식이랑 비슷한건데, 뭔가 이걸 가리키는 용어가 있었던 듯… 가물가물..)

ul-li-thumb 문제

리스트 아이템(li) 바로 아래에 이미지 태그를 넣어두면, jQM은 자동적으로 트위터와 같은 2단 레이아웃으로 바꾼다. 내부적으로 이미지에 ul-li-icon 또는 ul-li-thumb 클래스를 붙이고 li 에다가도 ul-li-has-thumb 같은 클래스를 붙여서 크기와 너비, 마진을 설정해버린다.

한편으로는 좋은 기능이지만, 원치않는 경우라고 해도 이미지 크기가 강제로 줄어들게 된다. 해결책은 리스트 바로 아래 자식 이미지를 다른 태그로 둘러싸서 jQuery 검색에 걸리지 않게 만들면 된다.

see also: http://forum.jquery.com/topic/latest-release-list-thumbnail-issue

터치 이벤트 사용하기

데스크탑에서 개발하다가 아이패드에서 테스트해보니 유독 내가 만든 버튼만 클릭이 잘 안먹는 경우가 있어서 뭔가 했는데, 가만히 생각해보니 click 이벤트와 touch 이벤트는 별개라는 사실을 잠시 잊어서 생긴 문제였다. 항상 tap (tab 이 아니다) 이벤트를 click 과 함께 등록해야 된다

fixed header & footer

data-position=”fixed” 를 이용하면 헤더나 푸터를 스크롤에 관계없이 화면에 고정할 수 있다. 스크롤 할 때에는 사라져서 편한 거 같은데, 막상 아이패드에서는 이게 번쩍거리거나 프레임을 떨어뜨리는 문제가 있으므로 적당히 사용해야 할 거 같다. 나도 처음에는 긴 글이 있을 때 넣으면 좋겠거니 했는데, 워낙 깜빡임이 심해서 빼버렸다. 페이지 전환 애니메이션도 너무 과하면 곤란한 듯하다.

$.mobile.ajaxEnabled = false

기본적으로, 링크를 클릭하면 jqm은 이동하려는 페이지가 DOM에 없을 때에만, ajax()를 호출해서 페이지를 자동으로 만든다.  그런데 backbone 같은 MVC 라이브러리를 사용할 경우, 이런 흐름은 달라져야 된다. 사용자가 링크를 클릭하면 관련된 모델을 fetch 하고 컬렉션을 적당히 변경한 후, 페이지는 backbone 뷰가 자동으로 만들어주는 느낌이 가장 어울릴 것이다. 즉 ajaxEnabled 옵션을 끄고 관련된 이벤트들을 직접 바인딩해서 처리하면 된다.

소소한 팁들

• 버튼을 헤더의 오른 편으로 정렬하기 : 버튼의 class 속성에 ui-btn-right 를 추가하면 된다.
• data-backbtn=”false”: jQM 1.0a4.1 까지는 페이지 전환시 자동적으로 헤더에 Back 버튼이 추가되므로, 돌아가기 버튼이 필요없는 메인 페이지 등에서는 이 속성을 지정하면 된다.
• 원치않는 nested list : ul-li-thumb 와 마찬가지로 li 바로 아래에 ul 이나 ol 이 있으면 자동적으로 페이지가 만들어지므로, 다른 태그로 둘러싸면 된다.
• 사용자가 추가한 버튼에 live(“click tap”) 을 지정하면 이벤트가 2개 발생되는 모양이다. 그냥 tap 만 넣어도 컴퓨터에서는 잘 동작한다.
• 자바스크립트로 리스트 아이템을 추가한 후 listview(“refresh”)를 해도 그 안에 있는 inset listview 는 별도의 쿼리를 통해서 listview 위젯으로 만들어야 한다. 샘플 코드는 여기 http://jsfiddle.net/Reiot/CpudD/

와이프가 아이패드에서 클리앙을 보시는게 너무 불편해 보여서, jQuery Mobile 공부 삼아 간단히 웹앱을 만들어봤습니다. 소스 코드는 GitHub 에 공개해두었습니다.

• 주소: http://clienpad.appspot.com 
• 소스코드: https://github.com/Reiot/clienpad

Google App Engine 으로 프록시 서버를 만들었고, jQuery Mobile을 이용해서 모바일 브라우저에서 JSON 으로 받아서 보여주는 방식입니다. 가능하면 프록시 서버 없이 하고 싶었는데 iOS 에서 돌아가도록 할려다 보니 방법이 없더군요.

구현에 관련해서 간단히 정리해보자면,

• template 의 최신 기능 때문에 django 1.2 를 이용했는데, 코드 레벨에서는 거의 webapp 만 사용했습니다;;;
• memcache 에 각 URL 을 파싱한 dict를 저장하는데, 60초 정도만 살아남도록 했습니다. 그래서 그런지 처음 접속하는 사람은 제법 느린 편입니다. 반응 속도가 4-5초 정도가 나오는 바람에 와이프가 많이 실망하네요. ㅠㅠ 다시 생각해보니 그냥 JSON 이나 렌더링된 문자열 자체를 저장하는게 나을 수 있겠네요.
• Beautiful Soup 으로 HTML DOM 파싱을 했습니다. 클리앙의 HTML 구조가 old-school 같아서 (ㅎㅎ) 시간이 좀 걸렸습니다;;;

조만간 jQuery Mobile 팁에 관한 글을 좀 써보겠습니다.

상수인 Property은 하위 Target 에게 보이지 않지만, 변수인 Var 는 보인다.

특정 확장자를 가진 파일만 삭제하기(recursive)

<delete>
	<fileset dir="${dir}/.." includes="**/*.js"/>
</delete>

특정 폴더 이하 모든 하위 폴더를 삭제하기(빈 폴더 포함)

<delete includeemptydirs="yes">
	<fileset dir="${dir}" includes="**/*"/>
</delete>

정규식을 이용해서 파일 이름 바꾸기

apply task 보다는 move task + regexpmapper 를 이용하면 간단하다. move 는 대상 폴더가 없으면 무조건 만들기 때문에 편하다!

<!--
<apply executable="mv">
	<fileset dir="${dir}" includes="*.png"/>
	-v"/>
	<srcfile/>
	<targetfile/>
	<regexpmapper from="^_\d\d\d\d_(.*)\.png$" to="${dir}/\1.png"/>
</apply>
-->

<move todir="${dir}">
	<fileset dir="${dir}" includes="*.png"/>
	<regexpmapper from="_\d\d\d\d_(.*)\.png" to="\1.png"/>
</move>

경로에서 부모 폴더(dirname)와 파일명(basename)으로 분리하기

basename 의 suffix 를 지정하면 확장자 없는 순수 파일명만 저장할 수 있다.

	<dirname property="parentdir" file="${file}"/>
	<basename property="basename" file="${file}" suffix=".png"/>

파일명에 정규식을 적용해서 속성에 저장하기

propertyregex 를 이용하면 된다. 이때 디폴트값을 정해줄 수도 있다.

<propertyregex property="output"
	input="${file}"
	regexp="(.+?)_(.+)"
	select="\2"
	defaultValue="${default}"/>

하위 폴더 각각에 대해서 특정 타겟을 실행하기

foreach task 를 이용하면 된다. 이때 dirset 은 항상 부모 폴더 자신(./)을 포함하는데, excludes=./ 등으로 자신을 제거할 수 없으므로, 아래처럼 includes=*/** 으로 제외할 수 있다.

<foreach param="dir" target="xxx">
	<path>
		<dirset dir="${parentdir}" includes="*/**"/>
	</path>
</foreach>

Exec vs. Apply

exec 는 커맨드라인 명령을 1회 실행하지만, apply 는 특정 집합에 대해서 for 루프처럼 실행이 가능하다.
이때 arg value 는 -v 나 -f 같은 단일 파라미터이고, arg line 은 –output xxx 처럼 공백이 들어가는 긴 파라미터에 사용한다.
또한 regexpmapper 를 이용해서 targetfile 에 대해 정규식을 적용할 수도 있다.

<exec executable="${file.python}">
	<arg value="trim.py"/>
	<arg value="--verbose"/>
	json ${trim.dir}/anchor.json"/>
	<arg value="${trim.dir}"/>
</exec>
<apply executable="${file.python}">
	<fileset dir="${flip.dir}" includes="*.png" excludes="*.r.png"/>
	<arg value="flip.py"/>
	<arg value="--verbose"/>
	<arg value="-o"/>
	<targetfile/>
	<srcfile/>
	<regexpmapper from="(.*)\.png$" to="${flip.dir}/${flip.default}.png"/>
</apply>

파일 출력

echo task를 이용하면 화면 출력 뿐만 아니라, 파일에 임의의 문자열을 append를 할 수 있다. 이걸 이용하면 concat task 를 쓰지 않고도 header 나 footer 를 간단하게 넣을 수 있다.

<echo file="${script}" append="yes">
	sprites = sprites || {};
	sprites.data = sprites.data || {};
</echo>

파일 이어붙일 때 필터링하기

filterchain 을 이용해서 특정 문자열을 포함한 라인을 제거하거나, tokenfilter + replaceregex 를 이용해서 문자열을 바꿀 수도 있다.

<concat destfile="${script}" append="yes">
	<path>
		<filelist dir="${dir}" files="${json}" />
	</path>
	<filterchain>
		<linecontains negate="true">
			<contains value="trimmed"/>
		</linecontains>
		<tokenfilter>
			<!--
			<replaceregex pattern="\{"frames"\:" replace='sprites["${spritename}"] =' flags="g"/>
			-->
			<!-- remove .<span class="hiddenSpellError" pre="remove ">png</span> -->
			<replaceregex pattern="\.png" replace='' flags="g"/>
		</tokenfilter>
	</filterchain>
</concat>

파일을 복사하면서 이름 바꾸기

copy task 와 globmapper 를 쓰면 파일을 복사하면서 단순하게 이름을 바꿀 수 있다.

<copy todir="${destdir}">
	<fileset dir="${srcdir}" includes="*.png"/>
</copy>
<copy todir="${destdir}">
	<filelist dir="${srcdir}" files="${src}.js"/>
	<mapper type="glob" from="*.js" to="sprite.*.js"/>
</copy>

명령 실행시 입력 리다이렉트 적용하기

잘 알려지진 않았지만, 구글 앱엔진의 패스워드를 파일에 저장한 후, appcfg.py –passin < file 을 이용하면 자동화가 가능하다. ant 에서는 exec 의 inputstring 으로 대체할 수 있다.

<exec executable="appcfg.py" inputstring="${bulkload.pass}">
            <arg value="${bulkload.cmd}"/>
            <arg line="--application=${bulkload.appid}"/>
            <arg value="--config_file=${bulkload.config}"/>
            <arg value="--email=${bulkload.email}"/>
            <arg value="--url=${bulkload.url}"/>
            <arg value="--kind=${bulkload.kind}"/>
            <arg value="--filename=${bulkload.csv}"/>
            <arg value="--no_cookies"/>
            passin"/>
            <arg value="."/>
        </exec>

만약 구글 스프레드시트의 데이터를 바로 데이터스토어로 올리고 내릴 수 있다면 얼마나 편할까? 해서 스프레드시트 API 를 써서 직접 만들어봤는데, Model 당 import/export/create 코드를 각각 작성해야 하는 단점이 있었다. 그런데, 이미 bulkloader.yaml 를 만들어서 관리중이라면, 아래 커넥터를 써서 간단하게 구현할 수 있다.

http://code.google.com/p/bulkloader-gdata-connector/

기본적인 사항들은 가이드 문서를 읽어보면 되고, 아래 다음 사항들을 참고하면 된다.

• django 1.2 를 사용할 경우, 코드 맨 위에 use_library(‘django’, ’1.2′)를 추가할 것. 그렇지 않으면 무서운 0.96.4 is already in use 에러를 맛보리라.
• 구글앱스 도메인을 사용할 경우 GenerateAuthSubURL(…, domain=’yourapps.com’) 을 추가할 것.
• 컬럼 이름에는 공백, underscore(_), 대문자를 사용하면 안된다.
• 내보내기는 제법 오랜 시간이 걸리지만, 불러오는 건 꽤 빠르다. 즉 최초에 한번 내보내고 그 다음부터는 금방 금방 불러올 수 있다는 뜻이다.
• 단점이라면, 데이터를 불러오려면 콘솔 즉 프로그래머의 개입(==패스워드 입력)이 필요하다는 점이다. 웹 기반 UI 에서 Connector를 어찌어찌 잘 부를 수 있으면 좋겠는데, 워낙 코드가 복잡해서;;

import os
os.environ['DJANGO_SETTINGS_MODULE'] = 'settings'
from google.appengine.dist import use_library
use_library('django', '1.2')
from django.conf import settings
_ = settings.TEMPLATE_DIRS

원래 _(“xxx”) 는 윈도우 계열에서 유니코드를 위한 매크로인데, 아마 위 코드랑 충돌이 있을지도 모르겠다.

from django.utils.translation import ugettext as _

또다른 문제는 부모키가 없는 단순 객체일 경우에는 create_deep_key 를 쓸 수도 없다는 점이다. 따라서 이런 유틸리티 함수를 만들었다.

def create_foreign_key_with(kind_col):
    """
    for ReferenceProperty(reference_class=None) => generic key with unknowning kind.

    - property: item_type
      external_name: item_type_value
      import_transform: transformutil.create_foreign_key_with('item_type_kind'))
      export:
          - external_name: item_type_kind
            export_transform: transform.key_kind
          - external_name: item_type_value
            export_transform: transform.key_id_or_name_as_string

    """
    def create_foreign_key_with_lambda(value, bulkload_state):
        kind = bulkload_state.current_dictionary[kind_col]
        if not kind or not value:
            return None
        logging.info('kind:%s value:%s' %(kind, value))
        return datastore.Key.from_path(kind, value)
    return create_foreign_key_with_lambda

Create a Memory Collage in Photoshop | StoodIt

콜라쥬 만들 때의 그림자, 리얼한 그래디언트의 처리법…

Create a Sleek and Clean MP3 Player Interface

crockford 횽의 글만 읽으면 대충 자바스크립트 상속에 대한 구현 방법은 이해할 수 있다. 귀찮으니까 설명은 생략한다.

• http://javascript.crockford.com/inheritance.html : 맨 마지막 줄이 핵심이다
• http://javascript.crockford.com/prototypal.html
• http://www.crockford.com/javascript/private.html

Sample Codes

• goog.inherits() : http://code.google.com/intl/ko-KR/closure/library/docs/introduction.html
• backbone extend : http://documentcloud.github.com/backbone/#Model-extend
• Base.js : http://dean.edwards.name/weblog/2006/05/prototype-and-base/
• inheritance (prototype plugin) : http://code.google.com/p/inheritance/
• jquery-inheritance : http://code.google.com/p/jquery-inheritance/
• javascript MVC Class : http://javascriptmvc.com/docs.html#&who=jQuery.Class
• JS.Class : http://jsclass.jcoglan.com/inheritance.html
• John Resig’s Simple JavaScript Inheritance: http://ejohn.org/blog/simple-javascript-inheritance/

여담이지만, 조만간 JSON 기반 프로토콜을 온라인 게임에서 사용하는 게 당연한 세상이 올지도 모르겠다.

rm ~/Library/Preferences/com.macromates.*
rm -rf /Library/Application Support/TextMate/
rm -rf ~/Library/Application Support/TextMate/

한글 폰트 설치

2바이트 문자들이 모두 깨지는 관계로 전용 한글 폰트를 구해야 한다. 누가 나눔코딩글꼴의 TextMate 버전을 안 만들어줄까?

http://www.appleforum.com/application/45362-textmate에서-한글-글꼴폭-문제.html

유용한 단축키

⌘(cmd, window) ⌥ (option, alt) ^(control) ⇧(shift)

• ⌘T : 빠른 파일 찾아가기
• ⇧⌘T : 현재 파일의 심볼 찾기
• ^⇧V : 현재 파일의 정적 분석 및 검증(Validation). 파이썬일 경우 pylint, 자바스크립트일 경우 jslint 가 실행된다.
• ⌃⌘R : 현재 편집중인 파일을 Project+ 사이드바로 찾기

더 많은 팁은 http://stackoverflow.com/questions/99807/what-are-some-useful-textmate-shortcuts 에서 찾아볼 수 있다.

추천 번들 & 플러그인

zen coding

via http://code.google.com/p/zen-coding/

TextMate 도 강력한 툴이지만 이놈도 만만치않다. 마법같은 ⌘R 의 힘을 느껴보시라.

Project+

via http://ciaranwal.sh/projectplus

GetBundles

via solutions.treypiepmeier.com

mkdir -p ~/Library/Application\ Support/TextMate/Bundles
cd !$
svn co http://svn.textmate.org/trunk/Review/Bundles/GetBundles.tmbundle/
osascript -e 'tell app "TextMate" to reload bundles'

YUI compressor textmate bundle

via http://www.experienceinternet.co.uk/software/yui-compressor-textmate-bundle/

PyLint

파이썬 소스 파일에 대해서 ^⇧V 로 정적 분석 및 검증을 할 수 있다. 설치한 후 TextMate PATH 에 /usr/local/bin 을 추가해야 한다. 참고로 easy_install 으로 모듈을 설치할 때 파이썬 버전을 지정하려면 아래와 같이 하면 된다.

sudo easy_install-2.5 pylint

각종 경고 목록은 http://www.logilab.org/card/pylintfeatures 에 있다. 
현재 파일에서 경고를 끄려면,

# pylint: disable=W0232,R0902,C0103,C0301

정규식

Basic

• 캡처한 문자열은 $1, $2 .. 를 이용한다. $0 은 전체를 의미한다.

no trailing space after comma

pylint 를 돌려보면 콤마(,) 다음에 공백을 무조건 넣으라고 한다. negative look  ahead  를 이용하면 간단하다.

Find: ",(?![\s])"
Replace: ", "

참고 자료

• http://al3x.net/2008/12/03/how-i-use-textmate