블로그 이미지
윤영식
Frontend Application Architecter, Full Stacker, KnowHow Dispenser and Bike Rider

Publication

Statistics Graph

Category

Recent Comment

오브젝트간의 이벤트 전달이 필요할 경우 loose coupling 을 유지하면서 커뮤니케이션이 가능토록 해주는 중재자 패턴에 대해 알아보자 



1) 중재자 패턴

  - 하나의 오브젝트 상태 변경시 다른 오브젝트가 해당 변경 정보를 알아야 할 경우

  - 별도의 중재자를 두어서 해당 중재자가 한 오브젝트의 변화에 대해 관심을 가지고 있는 오브젝트들한테 변경 정보를 전달한다

  

    + Mediator : Colleague 오브젝트와 통신할 수 있는 인터페이스를 정의한다 

    + ConcreteMediator : ConcreteColleagues 오브젝트들의 레퍼런스를 가지고 있다. 정보를 전달해 주는 역할을 수행

    + Colleague classes : Mediator 오브젝트의 레퍼런스를 가지고 있다가 다른 Colleague와 통신하길 원하면  Mediator를 통해서 통신을 한다 


  - 사용예

    + GUI Libraries : GUI 컴포넌트에서 하나가 선택되면 다른 것들이 enable/disable 되는 경우 

    + Chatting Application

       Chatroom : Mediator 로써 참석자들끼리 대화를 중재 인터페이스 정의

       ChatroomImpl : ConcreteMediator 한 참가자가 메세지 보내면 다른 참가들에게 메세지 전송하는 역할을 구현

       Participant : Colleague 참가자 인터페이스 정의

       HumanParticipant, Bot : ConcreteColleague 는 사람이 될 수도 bot이 될 수도 있다. Mediator 레퍼런스를 참조한다다



2) 구현상의 고려사항

  - Mediator 인터페이스정의는 Colleague 들이 여러개의 Mediator가 필요할 경우이다. 한개의 Mediator만 필요하다면 굳이 인터페이스 정의는 필요없다

  - Colleague의 상태가 변하면 정보를 Mediator에 전달하고 해당 정보에 관심이 있는 Colleague에 정보를 전달해 주는 Observer 패턴과 유사하다

  - 정보가 많을 경우 Asynch를 고려한다면 Message Queue 가 필요할 수 있다 

  - Colleague가 많아지면 Mediator 구현체가 복잡해 질 수 있다. 



3) Mediator.js 분석

  - 사이트 : https://github.com/ajacksified/Mediator.js

  - 중재자 패턴을 이용하여 WebSocket, AJAX call, DOM 이벤트를 쉽게 다루고 테스트 할 수 있도록 한다 

  - 채널(Channel)이 중재자가 되어서 Colleague들에게 관심 정보를 전파한다 

  - 설치하기 

$ npm install mediator-js

npm http GET https://registry.npmjs.org/mediator-js

npm http 200 https://registry.npmjs.org/mediator-js/-/mediator-js-0.9.2.tgz

mediator-js@0.9.2 node_modules/mediator-js


  - Node.js에서 사용하기 

////////////////////

// md_node.js 파일

var Mediator = require("mediator-js").Mediator,

    mediator = new Mediator();


mediator.subscribe("wat", function(){ console.log(arguments); });

mediator.publish("wat", 7, "hi dowon", { one: 1 }); 


////////////////////

// 결과 (wat이 채널) 

$ node md_node.js

{ '0': 7,

  '1': 'hi dowon',

  '2': { one: 1 },

  '3':

   { namespace: 'wat',

     _subscribers: [ [Object] ],

     _channels: [],

     _parent:

      { namespace: '',

        _subscribers: [],

        _channels: [Object],

        _parent: undefined,

        stopped: false },

     stopped: false } }


  - 브라우져에서 AMD로 사용하기 

     + require.js 와 mediator.js 파일은 md_browser.html 파일 위치에서 js/ 폴더 밑에 존재함

////////////////////

// md_browser.html

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Test</title>

</head>

<body>


<script src="js/require.js"></script>

<script>

        // base url을 반드시 주어야 한다 

requirejs.config({

   baseUrl: './js/'

});


        // 주의) mediator.js 에서 define을 Mediator 로 M을 대문자로 정의하였다 

require(['Mediator'], function(mediator) {

 mediator.subscribe("wat", function(){ console.log(arguments); });

 mediator.publish("wat", 7, "hi", { one: 1 });

});

</script>


</body>

</html>


   + subscribe/publish API

mediator.subscribe(channel, callback, <options>, <context>);

mediator.publish(channel, <data, data, ... >)

mediator.remove(channel, <identifier>)


   + on/bind 는 subscribe 의 alias 이고, trigger/emit 은 publish 의 alias, off 는 remove의 alias

   + Channel의 Namespace 로 : 를 사용한다 예) application:chat



<참조>

  - http://www.oodesign.com/mediator-pattern.html

  - 3실 청년 설명

  - 예제를 가지고 시퀀스 다이어그램을 통해서 설명

  - 다이어그램 보기 : UML 기초

  - 자바스크립트의 Mediator 패턴 설명

  - 자바스크립트 디자인패턴 - 설명

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

완벽한 자바스크립트 아키텍쳐는 어떻게 구성되는지를 NodeJS, Google Chrome Extention, MongoDB를 통하여 알아보자


1) 역할

  - NodeJS : 서버 측면, 실시간 연결을 장시간 유지하기 위하여 Socket.io 사용한다

  - Google Chrome Extention : 클라이언트 측면, WebSocket, Notification과 Local Storage가 사용된다

  - MongoDB : 데이터를 저장한다 



2) 아키텍쳐

  - 트윗을 추적하여 실시간으로 클라이언트에게 브로드케스팅 한다

  - 클라이언트 "What's Next"는 Google Chrom browser extension 이다 (크롬 애플리케이션)

  - HTML5의 기능을 사용한다 

  - MongoDB에 트윗 내역을 저장하고 이벤트가 끝나면 통계를 생성한다 

  


3) Node 아키텍쳐

  - V8 JavaScrpt engine 기반의 서버사이드 애플리케이션 개발을 위한 오픈소스 툴킷이다 

  - Node 기반 API는 CommonJS 모듈 시스템을 사용하여 확장한다

  - 2009년 2월 라이언 일병 (Ryan Dahl)이 만들었고, Python의 Twisted나 Ruby의 EventMachine과 유사하다 

  - Joyent에서 no.de Node.js 호스팅 준비하면 진행하고 있다


      



4) Node의 목적

  - 쉽고 안전한 방법으로 고성능이며 확장가능한 네트워크 프로그램을 JavaScript로 만드는 것이 목적이다 

  - 목적을 위하여 취한 아키텍쳐 

    + Single Threaded : Apache 처럼 각 요청마다 thread를 띄우지 않는다

       > 단일 스레드를 사용함으로 CPU context switching일 피할 수 있다

       > 메모리상에 대량의 실행 컨텍스트를(Execution Context) 두지 않아도 된다

    + Event Loop : Marc Lehman 씨가 libev 라이브러를 C++로 작성한 것을 이용함

       > 이벤트 루프는 확장가능한 이벤트 알림 메커니즘(scalable event notification)을 위하여 epool 또는 kqueue를 사용한다 

    + Noe blocking I/O : Marc lehmann 씨가 libeio 라이브러를 작성한 것을 이용함 

       > input 또는 output response에 대해서 (예로 database, file system, web service등) 기다리면서 CPU time losss를 피한다

    

  - 위 특징들로 인해 Node는 thread에 자유로우면서 대량의 트래픽을 처리할 수 있게 한다 

  - 대부분의 프로토콜에(TCP, DNS, HTTP) 대해서 이미 내장되어 지원한다

  - 모든 I/O 관련 function 수행은 callback을 사용해야 한다 

  - Event Driven 언어인 JavaScript는 Node의 'Event Loop' 방식 개발에 적합하고, 익명함수/클로져 같은 자바스크립강점을 이용

  - 참조 PDF

  - GitHub에서 가장 인기있는 OSS 목록

  - 설치는 사이트에서 다운로드 또는 http://nodejs.org/dist 목록 파일 버전을 선택에서 wget등 여러 방법으로 설치함 



5) Node 서버 만들기 

  - Node 단순 서버 만들기


  - Socket.io 단순 서버 만들기


  - http server에 socket.io 모듈을 붙여서 기능을 첨부하는 것이다. 

    + a = b  대입연산의 변환  b(a) funcational로 표현됨 (functional lanuage는 assignment 즉, 대입문이 필요없다

    + 대입문이 없으므로 대입변수를(variable) 메모리에 생성할 필요가 없이 function이 state를 안가진다. (참조)

  - http.createSever()에서 callback function을 제거했으므로 client 요청에 대한 처리를 하지 않고

     대신 이벤트가 발생하면 데이터를 바로 push 한다

  - socket.io에 callback을 넣으면 클라이언트 요청을 처리한다 

var socket = io.listen(server, function(client) { ... new client connection ... } );



6) 트위터 추적 모듈 만들기

  - Twitter Streaming API를 사용해서 "What's Next" 이벤트 틔윗을 받는다

  - API는 설정 메션에 대한 모든 트윗을 전달해 준다 

  - Twitter API 연결 -> 새로운 트윗 발견시 매번 이벤트 발생을 모듈로 만든다 


7) 트위터 추적하기 

  - Basic Authorization을 사용모듈


8) Twitter OAuth 설정하기 

  - 원문의 Basic Authorization을 사용하지 않고(2010.8.31 종료됨) OAuth를 사용한다

  - OAuth 모듈을 설치한다 

$ npm install oauth

npm http GET https://registry.npmjs.org/oauth

npm http 200 https://registry.npmjs.org/oauth

npm http GET https://registry.npmjs.org/oauth/-/oauth-0.9.8.tgz

npm http 200 https://registry.npmjs.org/oauth/-/oauth-0.9.8.tgz

oauth@0.9.8 node_modules\oauth

  - https://dev.twitter.com/ 에 로그인하여서 Consumer Key, Request Token, Access Token을 만든다

  - OAuth를 적용한 코드를 다시 만들어 보자 (실천과제)



<참조>

  - 원문 : A Full Javascript Architecture, Part One - NodeJS

  - Twitter OAuth 설명글

  - Node.js + Express로 Twitter 보기

  - Twitter OAuth with node-oauth for node.js+express


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

웹애플리케이션을 개발하기 위한 최신 기술셋을 알아보자. 모바일 컨버전스 솔루션 또는 서비스를 개발하기 위하여 방향전환을 시도중이다. 14년을 Java만 사용하다가 이제 다시 Reset 하는 기분으로 스터디중이랄까... 기본 언어가 자바스크립트이기 때문에 틈틈히 언어 공부도 필요하다. 하기 작성된 목록은 원문의 내용중 눈에 띄는 것을 임으로 정리한 것이다. 


1) Node.js 

  - 생태계가 잘 갖추어져 가고 있다 : modulesresources

  - 특징 : single-threaded, event-driven, asychronous I/O JavaScript Server Framework 

  - twitter list 팔로잉해서 최신 정보를 받자 

  - Logging, Error Handling, Bootup&Restart, Hosting 등의 해결책을 제시하고 있다 


2) JavaScript 

  - Node를 하려면 기본적으로 숙달해 있어야 한다 (JavaScript: The Definition Guide 추천 - 번역서 나왔음 6th)

  - DailyJS 통하여 최신 정보도 숙지한다 


3) CoffeeScript

  - .coffee 확장자로 코딩하여 .js로 컴파일 된다

  - 코드가 깔끔해 지고 유지보수성이 높아진다 

  - CoffeeScript의 스타일 가이드 참조 (참조2)

  - JavaScript를 CoffeeScript로 전환 툴

  - cake.coffee 툴 : CoffeeScript로 작성한 make 버전이다. CLI 방식 호출 (참조)


4) MongoDB

  - NoSQL : JSON방식 데이터 통신, 저장은 BSON(Binary JSON) 형태, JavaScript언어로 제어 

  - Replication Set 을 통한 High Availability 제공

  - Sharding을 통한 Scale-out을 제공

  - Aggregation Framework을 통하여 Big Data 제어 


5) Web Application 개발

  - Node에서는 Jade(Template Engine)사용, CSS는 stylus 사용함 

  - jQuery 기본 사용

  - UI MV* Framework으로 Backbone.js가 대세 - underscore.js를 기본사용함 -

  - Express : Node 에서 기본사용하는 MVC Framework - REST Web Services 개발함 - 


6) Testing 

  - Jasmine : BDD 

  - Vows : 비동기 BDD

  - QUnit : jQuery Javascript library


7) 통합 해주는 것들 

  - Express 개발할 때 : Express Wiki

  - CoffeeScript, Express, Jade, Stylus에 대한 boilerplate 코드 생성 : Cham

 

8) 추가적인 것들

  - socket.io : 실시간 구현

  - meteor : 실시간 서버 프레임워크 

  - 모바일 프레임워크 : PhoneGap


위의 내용들이 대충 눈에 들어오면 SKT의 CornerStone Framework을 내가 생각하는 모바일 컨버전스 솔루션이나 서비스에 접목 시켜 볼까 한다. 맨땅에 해딩하지 말고 이미 만들어진 것을 사용 목적에 맞게 수정하여 써보는 방향을 택한다. 실력이 된다면 기여자가 되보고 싶다. 



<참조>

  - 원문 : Getting Started With Node.js, Coffeescript, MongoDB, and More

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

SlideShare 링크 



저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

SlideShare 링크 



저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

모바일 컨버전스 서비스를 기획하면서 가장 헤메이는 부분이 대용량 데이터에 대한 신뢰성 있는 아키텍쳐를 구축하는 일이다. 이미 대형 포털과 모바일 서비스에서 많은 아키텍쳐 연구를 통하여 최적화를 했겠지만 이를 전수받거나 아니면 뼈대를 살표보는 일은 쉽지 않다. 그러나 AOSA(The Architecture of Open Source Applications) 라는 외국 사이트에서 이에 대한 단초를 제공하고 있고, 네이버 HelloWorld에서 일부 번역한 내용이 있어서 공부를 시작해 본다.


  - AOSA : http://www.aosabook.org/en/index.html

  - Naver 번역 :  http://helloworld.naver.com/helloworld/206816


스터디 모임에서 AOSA의 아키텍쳐 번역과 분석을 해보아야 겠다. TA(Technical Architecture) 설계능력 강화를 위하여 전체적인 조망아래 WAS 및 Open Source Solution 에 대한 접근을 Cloud에 구축/테스트해 보자. 



예전 Queue, NIO에 대한 간단한 개념 정립을 위해서 공부했던 Jenkov의 사이트를 다시 방문했다. Java API들에 대한 기본 개념정리가 잘 되어 있다.


  - http://tutorials.jenkov.com


저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

그동안 간간히 트윗되는 서비스 기업들의 아키텍쳐를 살펴보면서 향후 비슷한 서비스를 할 때 어떤 요소 기술들이 필요할까 생각해 보았다.


  - Netflix 온라인 VOD 서비스 Netflix의 AWS로 옮겨가기 까지의 아키텍쳐 변화 (Java 기반)

  - Evernote 자바 기반 아키텍쳐링 (Hibernate를 사용했다는 것이 흥미롭다, 참조)

  - Instagram SytleShare와 비슷한 구조인듯 하다 그리고 좀 더 세심한 아키텍쳐링  (Python 기반)

  - StyleShare AWS에서 어떤 서비스를 사용하는지 설명 (Python  기반)

  - Etc Search :  http://highscalability.com


향후 만들어갈 Mobile Service에 대해 Netflix 모델과 더불어 기업문화까지 본받을 필요가 있겠다. 자신의 성숙한 기술을 OSS로 공개하고 공유하는 정신을 높게 사고 싶다.




 모바일 컨버젼스 서비스를 만들기 위하여 어떤 단계를 거쳐가야 하는지 생각해 본다. 

  - Big Picture : 서버(미들웨어) 아키텍쳐를 서비스의 요구조건에 맞게 고려한다

  - Framework Picture : 어플리케이션 레벨의 구현에 필요한 Framework들을 고려한다 

  - Project Picture : 프로젝트를 어떻게 진행할 것인지 고려한다.


<Big Picture>
조대협님의 블로그에 소개된 대용량 시스템의 레퍼런스 아키텍쳐와 Netflix의 사례를 고려하여 각 단계의 필요 미들웨어와 배치등을 어떻게 할 것인지 생각해 보자

  - 클라우드 서비스 이용하기 : AWS Pacific zone 이용하기 (각 서비스에 대한 이해와 사용경험을 가져야 한다)

  - 미들웨어 선정 : 현재는 Virgo 위에 Tomcat + SpringDM 사용 예상 (OSGi Bundle 이용)

  - 메모리 캐싱 : Redis를 고려해 보고 있다. 역시 설치와 테스트가 필요하고 어느 부분에 쓰일지도 검토해야 한다)

  - 프레임워크 : 

    + 통신용 프레임워크는 Vert.x 를 Bundle로 올려서 NIO 처리 (apache 대체로 생각하지만 각 필요한 요구조건에 대한 테스트가 필요하다)

    + 도메인 업무처리용 프레임워크는 Spring Roo를 통해 빠르게 개발을 진행하고 싶다 


  - 데이터베이스 : RDBMS를 고려한다면 MySQL, NoSQL을 본다면 Cassandra와 MongoDB를 사용하려 한다. 

  - 상호 연결 : Apache Trift를 통하여 서로 틀린 부분에 대한 Communication을 해소하려 한다 (ESB와 비슷하게 이용 가능할까?)

  - 클라이언트 Push : Vert.x의 Socket.io를 이용한다

  - 모니터링 : Netflix의 오픈소스를 이용하거나 필요시 별도로 만든다

  - 개발, 테스트, 배포 : 운영서버와 유사한 AWS 클라우드 기반으로 가져가며 AMI(Amazone Machine Image)를 이용하여 만들고, 개발, 테스트, 배포 각각 별개의 인스턴스를 가져간다

    + 개발 : 운영과 동일 환경구성

    + 테스트 : JUnit 단위 테스트는 개발단계에서 수행하고, FitNeese 통하여 인수테스트 수행등 종합적인 테스트 방안을 마련한다


<Framework Picture>
모바일 컨버전스 서비스 성격에 맞는 프레임워크를 선택하는 것이 관건으로 보인다

  - UI Layer : 하이브리드 웹앱으로 가고, 성능향상이 필요한 부분이 있다면 고객 확보시점에 따라 네이티브로 간다. Rapid Development를 위하여 선택

  - UI Framework : Sencha Touch, JQuery Mobile, PhoneGap등을 사용, PC 버전은 Sencha의 ExtJS를 사용한다. Unit Test와 개발환경때문에 GWT를 고려해 보았으나, 기초장벽을 어느 정도 해소하면 ExtJS로 하는 것이 좋겠다는 판단임 (요즘 열심히 JavaScript 파고 있다)

  - Server Framework : Vert.x, Spring, Spring roo 등을 사용할 예정

  - Test Framework : JUnit, FitNeese

  - Deploy : Maven 또는 Gradle 고려중, Jenkins + HuBot (GTalk 통하여 deploy 명령) 사용

  - Open API 지향 설계 : Restful 서비스 



<Project Picture>
프로젝트는 Agile의 Scrum 방식으로 진행을 하면 이를 위하여 다음과 같은 협업도구를 사용한다

  

- Issue, Wiki 는 Atlassian의 Jira와 Confluence를 SaaS로 이용

  - Scrum 방식 개발위해 Atlassian GreenHopper 이용

  - 소스서버는 DVC로 GitHub private 신청하여 이용

  - 오프라인 정기 모임

  - 온라인 협업 도구 최대하 활용 : Atlassian 제품, Podio, CaCao Agit, GMail 등


그 동안 살펴본 기능들을 잘 엮어서 프로토타입 모바일 컨버전스 서비스를 내년 초까지 만들어 볼 계획이다.



저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
prev 1 next

티스토리 툴바