본문 바로가기

Node.js/10. node-webkit

1- node-webkit 시작하기

먼저 node0webkit 은 node.js 로 윈도우기반의 프로그램을 만들수 있게 도와주는 프로그램입니다. 단순히 실행되는 node가 아닌 윈도우상태로 돌아가며 가장 중요한! os에 구해받지 않으며 모든 플랫폼에서 돌아가는 실행파일을 만들수 있는!! 아주 성스러운 프로그램입니다!! node-webkit 에는 크로미움과 node 내장되어 있어서 자체적으로도 돌아가면서 실행파일도 os 별로 구현이 가능합니다. (충격과 공포급이죠.)


해당 예제는 https://github.com/rogerwang/node-webkit 에 있는 퀵스타트 부분의 예제입니다. 


1. 먼저 해당 프로그램을 다운 받아야 합니다.(저는 mac os 에서 진행하였습니다.) 다른 플랫폼의 경우 다운만 받아서 설치하면 되지만 mac os 의 경우 약간의 설정을 해줘야 합니다. 

https://github.com/rogerwang/node-webkit#downloads


2. 다운받은 파일을 압축 푼후 응용 프로그램에 넣어줍니다.



3. 이제 응용프로그램에 설치가 완료되었습니다. 실행시켜보면 다음과 같은 화면이 나옵니다. 사파리와 상당히 유사해 보이지만 크로미움입니다. 



4. 커멘드 창에서도 실행 가능 하도록 설정해줘야 합니다. 커맨드 창을 열고 다음을 타이핑 합니다.

open -a TextEdit ~/.bash_profile


그다음 아래의 문장을 넣어주고 저장합니다.

# alias to nw
alias nw="/Applications/node-webkit.app/Contents/MacOS/node-webkit"

5. 이제 터미널 어떤 곳에서 nw 를 실행하면 3번에서 보았던 화면이 나옵니다. 


6. 간단한 예제를 만들어보겠습니다. app 이름의 폴더를 하나 생성합니다. 해당 폴더에 index.html , package.json 파일을 만들어 줍니다. 


7. 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>


8. package.json 파일 내용

{

  "main": "index.html",

  "name": "nw-demo",

  "private" : true,

  "description": "demo app of node-webkit",

  "version": "0.1.0",

  "keywords": [ "demo", "node-webkit" ],

  "window": {

    "title": "node-webkit demo",

    "toolbar": true,

    "width": 800,

    "height": 500,

    "position": "mouse",

    "min_width": 400,

    "min_height": 200,

    "max_width": 800,

    "max_height": 600

  },

  "webkit": {

    "plugin": true

  }

}


9. 이제 커맨드 프로그램을 실행한후 6번에서 만들었던 app 폴더가 있는곳으로 이동합니다. 

    nw app 로 실행하면 다음의 화면이 나올껍니다. 



끝! node.js 로 윈도우어플리케이션을 만드는게 상당히 매력적입니다. 

앞으로 node-webkit 으로 몇가지 예제를 올려드리겠습니다.