Blog

[node-webkit] 노드 웹킷으로 네이티브 앱 만들어보기 2

June 14, 2014

[node-webkit] 노드 웹킷으로 네이티브 앱 만들어보기 2

기본구성.

이전 글에서도 이야기 했듯이, nodejs를 기반으로 하고 있다. node-webkit 역시 비슷한 방식으로 구동되기 때문에 node-module을 만드는 방식이 비슷하다. 즉, 만들려고 하는 js파일 그리고 메타정보를 담고있는 package.json만 있으면 된다! 아니 js 없이 화면을 보여줄 html 과 package.json만 있어도 된다. 일단 코드부터 보자.

Quick Start from node-webkit github

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

package.json

{
  "name": "nw-demo",
  "main": "index.html"
}

index.html과 package.json 압축!

$ zip app.nw index.html package.json

실행해보기!

$ nw app.nw // 이전 글에서 alias 해줘야 합니다.

다음과 같은 화면이 보일 것이다. 

저번보다 훨씬 커스터마이즈 된 듯한 느낌의 브라우저다! 

만들어본 앱의 structure를 보면..

app.nw
|-- package.json
`-- index.html

이런느낌!

– 웹 개발하듯이 뷰를 만들면
– node-webkit이 package.json을 보고 .nw 로 실행!

기본적인 이야기는 이정도로 마무리 하고 본격적인 예제앱을 만들어보겠다.