Angular CLI ( Common line interface )


참조 URL
  1. https://cli.angular.io/
  2. https://cli.angular.io/reference.pdf
  3. https://www.angular.io/

 




 Angular2를 개발할 수 있도록 Angular-CLI를 제공하고 있다. 아래와 같이 NPM을 통해서 설치하여 개발 환경을 쉽게 구축할 수 있다.





[그림1] 설치 및 개발 환경 세팅





[그림2] ng new를 통해서 환경 세팅



위 '그림2'와 같이 개발 환경을 세팅을 하고 있으며 마지막으로 "ng serve"를 통해 아래와 같은 화면을 확인 할 수 있다.
















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


참조 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의 Express에 대한 한국어 설명


    참조 URL
    1. http://firejune.io/express/
    2. https://github.com/visionmedia/express
    3. https://runnable.com/express
    4. http://nodejs.sideeffect.kr/docs/




     

     

     

     

     

     

    Node Tools for Visual Studio 1.0 Alpha

    ( Visual Studio에서 Node 개발하기 )


    참조 URL
    1. http://www.hanselman.com/blog/IntroducingNodejsToolsForVisualStudio.aspx
    2. http://nodejstools.codeplex.com/
    3. https://www.youtube.com/watch?feature=player_embedded&v=W_1_UqUDx2s
    4. http://weblogs.asp.net/shijuvarghese/archive/2013/11/24/deploying-a-node-js-web-site-on-windows-azure-using-node-js-tools-for-visual-studio.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ShijuVBlog+%28Shiju+Varghese%27s+Blog%29



    NTVS is a free, open source plugin that turns Visual Studio into a Node.js IDE. 


    NTVS supports Editing, Intellisense, Profiling, npm, Debugging locally and remotely (Windows/MacOS/Linux), as well Azure Web Sites and Cloud Service.


    Designed, developed, and supported by Microsoft and the community.



    NTVS(Node Tools for Visual Studio)는 무료다. Visual Studio 안에서 Node.js IDE를 사용할 수 있는 오픈소스 플러그인이다. NTVS는 Editing, Intellisense, Profiling, npm, Debugging(locally, remotely, Azure)를 지원한다.

    이 프로젝트는 Microsoft와 커뮤니티에서 디자인, 개발을 지원하고 있다.






     




    Node.js에서 C#, F#, Python, PowerShell 사용


    참조 URL
    1. http://tjanczuk.github.io/edge/#/
    2. https://github.com/tjanczuk/edge
    3. http://weblogs.asp.net/shijuvarghese/archive/2013/05/29/edge-js-running-node-js-and-net-in-one-process.aspx


     Node.js에서 C#, F#, Python, PowerShell을 사용할 수 있도록 해주는 라이브러리다. 아래로 Edge.js에서 알려준 코드를 한번에 알 수 있도록 나열하였다. 그리고 아래 '그림3'에 성능 비교표도 있으니 확인해 보기 바랍니다.



    [코드] C# 사용 코드



    [코드] F# 사용 코드





    [코드] Python 사용 코드




    [코드] PowerShell 사용 코드



     위와 같은 방법으로 다른 언어에 대해서 사용할 수 있다.



    [그림1] Edge.js 컨셉



    [그림2] Interop model




    [그림3] Performance

    https://github.com/tjanczuk/edge/wiki/Performance )


     그림3은 In-process와 Cross-process로 호출 했을 때의 성능 비교 표다. 두번째와 세번째가 .Net과 통신 하였을 때의 차이점임을 볼 때 Node.js에서 호출 할 수 있도록 .Net에서 만들고 사용한다면 별도의 서비스로 만들어 통신할 때보다 성능 상의 이점을 많이 얻을 수 있을 것이다.

    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에서는 모바일 디바이스 개발을 위한 지원 해주고 있습니다.

    현재 지원되는 디바이스는 IPad, IPhone, WindowPhone7, Browser Stack(Cross Browser Test)를 지원하고 있다.

    Browser Stack 실행 화면

    (Safari, FireFox, IE, Chrome, Opera, Android, iOS, Opera Mobile, Windows XP ~ Windows 8, Max OS 지원)

     

    그럼 이제 WebMatrix에 추가해 보도록 하겠습니다.

    WebMatrix에서는 아주 쉽게 추가할 수 있도록 되어 있습니다.

    실행에서 “새로 추가”를 눌러 줍니다.

    원하는 기능을 선택하고 “설치”를 누르면 설치가 완료가 됩니다.

    이제 추가가 완료가 되었습니다.

    한번 시험을 해보도록 하겠습니다.

     

    iPad로 실행한 모습

    Orientation을 Portrait로 수정한 모습

    (마우스 우 클릭 하여 수정할 수 있습니다.)

     

    iPhone 실행 모습입니다.

     

    WebMatrix에서 개발 할 때 One Source Multi Platform 지원을 위한 개발을 할 때 편리하게 확인하면서 개발을 진행 할 수 있을 것입니다.

     

    도구가 지원하는 편리함을 가지고 최대한 이용할 수 있는 부분은 이용하는 것이 바람직한 자세일 것입니다.

     

    감사합니다.

    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를 활성화 시키며 이때 관리자 권한이 필요 한 것입니다.

    이번에는 WebMatrix에서 NPM을 사용할 수 있도록 세팅하도록 하겠습니다.

    우선 WebMatrix를 실행하고 Node관련 사이트를 열거나 새로 만듭니다.

    Node.js 템플릿으로 새로 만들기를 눌러 시작해 보도록 하겠습니다.

     

    이제 WebMatrix를 실행하면 위와 같이 “확장” 리본 아이콘이 보입니다.

    클릭하여 실행시킵니다.

     

    그러면 위와 같이 확장 갤러리에서 NPM Gallery를 찾아 선택하고 “설치” 버튼을 누릅니다.

     

    NPM 갤러리 리본 아이콘을 클릭하면

     

    이와 같이 검색 다이얼로그가 나오고 검색 및 선택하여 Module을 추가할 수 있습니다.

    + Recent posts