Mobile Convergence

이복영 강사님의 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 하지 말고, 비교하지 말라

Sublime Text 2를 설치하고 한글 문서를 열어 보면 깨져 나온다. 우선 인코딩이 안맞는 것인데 그럴경우 플러그 하나 설치하자. 

• 우선 Install Package 설치하자 
• 제공하는 플러그인 : EncodingHelper
• Install Package (ctrl+shift+p)에서 EncodingHelper 나오면 설치를 한다 
• 설치후 sublime text에서 
• edit menu 선택
• 맨 하단 convert to UTF-8 from Encoding 선택
• 맨 위 Complete List Sorted 선택
• 위에서 7번째 EUC KR 선택

운영중에 Free Memory size가 부족하다고 하여 top 명령어로 살펴보았다. 

  - Mem: 60,012 free 로 나온 것을 보아 헉 현재 60Mbytes 밖에 여유가 없다니! 과연 그럴까?

  - Linux의 경우 real free = free + cached of Swap 로 봐야 한다. 

<참고>

  - 리눅스 메모리 관리

Gist를 GitHub이 운영하는 코드 Snippet을 관리할 수 있는 서비스이다. 이와 비슷하게 jsFiddle.net 에서도 html/css/javascript를 저장하고 테스트까지 해볼 수 있다. 

• gist를 sublime text에 연동 설정 하기 : ctrl + shift + p -> gist -> description 입력 -> 파일명 입력
• sublime text 사용 동영상 : 다른 사람의 코드 조각을 Fork하여 My Gist에서 볼 수 있고 Sublime Text로 열어 볼 수 있다
• jsfiddle 에서 볼 수 있는 소스를 gist에 저장하기 (gist 소스 -> jsfiddle 보기)

예전 한 서버안에서 대량으로 들어오는 데이터처리를 위하여 Multi-Thread 기반 Queuing을 통하여 막힘없는 서비스를 구현했었다. 하지만 점점더 많은 데이터가 들어올 경우 Scale out을 하려면 결국 어떻게 해야 할까? 서로 다른 Stack에 있는 것들 예로 웹서버와 데이터베이스 사이, 또는 WAS와 데이터베이스사이에 Queue를 두고 사용하면 어떨까 생각해 볼 수 있다. 

• A<->B 사이에 데이터량은 많으나 느린 성능이 예상될 경우
• A는 계속 막힘없이 다음 C를 호출해야 할 경우
• 정기적인 통계정보 생성 및 레포트 생성 배치 Job도 괜찮을 듯 하다. 

GearMan은 Queue를 하여 요청을 처리하는 Job Server이다. Scale Out을 고려하여 여러대의 서버를 운영하여 Job을 수행해야 한다면 좋은 대안으로 보인다. 

• GearMan 1분내에 이해하기
• Tumblr 아키텍쳐안의 GearMan
• GearMan 구성 예
• Node.js에서 사용하기

> 파란색의 Client와 Worker만 API를 사용하여 간단히 작성하면 된다. 다양한 언어에 대하여 지원한다

> Client 코드 : 함수를 문자 리터럴로 전송

> Worker 코드 : 함수를 문자 리터럴로 전송 

> 호출 흐름도 

> 구성 예시 : High Availibility와 Fault Tolerance의 분산 환경의 구성이 가능하다

Polyglot 에 기반한 서비스를 만들다 보면 아키텍쳐링을 위하여 Queue 시스템이 필요할 경우가 있다. Message Queue를 위하여 Open Source로 제공되는 구현체들이 존재하기도 한다. 각각에 대한 궁금증을 풀어보자

• AMQP 무엇인가 : 메세지 통신을 위한 규약 스펙 (참조)
• 구현체는 무엇들이 있는가 : Rabbit MQ, Apache Qpid, etc
• 어느 때 사용하는가 : 서로 다른 시스템이나 서비스를 업무적으로 엮으고 싶을 경우 (참조)
• Spring Framework와 잘 어울리는 것은 : Rabbit MQ - spring AMQP 에 포함됨 (참조)

AMPSetup에서 install wizard로 설치후에 MySQL을 사용해 본다. apmsetup으로 설치를 하면 mysql console을 수행할 수 있고, 여기서 부터 mysql 명령을 통해 테이블을 만들어 보자

• 테이터베이스 로그인 : mysql -u <id> -p <password> (만일 root 패스워드 잃어버렸을 경우 재설정 방법, APMSetup으로 설치하면 root default 암호 : apmsetup)
• 테스트 데이터베이스 생성 : create database <database명>;   (참조)
• 생성 내역 보기 : show databases;  (참조)
• 데이터 베이스 사용하기 : use <database명>;
• 테이블 보기 : show tables;  

Apache, PHP, MySQL을 가장 편하게 설치할 수 있는 방법을 제공하는 사이트 소개

  - APM 일반사항을 설치 : start, stop UI 제공

  - HongPD : 문서파일 검색 사이트 구축

  - WowIP : wifi 환경의 유동아피를 고정아이피화하여 내 PC를 서버로 만들 수 있게 해줌 

Eclipse Editor의 색상에 대하여 원하는 스타일로 변경하고 싶다면 직접하거나 또는 Plugin을 설치하여 손쉽게 변경을 할 수 있다. 

• 테마 파일을 직접받아서 설정한다
• 테마 플러그인을 바로 설치하여 선택한다 (가장 쉬움)

서버단에서 페이지별로 사용하는 템플릿 엔진들(FreeMaker, Velocity) 같은것이 있다면 클라이언트 화면단에서 AJAX를 통하여 받는 데이터를 통해 화면을 변경시켜주는 템플릿 엔진도 있다. JQuery에 jquery template 엔진(소개)이 있지만, 다른 것도 검토해 볼 필요가 있겠다. 

  - 추천 javascript template engine 

    + Pure : loop 단점 존재 

    + TrimPath : google code project (강력 추천)

  - 더 극적으로 socketstream을 이용하여 HTML rendering 방법 : Node.js에서 구동되는 bi-direction 통신가능 (GitHub 설명) 

git에서의 commit은 오직 로컬 레파지토리와 관계가 있다. SVN이 자신의 로컬 PC에 있다고 생각하면 된다. 개발자 혼자서 마음대로 가지고 놀 수 있는 레파지토리인 셈이다. 

어디에서 수행할 수 있을까? (참조)

• workspace
• commit -a -m 'msg'  : "workspace" -> "local repository"
• index
• commit -m 'msg' : "index" -> "local repository"
• commit --amend :  "index" -> "local repository" (마지막 commit 수정하고 새로운 commit을 한다 )

commit이란?  (참조)

• workspace 또는 index(stage)의 소스를 local repository로 저장하면서 "새로운 commit object"가 생성된다. 
• 이때 HEAD와 현재 Branch가 가르키는 포인터는 "새로운 commit object" 주소로 바뀐다
• index의 포인터도 "새로운 commit object" 주소로 바뀐다 

JBoss의 deploy와 deployer 디렉토리의 차이는 무엇을까? 들여다 보면 xml과 서브 디렉토리가 존재한다. 

• deploy와 deployer 디렉토리  상세설명
• 참조 : JBoss 핵심 구성요소와 src 레벨 설치시 디렉토리 구조 이해
• 참조 : Apache + JBoss mod_jk 설정 상세 설명

▶ jsfiddle 코드 웹페이지에 넣기 

  - 공식 참조 문서

  - http://{url_of_the_fiddle}/embedded/[{tabs}/[{style}]]/  구성이고 iframe으로 넣는다 

  - 위 코드에서 nulpulum은 등록 계정, w9NJZ 은 페이지 그리고 맨뒤의 js,resources,html,css,result 구분자는 탭을 의미한다.

  - Result 탭 옆의 > 아이콘을 클릭하면 Result 탭으로 자동이동하면서 html 수행결과를 볼 수 있다. 

ExtJS를 사용하기 위한 최적의 환경을 구축해 보자. Aptana IDE와 Spket Javascript Editor Plugin을 설치해 본다

• Aptand IDE StandAlone 버전을 다운로드하여 Aptana_Studio_3_Setup_3.2.2.exe 파일을 수행한다  
• http://www.aptana.com/products/studio3/download
• 위저드 방식으로 설치하는 것이므로 설치위치를 잘 지정하고 Next 버튼 클릭후 최종 Install 버튼 클릭한다
• 설치위치에서 실행파일 AptanaStudio3.exe 을 수행하고 원하는 곳에 workspace를 지정한다 (Eclipse기반이므로 동일)
• Studio 상단 FullDown 메뉴에서 Help -> Install New Software... 선택
• Spket IDE 추가 : 상단 Work With: 항목에  http://www.agpad.com/update/  입력 (Spket IDE 선택하고 Next 설치완료)
• Window > Preferences > Spket > JavaScript Profiles > New... (ExtJS 라고 입력)
• ExtJS 선택 -> Add Library 에서 ExtJS 를 선택하고 OK 클릭
• ExtJS 라이브러리 선택 -> Add File 에서 라이브러리 선택
• GPL License 파일 다운로드 : http://www.sencha.com/products/extjs/download/ext-js-4.1.1/1683   
• 압축을 풀면 <install dir>/ext-4.1.1a/build/sdk.jsb3 파일을 선택 OK
• JavaScript를 만들어 보자

* 참조 사이트 : http://techbug.tistory.com/1

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

jboss source build를 위하여 ubuntu에 maven을 설치해 보자 

1) maven2 설치 하기

2) maven 설치 와 실행 파일 위치

설치하면 현재(2012.11)기준 Maven version 2.2.1 이다. 그러나 최신 버전은 3.0.4 이다 

  - 아파치 메이븐 사이트

  - wget http://apache.mirror.cdnetworks.com/maven/maven-3/3.0.4/binaries/apache-maven-3.0.4-bin.zip

  - 압축을 풀고 환경변수 : export M2_HOME=<install dir path> 그리고 export M2=$M2_HOME/bin

  - PATH 환경변수 : export PATH=$M2:$PATH

  - 버전확인 : mvn -version 

Virgo v3.5.0 RELEASE 버전의 springframework는 3.0.x 버전 번들이 패키징 되어있다. 3.1.x 버전으로 재패키징을 할 경우 대비하여 Springsource에서 번들링 해놓은 파일을 받아서 virgo_home/repositories/ext/ 밑으로 넣으면 될듯! 아직 미 테스트함 

  - 번들의 개념에 대해서 알자 (하단 요약 참조 사이트)

  - SpringSource에서 운영하는 Bundle Repository

  - Spring 방식으로 Bundle을 만들 수 있는 Spring Dynamic Modules

  - OSGi Bundle은 모듈화 단위이다. (unit of moduelarization)

  - Bundle 구성 = resources + mainfest file(META-INF/MANIFEST.MF파일에 의존성 jar, 번들 정보) + OSGI-OPT 디렉토리(부가적인 정보)  

  - manifest.mf : 20 가지 헤더 정보를 가짐

    + Export-Package : package + name, 외부노출됨

    + Import-Package : package + name, 사용할 것들

    + Bundle-SymbolicName : unique name

    + Bundle-Name : human-readable name

    + Bundle-Activator : BundleActivator를 상속받아 구현한 것으로 start/stop 관련

    + Bundle-Classpath : embeddied libraries 의 여러 폴더나 파일 classpath 지정

    + Bundle-ManifestVersion : 1 = OSGi release 3, 2 = OSGi release 4

▶ bnd 툴 사용하기 

  - http://www.aqute.biz/Bnd/Bnd  사이트에서 다운로드

  - 하기와 같이 수행하면 manifest 정보가 출력됨 

  - 또는 OSGify 로 manifest를 수정하여 준다 (detail)

번들 툴을 사용해 보자 

diff는 commits 된 것들 사이에서 차이를 보기위한 방법이다. (참조) 

어디에서 수행할 수 있는가?

• workspace 입장 (Working Directory)
• git diff : "workspace" <- "index"
• git diff HEAD or <another branch> : "workspace" <- "local repository"
• index 입장 (Stage)
• git diff : "workspace" <- "index"
• git diff --cached : "index" <- "local repository"
• local repository 입장
• git diff HEAD  or <another branch>  : "workspace" <- "local repository"
• git diff <commit 1> <commit 2> : "local repository" commit 1 -> commit 2
• git diff --cached : "index" <- "local repository" 

위 내용에 대한 정리를 보자. 

• 선화님 블로깅 : 예제를 기반한 상세 설명

Java란 무엇인가? 그 본질은 무엇인가라는 궁금증에 대하여 심도있고, 상세한 설명과 함께 쓰여진 블로깅이 있어서 링크한다. 엑셈의 WAS성능 관리 솔루션을 만드는 분이 아닐까 추측을 해본다. 

> [JVM Internal]Java Performance Fundamental 교재를 공유합니다.

  - JVM = Runtime Data Area + Execution Engine + ClassLoader + Garbage Collection + Native Code (JVM 위키피디아)

  - Runtime Data Area = Java Stack(Frame Data = Operand Stack + Local Variable) + Method Area + Method Area

    + istore : Operand Stack -> Local Variable

    + iload : Local Variable -> Operand Stack

  - ClassLoader = Bootstrap (rt.jar) + Extension (jdk/ext directory) + System ClassLoader (application)

  - ClassLoader Work = Loading -> Linking -> Initializing

  - Execution Engine : byte code를 interpreting 하여 수행

    + JIT (Just In Time) Compiler : 많이 수행되는 것 일부를 Native Code로 Compile 하여 수행

    + HotSpot Compiler = Client or Server Compiler

      + Profile을 이용하여  Native Code Compiler 코드를 결정

      + Native -> Interpet로 돌아갈 수도 있음

> JVM 과 JavaScript Engine의 차이

시장 조사를 통하여 모바일 서비스에서 주고자 하는 가치를 찾거나, 가치를 발견하는 것은 기획자가 초기단계에 수행해야 하는 일이다. 검색을 통하여 정적 데이터들을 획득하여 정리 할 수 있지만, 실제 답변을 원하는 항목에 대한 설문 조사(Survey) 또는 투표(Poll)를 쉽게 할 수 있다면  살아있는 데이터를 가지고 분석을 할 수 있으리라 본다. 역시 가치가 의미있으려면 시장(마켓)의 추측이 아닌 사실(팩트)가 중요하다. 사용해 볼만한 onDemand 서비스를 알아보자 

  - http://polldaddy.com  

    + Poll(투표) 사용 예

    + 상세 설명 블로그

  - https://ko.surveymonkey.com 

    + 서베이 몽키 설명

니츠마켓을 만들기 위한 시장 조사(Survey)나, 프로젝트 관리에서 의견 취합용 투표(Poll)등을 적극 사용해 보자. 역시 필요한 것은 서비스로 나오는 세상이다.