< 관련사이트 ; http://gulpjs.com >

Gulp를 활용하면 Node & Express 개발중에 코드를 수정한후 다시 시작하지 않아도 자동으로 수정된 부분이

서버로 반영된다. 

설치법은  아래와 같다.

gulp 설치

npm i -g gulp

플러그인설치

npm i --save-dev gulp gulp-nodemon gulp-watch gulp-joshing gulp-livereload

첨부한 파일을 프로젝트 경로에 위치 시킨후 gulp 를 실행하면 끝


'''
(function() {
  'use strict';
 
  var gulp = require('gulp'),
      nodemon = require('gulp-nodemon'),
      watch = require('gulp-watch'),
      jshint = require('gulp-jshint'),
      livereload = require('gulp-livereload'),
      _paths = ['server/**/*.js', 'client/js/*.js'];
 
 
  //register nodemon task
  gulp.task('nodemon', function() {
    nodemon({
      script: 'server/app.js',
      env: {
        'NODE_ENV': 'development'
      }
    })
      .on('restart');
  });
 
  // Rerun the task when a file changes
  gulp.task('watch', function() {
    livereload.listen();
    gulp.src(_paths, {
      read: false
    })
      .pipe(watch({
        emit: 'all'
      }))
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
    watch(_paths, livereload.changed);
  });
 
  //lint js files
  gulp.task('lint', function() {
    gulp.src(_paths)
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
  });
 
 
  // The default task (called when you run `gulp` from cli)
  gulp.task('default', ['lint', 'nodemon', 'watch']);
 
}());
'''

이번 포스팅에서는 노드와 관련된 개념을 정리해보고자 합니다.

ㆍWhat is Node.js? 

Node 를 몇가지 키워드로 설명하자면 , javascript, event-driven, non-blocking I/O, single-thread 로 설명이 하다.

Node는 크롬의 V8 Javascript Engine 기반으로 동작하는 서버이다. 라이언달이 2009년에 만들었고, 지금까지 계

속해서 발전해 왔다. Javascript로 프로그램을 작성하기 때문에 Front-end 개발자들과 Back-end 서버 개발자들간의 경

계가 허물어 졌고, Front 개발자들의 Server-side 의 개발 진입장벽 자체를 낮추는 효과도 있다. 

노드는 싱글 스레드 기반으로 동작하며,  다수의 커넥션이 있을때 우수한 성능을 낸다.(직접 겪어보진 못함) 

일반적으로 생각할때는 멀티스레드 기반의 서버가 더욱 좋은 성능을 낼것같지만, 멀티스레드 기반의 CPU는 실제로 연

산을 하는 시간보다 네트워크처리, I/O 에따른 Delay로 많은 시간을 허비 하게 된다. 

이에반해, 싱글스레드 기반의 Node는 Request가 오면 처리를 하고, 중간에 I/O 처리나 네트워크처리 등이 발생하면,

이벤트를 등록하고 다른 작업을 수행한다. 이때 처리 완료 이벤트가 동작하면 콜백을 받아 다시 작업을 수행하는 

event-driven 방식으로 동작한다. 이로써, I/O 로 인한 지연을 없애 우수한 성능을 낼수 있다.

실제로 노드를 이용하면서  개발을 해보니까... 좋은점은 기존 자바/자바스크립트 개발자는 별도의 Learning Curve가 

크게 없다라는 것이다. 어찌되었든, Javascript 문법을 사용하기 때문에 각 모듈과 노드가 구성되어 있는 형태만 

익힌다면 큰 어려움 없이 개발을 진행할수 있다. 

그리고 새로운 기능을 추가할때, npm 을 이용하여 모듈을 추가하고 그 기능을 활용하는데 크게 어려움이 없다. 

또한, 핫한 트랜드인 만큼 구글링을 통해서 많은 정보를 얻을수 있는 장점 또한 존재한다.

다들 공부합시다.

회사에서 일하다 문득... 공부도 할겸 소켓을 이용해서 찬반투표 프로그램을 하나 만들어 보자라는 생각이 들었다....

일찍 퇴근해서 만들어 봤다 ... Node의 socket.io 를 이용해서 !! 조만간 비쥬얼과 기능을 업그레이드 한 프로그램

을 Sprint4.0 의 sock.js 를 이용해서 만들어봐야 겠다.  일단은 포스팅 시작 !

 ExpressVote.zip      <=== 완성작

Prepare

일단 현재 내 PC 환경은 

Node 개발 환경이 구성되어 있으며, 이클립스에 node.js 플러그인이 깔려 있는 상태다. 

Note & Express 개발환경 구성은 생략한다. 

ExpressVote 라는 Express 프로젝트를 하나 생성했고, 

package.json 의 내용은 다음과 같다. (npm install 명령어를 실행하면 의존성 걸려있는 모듈이 자동으로 설치된다.)

Preview

완성된 프로젝트 폴더 구조 설명

jquery-1.11.0.js : Html 엘리먼트에 이벤트를 설정하기 위해서 사용했다. 물론 기본 자바 스크립트를 활용해도 상관 없다.

vote.js : JQuery를 활용해서 버튼별 이벤트를 설정하고 , Client-Side의 Socket과 관련된 엑션을 정의한다.

vote.jade : 간단한 UI 를 Jade Template Engine을 활용하여 구성하였다. 화면 UI 껍데기라고 생각하면된다.

app.js : Node의 핵!! app.js !! 서버 Socket을 설정하고, vote를 하면 client 소캣으로 emit 을 해주는 역활을 한다. Server-side

package.json : 프로젝트와 관련된 모듈의 의존성 관리.

완성된 프로그램 화면 

프로그램은 매우 간단하다. 사용자가 접속해서 Accept , Denied 버튼을 누르면 투표수가 올라간다. 

투표는 한번씩만 할수 있도록 제한한다. UI는 일단 신경쓰지 않는다...ㅠㅠ

Server-Side

기본적인 Jade 사용 관련, 또는 Route 설정과 관련된 부분은 넘어가겠다.

먼저 , 서버측에서 사용할 Socket 을 선언하면서 소켓을 깐다(?). 나같은 경우는 3000번 포트로 소캣을 열었다.

그리고 서버측에서 관리할 변수들을 선언하였다. 전체 유저수, 찬성, 반대수 같은 경우에는 클라이언트는 Push 된 값

만 확인하고 서버에서 값들을 관리한다.

io.sockets.on('connection',function(){}); 의 의미는  'connection'을 하면 function 안의 내용들을 수행하겠다는 뜻입니다. 여기서 간단하게 설명하자면 , On 은 어떠한 이벤트에 반응하는 리스너라고 생각하면 되고 , Emit 함수는 그 이벤트를 발생시키는 주체 라고 이해하면 편하겠다.  

위에서는 사용자가 접속을 하면 전체 사용자수를 늘리고, 현재 상태를 소캣클라이언트에게 전달한다. (Status 이벤트이용 / 클라이언트에서는 on('status'~~) 가 있겠죠? ) 

그다음에는 'vote'이벤트를 수신하면 사용자가 보낸 데이터에 따라서 찬성이나 반대수를 증가 시키고, 해당 내용을 다시 사용자들에게 푸시 합니다. 

UI (Jade Template Engine)

화면은 Title, 버튼 (찬성,반대) , 결과를 나타낼 Label 로 구성되며, Socket 과 Jquery 를 사용할 라이브러리와 이벤트를 등록할 vote.js 를 포함 한다. (Jade도 나름 많이 쓰다 보니 편한거 같기도..)

Client-Side

클라이언트 사이드의 코드는 아래와 같다. 큰 이벤트는 없다. emit 과 on 만 이해한다면 쉬울듯 ! 

<= 서버 소켓에 접속한다.

<=status Event 를 받으면 화면의 Label 컴포넌트들을 업데이트 한다. (결과를 보여주는부분)

<=찬성과 반대 버튼을 눌렀을 경우 이벤트 핸들링

1. 전역변수로 _vote를 가지고 있고, 아직 투표 하지 않은 경우에는 서버에 vote 이벤트를 emit 한다. 결과는 json 형식으로 전달했다.

2. 투표를 이미 한경우에는 메시지를 표시하고 별도의 행동은 하지 않는다.

맺음말

소캣을 이용해서 실시간 프로그램을 쉽게 만들수 있었다... 비슷한 내용을 스프링으로 구성해보고 비교해 봐야겠다. 

끄읕.