기본 콘텐츠로 건너뛰기

4월, 2012의 게시물 표시

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: $('#conte…

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…

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 연습장.

네이버 블로그 검색 등록

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

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

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

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

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

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
로 떨어지는 심플하면…