Mobile Convergence

EJS (Embedded JavaScript) 엔진은 자바쪽의 JSP 사용과 거의 유사하다고 보면 된다. 

• 장점 : JSP 코딩처럼 쉽게 적응할 수 있다
• 단점 : 프레임워크가 무거움 

> young.ejs : html 태그는 제외했음

ejs 보다는 jade를 사용하자 

전역범위에서 참조가 가능한 글로벌 오브젝트. already defined object라고 할 수 있겠다. 

• 참조 : 전역 객체들

node.js에서 File I/O 를 위하여 역시 모듈을 로딩하여 사용한다 

• 참조 : File 핸들링

> 이를 해결하기 위하여 callback chain을 사용한다. 즉, callback안에 callback function을 둔다 

EventEmitter는 말 그대로 이벤트를 발생시키는 모든 객체를 지칭한다. 서버에 접속(connect)할 때 이벤트가 발생하고 파일을 읽을 때 이벤트가 발생하는 식으로 이미 내장된 이벤트들이 존재할 것이고, 사용자 정의 이벤트를 만들 수도 있을 것이다. 

• 참조 : Events

node명령으로 자바스크립트 코드를 수행할 때 콘솔상에서 debugging을 할 수 있다. 

• debugger 키워드를 코드에 끼워 넣는다 : breakpoint 역할을 한다 
• cont, c : 계속 진행 
• next, n : step next
• step, s : step in
• out,   o : step out
• pause  : 실행 멈춤 
• 상세명령들

> 디버깅 수행 : node debug <수행 자바스크립트 파일명>

hello을 찍고 debugger가 있는 곳에서 멈추면 next step으로 이동하면 console 객체로 가고 cont하면 수행을 다시 하여 world 문자가 찍힌다. 수행되는 process를 command line에서 추적해 보고자 할 경우 사용하면 좋겠다. 

Node.js 주말강좌 요약하기 

> 참조 : 라이언 일병(Ryan Dahl) 의 발표와 PPT자료 : Node.js 에 대한 문화적, 구조적 차이를 이해하자!

> 참조 : Node.js API 사용 (예제 포함)

• 현재 System(I/O) : L2 Cache <-> Memory <-> Disk  대비 Network I/O = compiler 서비스
• Web System : a = b() 식의 assign 즉 sync를 사용하지 않는다. b(a) {} 를 사용하자 (async 방식)
• b(a) {} 구문에서 Node.js는 a = call back 객체이다 = anonymous object = closure object = 스트림에서 이해됨 
• stream = functional의 목적은 네트워크에 있는 모듈을 Merge하여 사용하는 것이다 = social web service 세대 
• Node.js는 모듈 기반이고 모듈을 위한 스펙 CommandJS와 AMD를 이해하자 
• Node.js의 수많은 Modules in GitHub
• Node.js에 대한 기본적이 이해

이복영 강사님의 Node.js 와 MongoDB 주말강좌부분을 들으며 요약하기 

• 가입 : 페이스북 프론티어 그룹

• 에크마스크립트 : ECMAScript 6 로 가고 있다. 
• 표준언어 : 자바스크립트 통일 = Presentation (Backbone.js or 앵귤러) + Application Tier(Node.js + Express.js) + Database(MongoDB + mongoos.js)
  
  
  
• 자바스크립트를 크롬에서 간단히 테스트 해보기 : 크롬에서 F12에서 console 선택하여 자바스크립트 코드 넣고 Enter
• 각 Tier별 MVC Fraemwork = Presentation (BackBone.js) + Appllcation(Express.js) + MongoDB(Mongoos.js)
• MongoDB 와 함께 Redis를 사용 : 이때는 mongoose를 사용한다 
• 윈도우에서 Node.js 개발시 : Microsoft제공 webmatrix tool로 개발 - MVC 코딩이 쉽다  

▶ Web 역사

• Polling Service (Request + Response) = internet polling (ajax : client side), long polling (web api : server side)
  content delivery service (webserver 기술) = document base operation  -> Compile 기술
• 제 1세 web : static web - IBM Host 기술 
• 제 2세 web : dynamic web - C/S PC 기술
• bi-direction Service (websocket) = data (json) delivery service = stream task operation( = functional operation) 
  -> Service 기술 (공식 전용 언어 : JavaScript -> ECMAScript 6)
• 제 3세 web : social network web service - Smart Device 기술 (Virtual Host)

• Task Base Operation = workflow (사람 + 정보 + 프로세스) -> Activity 단위 (스마트폰을 통해 구현되고 있다)
• 객체 {key, value} 에서 key = property 이고 { {k,v}, {k,v} } 에서 {k,v} 를 attribute라고 한다. 이를 가지고 functional 프로그램을 한다 
• Presentation 자바스크립트의 코딩 이동방향
• getElementByID : javascript 직접 핸들링
• jQuery : MVVM의 Knockout.js 사용, 물리적 뷰 사용
• Undersocre.js (4kbytes) : functional 코딩, 논리적 뷰 사용, {k,v} 같은 그룹객체를 다룬다 (ORM) 
• BackBone.js : 논리적 뷰 사용 (모바일 통해 다운로드 받는 세상)
• Ria -> WebApp -> Smart UI (?)
• Node.js와 MongoDB의 조상은 Underscore.js 이다
• Functional Operation = Execution 밖에 없다. 크기는 4 Kbytes 이다. 
• 1,2 세대의 기술과 3 세대 기술을 mix 하지 말고, 비교하지 말라

prototype.js는 AJAX(Asynchronous JavaScript and XML)에서 거의 표준 라이브러리 처럼 사용하는 라이브러리이다. 사용법을 알아보자. 하기 코드는 prototype.js를 사용했을 때 JavaScript 클래스를 만들고 객체화 하는 과정을 보여준다 

var Employee = Class.create();   // Class를 이용하여 클래스 생성 

Employee.prototype = {
  initialize : function( name ){ // prototype.js 사용시 생성자는 initialize로 정의 
    this.name = name
  }
};

var Dev = Class.create();

Dev.prototype = Object.extend(  // Class 상속 extend 이용
    new Employee,               // 상속받을 Class 선언 
    {
      showMember : function() {
        var list = new Array( '홍길동', '고길동', '김길동' );
        document.writeln(
          '<div id="표시영역">' +
             this.name + '★사원 명단：' + list +
          '</div>'
        );
      }  
    }
);

var dev = new Dev( '개발부' );
dev.showMember();

<참조>

  - 공식 사이트 :  http://prototypejs.org (버전 1.7.1)

  - 클래스 생성, 상속, Ajax 통신, JSON(JavaScript Object Notation) 사용 튜토리얼 :  http://prototypejs.org/learn/

  - prototype.js 정의 보기 :  https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js 

  - ExtJS를 하기 전 참조지만 JavaScript 하기전 기본지식과 Aptana+Spket 개발환경 설정하기 : http://techbug.tistory.com/1

  - 애니메이션과 Drag에 좋은 라이브러리 :  http://madrobby.github.com/scriptaculous

Node.js를 위한 Web Framework으로 Express 를 사용한다. GitHub에도 상당한 순위에 올라와 있고, rail 방식과 유사하다. Connect 모듈을 기반으로 템플릿은 EJS와 Jade를 기반으로 하고 있다. 

▶ Express 설치하기  (http://expressjs.com/guide.html)

• npm (Node Package Manager)을 이용하여 설치해 보자 (-g 옵션은 nodejs 설치 전체에 적용된다. -g 옵션을 안 주면 설치 디렉토리내애서만 영향을 미친다)
  
  설치가 완료되면 nodejs가 global 참조영역인 Application Data/npm/node_modules/express 라고 설치가 된다
  
  
  
• express 명령으로 HelloExpress라고 만들어 보자. 그러면 기본적인 Web Application 골격이 생긴다. (WAS의 Context war 파일 생성되는 것으로 비유하면 되겠다. 예로
  > routes/*.js 파일은 web.xml의 url-mapping 설정과 유사하다
  > views/*.js 는 템플릿 엔진의 파일들이 위치한다 (ejs 또는 jade를 사용한다. ejs는 JSP 코딩과 유사하여 친숙하고, jade는 간결함이 좋다)
  > public/* 퍼블리싱 하는 static 파일들
  > app.js Express의 main 파일이다
  
  
  
• HelloExpress 디렉토리로 이동하여 express가 의존관계에 있는 외부 modules를 설치한다
  
  
  

• 설치가 완료된 후 node app 로 Express 프레임워크를 수행한다 (http server listening 이 포함되어 있음)

  
  
  
• app.js 코드를 보자 
  
  > 외부모듈 express를 얻어와서 app변수에 정적 서버환경을 셋팅하고 있다.(default jade 템플릿 셋팅)
  > URL의 호출에 대한 맵핑을 담당하는 rounting 설정을 한다 
  > 맨 마지막줄에 http server 를 시작한다 
  
  
• http://localhost:3000/dowon 이라는 url 셋팅을 해본다. 우선 app.js 에 routing 정보를 넣는다
  
  

• HelloExpress/routes/user.js 안에 exports.dowon 을 추가한다 

  
  
  

• HelloExpress/app.js 서버를 재시작 하고, 브라우져에서 호출한다.  

• routing하기 위하여 user.js에 하드 코딩된 html 코드를 jade 템플릿으로 서비스하는 방법을 알아보자. 우선 views 디렉토리에 dowon.jade 파일을 만든다 (jade는 템플릿 엔진이다)

  
  
  

• dowon.jade 템플릿 코딩을 한다 (자세한 사항은 http://jade-lang.com 사이트를 참조하자)

• routes/index.js 안에 정보를 넣으면 app.js 안에서 routes.dowon으로 호출을 할 수 있다

  
  

• routes/index.js 파일안에 설정한 index, dowon은 app.js 에서 routes.index 와 routes.dowon 으로 호출한다 

  

• 재시작하고 브라우져에서 http://localhost:3000/dowon2 로 호출하면 jade 내역이 html로 변환되어 서비스 된다

  
  
  
  
  
  
  간단하게 Express Framework을 Node.js에 얻져서 사용하는 방법을 보았다. 사용하며 느낀것은 서비스를 위한 앞단의 url-mapping과 유사한 route 개념은 새롭게 개발할 필요없이 적용할 수 있어서 좋다. 그러나 domain 모델쪽의 개발과 persistence 영역의 개발에 대한 부분이 Express에 있는지 없다면 어떤 외부 module을 통하여 Express와 통합을 해야하는지  찾아 보아야 겠다. 
  
  
  * jade 설치 및 사용법 : http://blog.doortts.com/223
  
  

CoffeeScript는 Javascript 코드를 단축시키고 가독성을 높이며 {}와 ; 가 있는 코드로 부터 해방시켜준다. 실제 CoffeeScript 코드를 보았을 때 마치 영어 산문을 보는듯 했다. 만일 마틴파울러 아저씨가 이야기하는 Clean Code Style을 지향한다면 정말 영어 산문을 쓰는듯 코딩을 하면 된다. 

1) CoffeeScript 코드 짜고 JavaScript와 비교하기 

  - http://coffeescript.org/#top 로 들어가서 "TRY COFFESCRIPT" 상단 메뉴를 선택한다. 브라우저에서 coffeescript 코드를 치면 바로 javascript코드로 확인할 수 있다.

  - 그렇다면 이런 coffeescript 코드를 어떻게 배울 수 있을까? 구글에서 "smooth coffeescript"를 검색하고 interactive... 을 선택한다

Node.js 를 배우기 위해서 Sublime Text 를 설치하고 Node를 설치하는 과정을 보자 

▶ Sublime Text에 Node 연동하기 

• sublimet text를 설치하고 install package control을 설치했다면 ctrl+shift+p를 누르고 "install package" 입력후 Enter
• 다음에 node라고 입력을 하면 node관련 패키지 3개가 나온다 각각 설치한다
  
  

•  Node.js 엔진 설치를 위하여 http://nodejs.org/ 사이트 중앙에 있는 [Install]을 클릭하면 설치본이 다운로드 된다. 안내에 따라 설치를 하게되면 System Path에 자동으로 <NODE_HOME>/bin 디렉토리가 잡힌다
  기타 공식 설치 사이트 : https://github.com/joyent/node/wiki/Installation

• node 문법으로 간단하게 java의 System.out.println과 같은 console.log를 타입핑후 hi.js 명칭으로 저장하고, ctrl + B 키를 누르면 Automatic Build가 된다. Tools -> Build System -> Automatic 이 체크되어 있다면 Syntax를 자동인지하여 Nodejs로 빌드하여 결과를 출력한다
  

TextMate만큼 막강한 Sublime Text를 통한 Node.js 개발 환경 구축이 완료되었다. 

* 참조 : Sumlime Text 2 설치 및 환경설정

▶ Nodejs 기본 파악하기 

> Nodejs 의 기본 명령 앞에 dot 를 붙인다. 

> 읽어 볼 만한 블로깅 글을 Link만 열거 한다. 

• Nodejs 처음 시작하는 사람들이 읽을 내용

     Beginner Book : ManuelKiessling-NodeBeginnerBook.zip

• Nodejs가 햇갈리는 개발자가 읽어야 할 글
• Nodejs API 한글화
• Nodejs TDD Framework
• Nodejs를 편리하게 코딩할 수 있게 해주는 CoffeScript
• Nodejs + MongoDB 함께 사용하기