자바스크립트로 데스크톱 어플리케이션을 만들어 보자!


참조 URL
  1. http://electron.atom.io/
  2. https://github.com/sindresorhus/awesome-electron
  3. http://nwjs.io/
  4. https://www.nativescript.org/
  5. https://facebook.github.io/react-native/

 





  • 모바일 애플리케이션 개발 도구: NativeScript, React Native
  • 데스크톱 애플리케이션 개발 도구: Electron, NW.js


  • 아래는 electron에서 제공하는 quick start를 실행한 화면이다. 다음 스텝으로 실행할 수 있다.

    (node와 git이 설치 되어 있어야 한다. )



    # Clone the Quick Start repository
    $ git clone https://github.com/electron/electron-quick-start
    
    # Go into the repository
    $ cd electron-quick-start
    
    # Install the dependencies and run
    $ npm install && npm start



    [그림] electron quick start 실행 화면




     위와 같이 데스크톱 화면에서 실행 화면을 확인 할 수 있다.



     아래는 Electron api demos를 받아 실행해 보자.


    $ git clone https://github.com/electron/electron-api-demos
    $ cd electron-api-demos
    $ npm install
    $ npm start


    [그림2] electron api demos 실행 화면





     Electron으로 개발된 애플리케이션에 대해서 더 자세한 정보를 알고 싶다면 "https://github.com/sindresorhus/awesome-electron" 에서 확인해 보자












    Node.js를 멀티 코어에서 동작하도록 해주는 방법에 대해서 소개하도록 하겠습니다.

     

    http://learnboost.github.com/cluster/ - Github Home

    http://learnboost.github.com/cluster/docs/api.html - API Document

    https://github.com/learnboost/cluster - Github Source

     

     

    # npm install cluster

     

     

    --------------------------------------------------------------------------------

    server.js 파일

    var http = require('http');

    var server = http.createServer(function(req, res){
        res.writeHead(200);
        res.end('Hello World');
    });

    // 서버 시작
    if (module === require.main)
        server.listen(4500);
    else
        module.exports  = server;

    console.log('listen on port 4500');

     

    ---------------------------------------------------------------------------------

    cluster.js 파일

    var cluster = require('cluster');
    cluster('server')
        .use(cluster.repl('/var/run/cluster.sock'))
        .listen(4500);

     

     

    node cluster.js – node.js 시작

    listen on port 4500

    listen on port 4500

    listen on port 4500

    listen on port 4500

    listen on port 4500

    listen on port 4500

    listen on port 4500

    listen on port 4500

     

    # telnet /var/run/cluster.sock

    cluster> help()

    Commands

    help(): Display help information

    spawn(n): Spawn one or more additional workers

    pids(): Output process ids

    kill(id, signal): Send signal or SIGTERM to the given worker

    shutdown(): Gracefully shutdown server

    stop(): Hard shutdown

    restart(): Gracefully restart all workers

    echo(msg): echo the given message

    stats(): Display server statistics

     

    cluster> pids()

    master: xxxxx

    worker #0: xxxxx

    worker #1: xxxxx

    worker #2: xxxxx

    worker #3: xxxxx

    worker #4: xxxxx

    worker #5: xxxxx

    worker #6: xxxxx

    worker #7: xxxxx

     

     

    다른 예제

    ---------------------------------------------------------------------------------

    app.js

    var http = require('http');
    
    module.exports = http.createServer(function(req, res){
      console.log('%s %s', req.method, req.url);
      var body = 'Hello World';
      res.writeHead(200, { 'Content-Length': body.length });
      res.end(body);
    });

    ---------------------------------------------------------------------------------

    server.js

    var cluster = require('cluster')
      , app = require('./app');
    
    cluster(app)
      .use(cluster.logger('logs'))
      .use(cluster.stats())
      .use(cluster.pidfiles('pids'))
      .use(cluster.cli())
      .use(cluster.repl(8888))
      .listen(3000);

    ---------------------------------------------------------------------------------

     

     

    참고 URL : http://www.screenr.com/X8v Video

    WebMatrix에서 Node.js를 개발 할 때 여러 가지 에디터를 통해서 개발을 할 수 있습니다.

    대표적인 툴로서 Sublime Text2, AcroEditor, EditorPlus, …이 많은 사랑을 받고 있습니다.

    이제 거기에 더해서 WebMatrix를 더 추가해 소개해 드리고자 합니다.

     

    이전 포스트에서 WebMatrix 설치를 진행하였고 Node.js에서 개발시 편리한 이점을 가져다 주는 Intellisense 기능이 있다는 것을 소개해 드리고자 합니다.

     

    require에서 intellisense

    configure에서 intellisense

    Jade Highlight Syntax 지원

    Less 지원

    EJS 지원

    CoffeeScript 지원

     

    위와 같이 WebMatrix에서는 다양한 파일들을 지원해 주고 있습니다.

    이제 윈도우에서도 NodeJS기반 Meteor Framework을 개발할 수 있습니다.

    현재 Meteor Preview 0.5.0 for Windows 버전까지 나와 있는 상태입니다.

    (Windows 8에서는 Meteor/bin/iisnode.exe의 실행 모드를 Windows 7 모드로 세팅 해야지만 정상동작을 합니다. – 자세한 사항은 마지막에 설명 드리겠습니다.)

     

    Windows용 Meteor 다운로드는

    공식 홈페이지 http://www.meteor.com/
    윈도우용 다운로드 페이지 http://win.meteor.com/
    소스

    https://github.com/TomWij/meteor

    Meteor StackOverflow

    http://stackoverflow.com/questions/tagged/meteor?sort=newest&pagesize=15

    Document http://docs.meteor.com/
    Document 한글 (현재 0.4.2) http://docs-ko.meteor.com/

     

    http://win.meteor.com/ 에서 다운로드 받습니다.

    다운로드 받은 파일을 실행하면 위와 같은 상태가 되고 Next를 눌러 설치를 진행하면 됩니다.

     

    설치가 완료 되고 나서 Windows 환경 설정을 인식하기 위해 재부팅이 필요 합니다.

    (Meteor 명령을 cmd 전역에서 사용할 수 있도록 환경 설정을 설치 파일에서 수정하였다.)

     

    이제 설치 후 재 부팅을 하였다면 이제 한번 실행해 보도록 하겠습니다.

     

    먼저 Windows 8에서 실행하는 것이라면 아래와 같이 호환 모드를 수정해야 정상 동작을 할 수 있다.

    C:\Program Files (x86)\Meteor\bin\node.exe –> 속창 –> 호환성 –> 호환모드 –> Windows 7으로 수정

     

     

    cmd(콘솔)을 실행 시키고 D Drive로 이동하겠습니다.

    D: <엔터>

    md Meteor_Source <엔터>

    cd Meteor_Source <엔터>

    meteor create MeteorFirst <엔터>

    (드라이브와 폴더명은 임의로 수정을 하셔도 됩니다.)

    여기까지 정상적으로 실행이 되었다면 이제 서비스를 할 수 있는 준비는 모두 준비가 된 것입니다.

     

    이제 서비스를 실행해 보도록 하겠습니다.

    cd MeteorFirst <엔터>

    meteor <엔터> – 서버 실행

     

    이제 브라우저에서 http://localhost:3000으로 들어가서 확인해 보겠습니다.

    위 그림은 브라우저에서 실행된 모습입니다.

     

    이제 정상적으로 세팅이 되었습니다.

     

    - 만약 meteor 상태에서 에러가 발생을 한다면 관리자 모드로 cmd를 실행을 해야 합니다.

    meteor을 실행시키면 mongo db를 활성화 시키며 이때 관리자 권한이 필요 한 것입니다.

     

    NodeJS개발은 여러 플랫폼에서 개발이 가능합니다.

    그 중에 저는 WebMatrix를 통해서 NodeJS를 개발에 대해서 소개해 드리고자 합니다.

    아래 설명은 기본적인 WebMatrix 설치가 완료가 된 사항을 전제로 설명을 드리도록 하겠습니다.

    WebMatrix 설치 안내
    http://mvcp.tistory.com/tag/webmatrix 링크

     

    웹 매트릭스 실행 화면

     

    위 화면에서 “템플릿”을 선택하고

    Node.Js를 선택하면 위와 같은 화면이 보여진다.

     

    우선 “빈 사이트”를 선택하고 “사이트 이름”을 수정하고 “다음”을 누른다.

     

    다음을 누르면 NodeJS개발에 필요한 모듈을 WebMatrix에서 자동으로 추가해 준다.

    여기서 나오는 대화창에서 다음 다음 누르면 저절로 설치가 완료가 된다.

     

    완료가 된 화면이다.

     

    “파일”탭에서 파일 편집 및 폴더 구조를 한눈에 파악할 수 있다.

     

    처음으로 NodeJS를 통해서 실행한 화면이다.

     

    테스트를 위해 server.js에서 실행 및 수정된 소스가 반영이 되는지 테스트를 해보도록 하겠습니다.

     

    수정된 server.js가 정상적으로 반영된 모습이다.

    (혹 테스트시 한글이 깨져 보인다면 “res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });” 로 수정하면 정상적으로 보일 것입니다.)

     

    테스트 해보지 않은 다름 템플릿으로도 한번씩 시도해 보시기 바라며

    NodeJS개발에 익숙하지 않으신 분들께서는 분석해 보시는 것만으로도 도움이 되실 것입니다.

     

    감사합니다.

    + Recent posts