spectrum learns to dig

meteor 는 자동(규칙에 맞게)으로 파일들을 모아서 만드는데 less 일 경우엔 @import 라는 게 있어서 조금 헷갈린다. less-autofixer 패키지랑 같이 쓰니까 더욱 헷갈려서 결국 RTFM  하기로 함. 패키지 문제니까  https://github.com/meteor/meteor/tree/devel/packages/less  를 보았다. 예전에 쓰던 방법이랑 좀 다른 것도 있어서 정리. less 사용 기본 meteor add less package 에서 Package.onUse(function (api) {   ...   api.use('less');   ... }); 파일 규칙 *.less  : 자동 추가. import 불가 *.import.less : 자동 추가 x. import 가능 imports 디렉토리 아래 *.less : 자동 추가 x. import 가능 packages 인 경우 packages.js 에서 {isImport:true} 옵션을 사용. api.addFiles('x.less', 'client', {isImport: true}) 이런 식으로 지정한 경우 import 가능 import 다른 패키지에서 import @import "{my-package:pretty-buttons}/buttons/styles.import.less" 대상 앱에서 import @import "{}/client/styles/imports/colors.less" package 안에서 import @import "/path/to/style.import.less"; 이제까지 계속 *.import.less 패턴만 썼는데 **/imports/**/*.less 패턴도 써봐야겠다. 깔끔하네.

tmux를 쓰다보니 vim 환경 설정 셋을 문득 만들어 보고 싶었다. 1. 일단 vim 먼저 받고 sudo apt-get install vim 2. manage your runtimepath 관리용 pathgen 설치 mkdir -p ~/.vim/autoload ~/.vim/bundle; \ curl -Sso ~/.vim/autoload/pathogen.vim \     https://raw.github.com/tpope/vim-pathogen/master/autoload/pathogen.vim 3. ~/.vimrc 없을테니 아래와 같이 생성. tab/indent 간격은 2에 탭 대신 space로 쓰기 위해 expandtab 추가 execute pathogen#infect() syntax on filetype plugin indent on set tabstop=2 set shiftwidth=2 set softtabstop=2 set expandtab 4. 아무 js 나 vim 으로 열어서 color 적용여부 확인 5. sensible plugin 설치 git clone git://github.com/tpope/vim-sensible.git ~/.vim/bundle/vim-sensible 6. node bundle 설치 git clone https://github.com/moll/vim-node.git ~/.vim/bundle/node 7. coffeescript bundle 설치 git clone https://github.com/kchmck/vim-coffee-script.git ~/.vim/bundle/vim-coffee-script/ 8. zen code 보다 더 좋은 Emmet 설치 - ctrl+y+, 로 활성화 git clone http://github.com/mattn/emmet-vim.git ~/.vim/bundle/emmet-vim 9. less 도 활성화 ...

일단 진지진지 열매 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.i...