meteor로 nw.js 개발하기.

실제로 nw.js 어플리케이션을 개발하다보면 UI구현하기 막막하고 수동으로 리프레쉬 하는 것도 귀찮아서 Meteor 연동을 하려고 했더니 생각보다 간단했다.

디렉토리 구조는 먼저 이렇게 잡았다.

`- app
  `-client
  `-public
`- dist
  `- 배포용 html,css,js
  `- package.json
`- package.json

아이디어는 이렇다. nw.js의 시작페이지를 http://localhost:3000으로 두고 배포시엔 meteor client 배포툴인 meteor-build-client를 사용하여 html,css,js 로 분리하는 계획이다.

가장 중요한 nw.js 용 package.json 파일은 아래와 같이 구성한다.

{
  "main": "http://localhost:3000",
  "node-remote": "http://localhost:3000",
  "name": "<앱이름>"
}

이게 전부. 어떻게 보면 Web과 nw.js를 동시에 개발할 수도 있는 환경이기도 한 것이다.
meteor create app 을 해서 meteor용 앱을 만들고 meteor 를 시작한다.
그리고, 위의 package.json이 있는 경로로 돌아가서 nw . 으로 nwjs를 실행한다.

한번 번쩍하더니 잘 된다.
cordova 등에서 index.html 대신 http://localhost:3000을 하는 것도 비슷한 느낌이다.

즐겁게 개발을 일단 마구 하고 실제로 배포하기 위해서는 개발환경이 아니라 html,css,js로 구성된 배포본을 만들어야한다.
npm install -g 해도 되지만 어짜피 Meteor에서만 쓸거

meteor npm install -g meteor-build-client

해버릴거다.

개발은 문제 없어 보이고 배포판을 한번 만들어보자. meteor app 이 있는 경로(meteor run으로 실행했던)로 가서

meteor meteor-build-client ../dist --path ""

하고 ./dist 경로로 가서 확인해보자.

701c3455d4f16d4fef2c2396a32edf2b975cac2c.js
701c3455d4f16d4fef2c2396a32edf2b975cac2c.stats.json
index.html

이런 식으로 생겼을거다. 아마 CSS추가하면 .css도 같이 생성될 것이다.
마찬가지로 ./dist/package.json 도 만들어주자. meteor-build-client 를 생성할 때 마다 dist 디렉토리가 새로 생성되므로 package-dist.json 같은 식으로 상위 디렉토리에 만들어두었다가 복사(cp ../package-dist.json package.json)해서 쓰자.

{
  "name": "firstOne",
  "main": "index.html"
}

간단하게 이렇게 구성했다.
자세한 내용은 이쪽(https://github.com/nwjs/nw.js/wiki/manifest-format)을 참조하자.
nw . 해서 실행해보자.
거짓말처럼 잘 실행이 된다.

데스크톱 어플리케이션을 쓸일은 실무를 하다 보면 종종 있다.
배포가 간편하고 사용자가 URL을 입력할 필요가 없어 편리한데다가 오프라인에서도 잘 작동한다.
아마도 electron도 같은 원리로 작동할 것이라고 본다. nwjs는 XP같은 레거시 지원과 보안면에서 장점이 있어 쓰고 있다. 취향/상황에 맞게 사용해보자.