2012년 4월 28일 토요일

Meteor로 진지하게 접근해 보는 Rapid Prototyping web application

일단 진지진지 열매 10개 먹고 시작하자.
1. 빠르게 만들고
2. 적게 코드를 쓰고
3. 시각적으로 보기 좋을 것

필요한 건 뭐?
1. 빠르게 만들 프레임 워크
2. 적게 코드를 쓸 수 있는 언어
3. 시각적인 뼈대를 받쳐줄 템플릿

내가 선택한 건?
1. Meteor
2. Coffeescript + Less
3. Twitter bootstrap

자 시작해볼까?

미리 설치해야할 것들
1. node.js + npm (http://nodejs.org/#download)
2. meteor (http://meteor.com/)
3. Coffeescript (npm install -g coffee-script)
4. jQuery plug-in (meteor add jquery)
5. less plug-in (meteor add less)
6. coffeescript plug-in (meteor add coffeescript)
7. bootstrap plug-in (meteor add bootstrap)

4,5,6은 meteor 용 plug-in들인데 매번 less나 coffeescript를 컴파일하지 않아도 클라이언트쪽에서 쓸 수 있다는 점이 엄청 편하다.
글 쓰는 도중 meteor 가 0.3.4로 업데이트 되면서 bootstrap지원이 추가되었다. 만세!

일단 meteor 가 기본으로 생성한 css와 javascript 를 삭제하고 less와 coffeescript 로 교체하자.

<프로젝트명>.coffee 파일은 이정도로 시작하자.


# make Posts into global variable
@Posts = new Meteor.Collection 'Posts'
# when client
if Meteor.is_client
$.extend Template.add,
events:
'click #add': ->
Posts.insert
subject: $('#subject').val()
context: $('#context').val()
createdTimestamp: Date.now()
$('#subject').val('')
$('#context').val('')
$.extend Template.list,
posts: ->
result = Posts.find {}, sort:createdTimestamp:-1, limit:10
if Meteor.is_server
Meteor.startup -> console.log 'started'

아주 심플하다. 심플하다 못해 화가 난다.
그럼 HTML을 작성해보자.

<head>
<title>tenMinuteBlog</title>
<link rel="shortcut icon" href="/img/favicon.ico">
</head>

<body>
<div class="container">
<h1>Posts</h1>
{{> list}}
</div>
</body>

<template name="list">
<div class="list">
<ul>
{{> add}}
{{#each posts}}
{{> item}}
{{/each}}
</ul>
</div>
</template>

<template name="item">
<li id="{{_id}}">
<i class="icon-chevron-right"/>
<span>{{subject}}</span>
<pre>{{context}}</pre>
</li>
</template>

<template name="add">
<li class="">
<div class="subject">
<input type="text" placeholder="Title here..." id="subject" class="span5"/> 
</div>
<div class="context">
<textarea id="context" class="span5"></textarea>
</div>
<p>
<a class="btn" id="add" href="#">
<i class="icon-pencil">
</i>
Add
</a>
</p>
</li>
</template>

구조가 좀 이상해보일 수도 있지만 이것도 참 외견과 기능에 비해 단순하다.
기능별로 템플릿을 나눴다.
list 가 있고 그 하위에 add (포스트 추가), 그리고 n개의 post 에 대해서 each로 반복하면서 item을 보여주는 구조.
그래서 구현도 add버튼 클릭과 list템플릿의 posts collection을 받아오는 식으로 구현했다.
CSS? 아니 LESS?
워낙에 Bootstrap이 좋아서 별로 할게 없다.

/* CSS declarations go here */
li {
  list-style-type:none;
}

일단 요정도만 하자.
command line 에서 meteor 를 입력하고 띄워서 본다.
bootstrap 적용으로 모바일에서도 데스크탑에서도 볼만한 화면이 나온다.

http://acidsound.github.com/tenMinuteBlog 에 프로젝트를 일단 생성.
이것도 autogenerate 로 날로 먹은 것 치곤 나쁘지 않다.

2012년 4월 26일 목요일

coffeescript 설치 및 개발환경 구성

먼저 coffeescript 관련 바이너리를 받자.
node 가 깔려있으면 npm install -g coffee-script 해본다
coffee 라고 쳐서 뜨면 ok. Ubuntu 11.10에서 확인.
만일 경로를 못찾으면 http://stackoverflow.com/questions/6985457/cant-install-coffeescript-on-ubuntu-lts 여기 답변처럼 구버전을 깔아본다.


wget --no-check-certificate https://registry.npmjs.org/coffee-script/-/coffee-script-1.1.2.tgz
npm install -g coffee-script-1.1.2.tgz


순서대로 한다. 현재 1.3.1인데 1.1.2를 깔아쓰는게 굉장히 찝찝하지만 나중에 더 좋은 방법이 있으면 수정해야지. 아마 이 글을 읽는 여러분은 저짓을 안해도 되길 바란다.
해보니까 경로를 못찾아도 vim 실행하는데는 문제가 없으니까 그냥 내버려둔다.

그럼 다음으로 개발환경을 구성할 건데. 뭘 쓰든 상관없지만 vim 환경이 있으면 상당히 편하다. 차례대로 해보자.
https://github.com/tpope/vim-pathogen 참조.
먼저 pathogen 을 설치. 복사해서 붙여넣자. wget 을 쓰고 싶으면 curl 대신 wget -o -


mkdir -p ~/.vim/autoload ~/.vim/bundle; \
curl -so ~/.vim/autoload/pathogen.vim \
    https://raw.github.com/tpope/vim-pathogen/HEAD/autoload/pathogen.vim


그 다음 ~/.vimrc 에 다음 한줄 추가하자.

call pathogen#infect()

그 뒤로 진행할지는 알아서. 나는 일단 여기까지만
아까 만들어놓은 bundle 경로로 들어와서 coffee-script plug-in을 넣어주자

cd ~/.vim/bundle
git clone https://github.com/kchmck/vim-coffee-script.git

https://github.com/kchmck/vim-coffee-script 내용 참조.
vim에서 띄우고
:CoffeeCompile watch vert

를 입력. Live Preview 모드다.
당연한 소리지만 가로 분할은

:CoffeeCompile watch hori

파일을 변경할 때마다 지가 알아서 변환한다. 편하다.


너무 알록달록해서 눈이 좀 아프긴하다;;;
사족)
vim의 창 분할은 꽤 편리하다. 별도로 포스트를 분리해도 좋겠지만 대충 쓰면
ctrl+w+v : 세로분할
ctrl+w+n : 가로분할
ctrl+w+(h,j,k,l) : 창간 이동. 좌, 하, 상, 우 순
ctrl+w+w : 다음 창 이동
ctrl+w,c : 창 닫기 (마지막 c는 ctrl키를 뗀다)
ctrl+w+- 혹은 ctrl+w+7 : 현재 창 최대화
ctrl+w+= : 균등 분할 크기 조정
ctrl+w+r : 창회전. (창 영역 서로 바꾸기)
:resize <숫자> : 지정 숫자만큼 열 변경
ctrl+w+<숫자>+ : 지정 숫자만큼 열 증가

ctrl+w+<숫자>- : 지정 숫자만큼 열 감소



2012년 4월 20일 금요일

jsbin 팁 - list, ajax

콘솔창을 열고
> jsbin.home('<key>', '<value>');
value는 아무래도 상관없다.

중복체크 후 Title 에 해당키가 생기는 것을 확인 할 수 있음.
그리고
jsbin.com/list를 들어가보면
key를 생성한 시점부터 만든 파일들을 이력과 함께 조회 가능함.




AJAX 테스트를 위해 더미값을 넣어보고 싶을때가 있다.
pastie 같은 텍스트 전용 서비스를 이용한느 것도 방법이겠지만
css, html을 다 지우고 js 쪽에 JSON을 넣고 해당 URL에 /js 를 붙이는 식으로 접근 가능하다.
cross domain 문제 때문에 골머리를 앓지 않아도 된다.
예) http://jsbin.com/qweas/js


http://jsbin.tumblr.com/ 그 외에도 유용한 팁이 가득.
jsdo.it 과 더불어 참 좋은 html5 연습장.

2012년 4월 17일 화요일

네이버 블로그 검색 등록

https://twitter.com/#!/taekie/status/191824965677490176
이 트윗을 보고 바로 찾아보았으나
무한 루프에 좌절. 다시 네이버 검색을 통해 현재 유효한 링크를 발견

http://help.naver.com/ops/step2/mail.nhn?catg=547&upCatg=264#
"문제가 해결되지 않았다면 문의를 접수해 주세요." 오른쪽에 있는 문의하기 버튼을 누르고
RSS 주소를 써넣으면 된다.

포탈 등등에 일괄 등록하게 해주는 서비스가 있어도 좋을텐데
아무도 없으면 중이라도 제 머릴 깎아야지 하는 심정으로 신청.

2012년 4월 5일 목요일

베토벤의 월광을 글로 배워보자

예로부터 악보는 음악을 메타화 시각화하는 도구로 꾸준히 사랑받았지만
현대에 들어 기계화란 면에서 한계가 있는게 아닌가라는 생각을 했다.

http://kobnet.net/~phono/dinsync/Tb303_pattern_sheet.pdf
개인적으로 이런 시도 참 좋아한다.
어렸을때 4마디를 기준으로 8박을 쪼개면 32개가 되는데 대충 멜로디를 적기에 간편해서 32grid 라는 이름을 붙이고 쓰곤 했는데
이런걸 보면 역시 사람이란게 다들 불편하면 필요로 만드는 능력이 네트워크로 연결되어있지 않나 (무슨 베르나르 베르베르의 개미도 아니고) 싶다.

암튼 이 글을 쓰게된 동기는 이 영상 때문이다.
아옳! 이거야!

그래서 월광에서 가장 테크니컬하고 노가다 만땅인 3rd movement를 분석해보았다.
자 이 글을 읽고 나면 당신도 기타를 들고 내 마음의 디스토션을 밟고 월광을 들으면서 연주할 수 있을 것이다.
왼손 | 오른손-코드로 아르페지오를 표기해보았다.

C# G# | G# C# E  G# - C#m
C  G# | G# C  D# G# - G#7
B  G# | G# C# F  G# - C#7
A  A  | C# F# A  C# - F#m
A  A  | C# E  G  C# - C#dim (!!!!!)
G# G# | C  D# C     - G#


고정폭 지원이 안되면 좀 보기 갑갑할 수도 있겠다 암튼 간에.
생각보다 어렵지 않다.  C# minor 스케일 놓고 마구 흔들면 되겠다.
어렵다고? 그럼 반음 내려서 보자


C  G  | G  C  Eb G - C
C  G  | G  B  D  G - G7
Bb G  | G  C  E  G - C7
Ab Ab | C  F  Ab C - Fm
Ab Ab | C  Eb Gb C - Cdim
G  G  | B  D  B    - G


아직도 어려운가? 만일 여자친구가 피아노 전공이면 저 코드만 외우자.
당연히 필살기는 C#dim(디미니쉬)다.
저게 예술이여. 화룡 점정인것이지.허허

Im - V7 - I7 - IVm - Idim - V
로 떨어지는 심플하면서도 강렬한 진행!

그리고 그 사이를 잇는 옥타브 멜로디도 한번 보자.

R | -  G# G# A# C  C# D# C  D# C# F# E  D# C# C  A
L | C  C  C  C# D# E  F# D# F# E  A  G# F# E  D# C#
  | G#
interval  8  9  9  9  9  9  9  9  9  8  9  9  9  9 

현란한 왼손 오른손 병진행이다.
interval 에 쓴 숫자는 오른손과 왼손 사이의 거리. 즉 반음 단위로 음차를 숫자로 표기하였다.
이렇게 두번 반복한다. 남자답게 파워코드로 G#m 만 연사하자.

이것만으로 모자르셨는지 마무리를 이렇게 하셨다

R |  G# G  G# G  G# G  G# G  G#
  | G# A  G#  G#  G#  G#
L | C  C# C  C# C  C# C  C# C 
  | G# G# G# G# G# G# G# G# G#

이야! 왼손이 C -> C# 와리가리하면
오른손이 G# -> A 와리가리해서 5도 병진행으로 갈 줄 알았는데
G#->G로 쪼여주시는 센스.

역시 클래식이 괜히 클래식은 아니다.
불꽃같은 정열도 평범함 속에서 뚫고 나오는 하나의 빛들이 있어 아름답다는 것을 우리에게 보여주신 베선생님께 박수를!

여기까지 보여주고 '아~ 잘 안풀리네.' 하면서 으쓱해주고 맛있는 거 먹으러 가자 :)