Rev. 2.73

크로스-브라우저 이슈를 가지각색으로 안고있는 스타일시트를 다루는 작업은 클라이언트-사이드 개발자들을 매우 피곤하게 합니다. 코드를 수정하고 여러 브라우저에서 확인하고 다시 수정하고 확인하는 테스트 기반 코딩이 이루어지는 것이 보통입니다. 이러한 노고를 잘 알고있는 Andrew Davey씨는 이와 같이 더딘 개발 프로세스를 확실하게 개선시켜주는 Vogue를 만들었습니다.

Vogue는 현재 작업중인 HTML 페이지에 로드되어있는 스타일시트를 자동으로 감지하고 감시합니다. 그리고 감시 대상이 된 파일에 변동사항이 발견되면 브라우저의 새로고침 없이 해당 파일만 갱신하여 즉시 화면에 반영해 줍니다. 활용예를 들자면, IE9, 파이어폭스 그리고 크롬에 작업중인 페이지를 열어놓고 자신이 선호하는 편집기에서 스타일시트를 코딩하고 저장합니다. 늘 그랬듯이 각 브라우저별로 변경 내용을 확인하려는 순간 헉! 화면에는 방금 코딩했던 내용이 "새로고침"을 하지도 않았는데 이미 반영되어 있는 마법과도 같은 일이 발생합니다.

이를 조금더 활용하자면, 메인 모니터에는 편집기를, 서브 모니터에는 브라우저들을 한눈에 보이게 배치하합니다. 편집기에서 스타일시트를 코딩하여 저장하는 순간 모든 브라우저들이 조금전의 변동내역을 즉시 반영하는 상황을 경험할 수 있습니다. 뻥 아녜요; 이 2분짜리 스크린캐스트를 확인해 보세요.

설치 및 사용방법은 간단합니다. Vogue는 Node.JS로 구축된 실행형 모듈이며, Socket.IO 모듈에 기반하고 있습니다. 다음과 같이 npm을 사용하여 전역으로 설치합니다.

# npm install vogue -g
vogue@0.4.2 /usr/local/lib/node_modules/vogue
├── parseopt@1.0.0-2
└── socket.io@0.7.11

이제 작업중인 프로젝트의 경로(스타일시트 경로와 일치하는)로 이동하여 Vogue를 실행합니다.

# cd ./my-project
# vogue
Watching directory: /var/www/my-project
Listening for clients: http://localhost:8001/

끝으로, 스타일시트가 반영된 HTML파일에 아래와 같은 코드를 추가합니다.

<script src="http://localhost:8001/vogue-client.js" type="text/javascript"></script>

위 스크립트 태그를 추가하는 것 대신에 북마크릿과 같은 형태로 사용해도 무방합니다. 자, 이제 모든 준비를 마쳤습니다. 브라우저들에 작업중인 페이지를 열고 스타일스트 작업을 시작하세요! 작업 능률이 팍팍 오르겠지요?

Comments

Cloud9 GitHub에 놀러갔다가 뭔가 심상찮은 변화가 있는 듯하여 "git pull" 때렸더니 소스가 주룩주룩 갱신됩니다. 서브 모듈들도 왕창 업데이트 되었더군요. 참고로 저는 devel 브랜치를 빌드해서 운용합니다. 로그인 기능도 추가하고 새로운 기능들도 맛보고 싶어서지요. Cloud9은 확장기능을 제공하도록 설계되었습니다. 이것은 상단의 메뉴에서 Window > Extension Manager... 패널을 호출하여 사용자 지정 확장기능을 추가하거나 기존기능을 비활성할 수 있습니다. 그런데 뭔가 고장날까봐 잘 안건드리게 되더군요. 이번 패치에는 아래 그림에서 보는 것 처럼 사용자 지정 확장기능과 기본 확장기능이 구분되어있습니다. 뭔가 재미있는 것들이 있을것 같아 조금 살펴보기로 했습니다.

extansions.png

일단 1.6버전으로 운영되는 Cloud9 서비스의 기능과 비교해 보았습니다. 헉! Minimap이라는 쇼킹한 기능이 추가되었습니다! 이것은 소스전체를 작은 미리보기로 나타내고 현재 위치한 화면 영역을 구분하는 멋진 확장기능이었습니다. 상단 메뉴에서 View > Show Minimap을 클릭하여 활성 또는 비활성합니다. GitHub를 뒤져보니 Tane Piper씨가 벌써 훔쳐와 적용했더군요. 이 diff를 적용하면 아래 그림처럼 Minimap 기능이 활성화 됩니다. 신기해서 살짝 들춰보니 Canvas 요소를 이용해서 구현된 것이더라고요.

minimap.png

그런데 이분 코드에서 livecoffee라는 못보던 키워드를 발견합니다. 다시 GitHub에서 검색하니 바로 모습을 드러냅니다. Live CoffeeScript 확장은 커피스크립트로 작성된 코드를 즉시 자바스크립트로 해석해 주는 아주 멋진 녀석이었습니다. 간간히 커피스크립트로 만들어진 소스를 만나면 개짜증을 내며 js2coffee.org를 찾곤 했는데, 이제 그럴필요가 없습니다. Cloud9이 설치된 폴더로 이동하여 다음과 같이 clone하고 ...

git clone git://github.com/tanepiper/cloud9-livecoffee-ext.git client/ext/livecoffee

Extension Manager 패널에서 "ext/livecoffee/livecoffee"를 입력해주면 아래 그림처럼 기능이 활성됩니다.

livecoffee.png

그리고 client/ext 폴더는 ext 라이브러리를 사용했기 때문에 있는줄로 착각했었는데, 그게 아니라 확장기능들을 모아놓은 위치라는 사실도 알게 되었습니다. 웹으로 만들어진 도구로 웹앱를 짜고 Cloud9으로 Cloud9 소스를 머지(merge)하고 앉았으니 참 기분이 오묘합디다. ㅋㅋ

Cloud9 덕분에 좀처럼 변화가 없던 개발관습에 서서히 변화가 나타나고 있습니다. 이제는 Node.JS 코드를 만질때면 습관적으로 크롬을 찾게 됩니다. 코드를 짜는 족족 서버에 반영하고 결과를 즉시 확인하는 이 믿을수 없는 개발환경은 마치 클라이언트-사이드에서 자바스크립트를 다루는 것과 별반 다르지 않습니다. 프로세스를 여러개 실행할 수 있어서 개발용과 배포용을 구분하면 한 대의 서버에서 다양한 프로젝트를 작업할 수 있기 때문이고 더불어 GitHub와 함께하면 소스 리파지토리는 클라우드가 되어버리죠. 이제 Cloud9이 SSH 콘솔만 제대로 갖추면 크롬북이나 아이패드로 작업하는 그야말로 클라우드 개발환경이 만들어질 날도 머지않았습니다. 시와 때를 가리지 않는 미친 개발환경이네요.

Comments

Node.JS 코드를 다루면서 조금 아쉬운점 하나는 콘솔 디버깅이었습니다. 이게 console.log, console.info, console.warn 그리고 console.error를 구분하지 못하고 모두 일반 텍스트로 나오는 것이었습니다. 그래서 Socket.IO의 콘솔이 컬러로 나오는 것을 참고하여 Clog라는 이름의 npm 모듈을 만들고 배포했습니다.

# npm install clog

Clog 모듈은 콘솔을 호출할 때 사용한 메서드를 표시하고 색상으로 구별하며, 사용자 지정 메서드를 사용할 수 있도록 하는 특징을 추가했습니다. 패키지에 동봉된 테스트 파일의 내용은 다음과 같습니다.

var clog = require('clog');

clog('server', 'start listening on port 3000');  // custom head

clog.log('hello', 'world');                      // console.log
clog.info(['foo', 'bar']);                       // console.info
clog.warn('baz is deprecated.');                 // console.warn
clog.error('HTTP/1.1 400 Bad Request');          // console.error
clog.debug('headers', {                          // console.debug
    'Content-Type': 'text/javascript'
});

위 코드들을 실행하면 아래와 같이 출력됩니다.(오타는 애교로 봐주세요;)

clog.png

배포는 어렵지않게 할 수 있었습니다. 다른 노드 모듈들의 패키지 구성을 참고하여 대충 만들고 도움말 페이지를 참고하여 아래와 같은 배포과정을 거쳤습니다. 페이지의 내용은 대부분은 "테스트좀 잘하고 올려라"입니다.

# npm adduser
# npm publish

참, 위 모듈을 구성하는 코드는 GitHub에 공개했으며 MIT 라이센스이니 맘것 때려고쳐 쓰시면 됩니다. 아, 제가 서버 모듈을 배포하게 되는 날이 올줄은 꿈에도 상상못했는데 뭔가 가슴이 뭉클하네요. ㅠ.ㅠ

* 2011/09/09 업데이트 0.0.2 - 불필요한 코드 제거
* 2012/01/16 업데이트 0.1.2 - configure 메서드 추가

Comments