Octopress는 정적 사이트 생성기인 Jekyll 을 이용해서 블로그를 손쉽게 구성하도록 해주는 루비 프레임워크다. 말 그대로 정적 HTML 파일들을 미리 만들어서 어딘가로 올려서 서비스하는 거라, GitHub에서 블로그를 서비스할 수 있음은 물론, Amason S3나 구글 앱엔진에서도 블로그 서비스가 가능하다.

큼직큼직한 글씨와 미려한 테마, 코드 문법 하일라이팅, blockquote, gist 코드 포함 등의 다양한 플러그인이 지원되며, 생성, 배포, 최신 소스 업데이트, 글쓰기 등의 작업들이 rake 콘솔 명령으로 간편하게 포장(?)되어 있다. DB를 쓰지 않기 때문에 코멘트는 Disqus 같은 외부 사이트를 이용하게 된다. 워낙 매뉴얼이 잘 되어 있어서 설치나 사용법은 그냥 따라해도 충분하다. 레이옷은 DropBox에 origin 레파지토리를 두고 사용중이다.

중요한 건 기존 블로그를 얼마나 손쉽게 이전하느냐인데, 워드프레스.com에서 이사오는 데 거의 3일이 걸렸다. 워낙 블로그 이사를 많이 다녀서 메타 정보가 개판이었고 본문에 이런 저런 비표준 태그를 많이 써서 문제는 더욱 심각했다. 또 워드프레스에서 내보내기로 받아온 XML 자체에도 문제가 많았다. (내 경우에는 글들이 중간에 짤려서 태그가 제대로 완결이 안되었다든지, ^Z가 본문 중에 있어서 파싱이 안되기도 했다.) Jekyll에서 제공하는 스크립트는 마크다운 변환 기능이 빠져 있고, 유니코드 에러를 자주 뱉기 때문에 직접 파이썬으로 만들어야만 했다. (루비 책 몇 권 사놓고도 문법을 보니 머리가 아파서 포기했다.)

어쨌든 그 삽질의 결과물을 아래와 같이 공개한다. 자유롭게 이용하되, 아래 스크립트의 사용시 책임은 사용자 본인에게 있다는 걸 미리 밝힌다. :P

참고로, 변환을 하다 보면 다양한 에러들을 만나게 된다. -_-+

• invalid byte sequence in UTF-8 : 이건 본문 중에 애매한 문자열이 있다는 건데, 강제로 유니코드로 변환했음에도 발생한다. 알아서 찾아서 고치는 수 밖에 없다. 단 octopress 소스를 아래와 같이 고쳐야 한다.

1
2
3
4
5
6
7
8

def do_layout(payload, layouts)
  pre_render if respond_to?(:pre_render)
  begin
    old_do_layout(payload, layouts)
  rescue StandardError => e
      puts "Post Filter Error: " + e.message + self.url
  end
end

• Liquid Exception: 혹시 django 나 jquery template 코드가 있을 경우, 이게 Jekyll 의 템플릿 엔진인 liquid의 태그와 동일하기 때문에 에러가 발생한다. 이런 문법에 따라 수동으로 잘 제거하는 수 밖에 없다.
• 핵심적으로 한글로 된 제목 때문에 가장 고생이 심했다. 아주 오래전에 쓴 글들은 제목은 한글, slug는 한글을 URL로 바꾼 %xx%yy와 같은 형식이었다. 이걸 다시 제대로된 유니코드로 역변환(unquote)해서 파일을 만들었는데 rake preview로 살펴보면 한글 URL 포스트에 접근이 안되는 것이었다. 몇 시간동안 삽질을 해본 결과 로컬 서버인 Webrick의 문제인지, GitHub에 올리니까 잘 되는 것이었다. 여기서의 교훈: slug는 영문을 애용할 것!!

jQuery Proven Performance Tips & Tricks 간단 요약

• 최신 버전을 사용해라. (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 의 성능이 갑자기 앞뒤버전보다 확 떨어졌다는 것. :)

jQuery Mobile(이후 jQM)으로 아이패드용 클리앙 뷰어를 만든 경험을 토대로 팁을 정리했습니다. 이후, 편의상 경어를 사용합니다.

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 위젯으로 만들어야 한다.

와이프가 아이패드에서 클리앙을 보시는게 너무 불편해 보여서, 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 vs. Var

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

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

1
2
3

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

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

1
2
3

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!--
<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 를 지정하면 확장자 없는 순수 파일명만 저장할 수 있다.

1
2

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

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

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

1
2
3
4
5

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

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

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

1
2
3
4
5

<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 에 대해 정규식을 적용할 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<exec executable="${file.python}">
  <arg value="trim.py"/>
  <arg value="--verbose"/>
  <arg line="--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 를 간단하게 넣을 수 있다.

1
2
3
4

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<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 를 쓰면 파일을 복사하면서 단순하게 이름을 바꿀 수 있다.

1
2
3
4
5
6
7

<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 으로 대체할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12

<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"/>
  <arg value="--passin"/>
  <arg value="."/>
  </exec>

구글 앱엔진은 데이터스토어의 내용을 로컬 파일로 내려받거나 올리는 벌크로딩을 지원한다. 그런데 막상 기획 데이터와 실시간 연동하려면, 스프레드시트를 편집한 후 CSV로 ‘하나씩’ 다운받아서 다시 콘솔창에서 appcfg.py 로 ‘한 종류씩’ 올려야 하는, 상당히 피곤한 과정을 거쳐야 한다.

만약 구글 스프레드시트의 데이터를 바로 데이터스토어로 올리고 내릴 수 있다면 얼마나 편할까? 해서 스프레드시트 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를 어찌어찌 잘 부를 수 있으면 좋겠는데, 워낙 코드가 복잡해서;;

구글 앱엔진에서 django 1.2 를 사용하려면, main.py 와 appengine_config.py  에 아래 코드를 넣어야 한다. 그런데, remote_api_shell.py 로 연결할 때에도 실행해야 하기 때문에, 가급적 별도의 파일에 넣어서 한번에 import 를 하는 걸 권장한다. (via stackoverflow.com)

1
2
3
4
5
6

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”) 는 윈도우 계열에서 유니코드를 위한 매크로인데, 아마 위 코드랑 충돌이 있을지도 모르겠다. :P

1

from django.utils.translation import ugettext as _

구글 앱엔진의 참조 속성인 db.ReferenceProperty(reference_class=None) 은 - 권장할만 하지는 않지만 - 아무 키 값이나 담을 수 있는 컬럼으로 사용할 수 있다. 문제는 이 값을 export/import 할 때 key_id_or_name_as_string + create_foreign_key 조합을 사용할 수 없다는 점이다. 이걸 해결하려면 내보낼 때에는 (kind, id or name) 2개의 컬럼으로 내보낸 다음, 가져올 때에는 이걸 합치면 된다.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

물론 bulkloader.yaml 맨 위에 위 소스 파일을 import 해주는 것은 잊지 말아야 한다.

Create a Memory Collage in Photoshop | StoodIt

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

Create a Sleek and Clean MP3 Player Interface

개요

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

• inheritance : 맨 마지막 줄이 핵심이다 :P
• prototypal
• private

Sample Codes

• goog.inherits()
• backbone.js extend()
• Base.js
• inheritance(prototype plugin)
• jquery-inheritance/
• JavascriptMVC Class
• JS.Class
• John Resig’s Simple JavaScript Inheritance

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