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

Publication

Category

Recent Post

'reactive programming'에 해당되는 글 3

  1. 2016.11.23 [PlayNode 2016] 컨퍼런스 - RxJS
  2. 2015.09.01 [Meteor SmartLink] 미티어 OJT
  3. 2015.07.14 [Reactive] Reactive Programming 배우는 방법2
2016. 11. 23. 14:23 Angular/Concept

오늘은 오후 일정을 비우고 PlayNode 컨퍼런스를 참석했다. 첫 시간은 늘 사용해 보아도 익숙해 지지 않는 RxJS시간이다. 



- Promise vs Observable 차이점

  + Observable에서 multi value처리 가능. stream이니깐 당연하다. 

  + lazy 기능으로 subscribe 했을 때 수행한다 

  + unsubscribe를 통해 cancelable할 수 있다. 

  + completion 콜백


- Operator

  + 200개 가량의 오퍼레이터 현재 v5.0.0-rc.4

  + create, fromEvent, mergeMap (flatMap)

    > mergeMap: 여러 observable을 하나의 observable로 만드는 오퍼레이터 

  + filtering 

    > takeUtil : 특정 Observable이 발생하면 observable생성을 멈춘다 p61

  + composition

    > combileLatest p63: 다른 observable의 마지막 값들을 합쳐서 obserbale을 만들어 준다 

    > zip : 각 observable에서 발생한 순번의 것들을 서로 묶어준다

  + error

    > retry: error 발생하면 2두번 더 실행한다 

    > retryWhen: 재시작 시점을 지정 가능하다  p72


- 비동기 코드 조합하기 p77

  + Drag & Drop

    > mousedown, mousemove, mouseup이벤트의 조합 p80: mousedown+ mousemove를 flatmap으로 조합하고 takeUtill에서 mouseup이 발생하면 대상 dom을 이동

  + Cache + DB

    > merge를 통해 가장 먼저온것을 take(1)으로 선택한다 

  + AWS Lambda p90

    > bindNodeCallback을 사용하면 node스타일 콜백을 observable로 변환가능하고 이를 다른 observable과 합친다

  + On / offline 브라우져에서 

    > retry 로 에러 발생시 재 시작토록 구현 p108

    > websocket에서 retryWhen으로 on / offline을 체크할 수 있다. 


- 장단점 p113



참조 

  - http://www.slideshare.net/kyungyeolkim39/compose-async-with-rxjs-69421413 













posted by 윤영식
2015. 9. 1. 17:01 Meteor

페북 미티어 스쿨의 박승현님이 스마트링크 멤버를 위해 미티어 중급강좌를 시작했다. 첫회에는 Reactivity, 선언적 프로그래밍, Meteor Way, 발행/구독 (Pub/Sub), DDP, Template/Blaze 등에 대한 기초적인 부분을  집고 넘어갔다.  






한번 훑기


- 패키지 설치하면 .meteor안에 심볼릭 링크 (npm -g 의 폴더에 실제 설치됨)

- Live Hot Push(Reload) : CSS는 hot push 이지만 소스 변경은 hot reloading으로 두가지 다 일어난다

- Pub/Sub, Method Call : WebSocket 이 기반이다. 파일 업로드(Method Call 사용)

- WebApp 기본 패키지를 이용해서 RESTful 가능

- 서버 클라이언트간 싱크에 대한 이벤트 체크 API가 존재한다. 예) ready()

- 미니몽고 - 클라이언트 자바스크립트로 구현

- 퓨전페신져 : https://www.phusionpassenger.com/ 웹서버를 사용 stick session 으로 scale out 가능하게 해 줌 

- 로보몽고 또는 몽고쉐프를 사용해라

- 폴더

  + lib > client, server, private, public 즉, lib가 가장 먼저 로드된다. 

  + private은 Assets API를 통해 : 미리 fixture로 데이터를 등록할 때 사용한다. 

  + packages폴더 : 공통 컴포넌트들





Reactivity 


엑셀의 예를 생각 하면된다. 위키의 Reactive Programming을 봐도 엑셀에 대한 예로 설명되어 있다. 엑셀에서 데이터를 넣은 셀을 미티어에서는 Reactive Data Source라고 하고 엑셀의 더하기 sum(c1, c2)를 적용한 셀을 Reactive Computation이라 한다. 

  - Reactive Computation : 쉘의 펑션 sum(c1, c2)

  - Reactive Data Source : 쉘의 밸류  c1, c2

이것을 도형으로 그리면 다음과 같이 Reactive Data Source를 Reactive Computation이 감싸서 감시를하고 변경 발생시 변경을 알리게 된다. 변경은 또한 변경을 감지하는 Reactive Computation으로 전파(Transition)되어 변경을 반영한다. 예로 하위의 Reactive Data Source를 하위 Reactive Computation에서 감지하고 다시 Template에서 변경을 감지하고 DOM을 변경한다. 




미티어에서 이야기하는 Reactive Data Source와 Reactive Computation에 대한 대표적인 예를 보면 Reactive Data Source는 Reactive Computation에 감쌓여 있어야 반응을 한다는 것이다. 

Tracker.autorun(function () { Meteor.subscribe("messages", Session.get("currentRoomId")); 

});


미티어에서의 Reactive Data Source/Computation의 종류 


- Reactive Computation

  + Templates

  + Tracker.autorun

  + Blaze.render, Blaze.renderWithData


- Reactive Data Source 

  + Session variables

  + Database queries on Collections

  + Meteor.status

  + ready() method on a subscription handle

  + Meteor.user

  + Meteor.userId

  + Meteor.loggingIn


- mini-mongo (data source) <-> template.helpers list (list도 computation 이고) -> blaze의 {{#each list}} (list의 computation이 전이되어 each computation으로 와서 변경이 이루어진다)

- 필요악 : session, mini-mongo cursor, pub/sub의 ready() 는 전부 computation이 이루어 진다.

- 데이터 소스를 직접 만들기는 ReactiveVar 를 사용한다. Computation은 Tracker.autorun으로 구현 





템플릿


미티어에서 Blaze는 기본 템플릿 엔진이지만 템플릿이 모두 컴포넌트로 바뀐다. 단순 템플릿 스트링 이기 보다. React처럼 템플릿이 인스턴스로 변환이 되고 OnCreated, OnDestroyed, OnRendered가 인스턴스별로 호출이된다. 그러나 Template.<templateName>.helpers / events / rendered : 안에서 this는 Template 이므로 주의를 한다. 


  - Blaze : 서버의 데이터 변경에 따른 화면의 변경을 보여주기 

  - {{> }} 의 > 은 인스턴스를 만드는 것이다. 

  - 템플릿 레벨에서 라우팅을 하는 것으로 패턴이 바뀜 

  - Computation의 전이(Transition)를 통해 다이나믹하게 화면을 변경할 수 있다. 





참조 


Meteor의 Reactive의 해부


중급반 샘플 사이트 공개 
http://wagglechat.meteor.com/

ㄱ. 미티어 스쿨
http://meteorschool.com

ㄴ. 오픈튜토리얼 
https://opentutorials.org/course/1591

ㄷ. digveloper 블로그
[1강] 미티어 소개 
http://digveloper.ppillip.com/?p=482

[2강] 미티어폴더구조,템플릿
http://digveloper.ppillip.com/?p=486

[3강] 템플릿리뷰, 콜렉션
http://digveloper.ppillip.com/?p=495

[4강] publish(발행)/subscribe(구독) , 비개발자의 미티어 서비스개발기
http://digveloper.ppillip.com/?p=499

[5강] Router(라우터)
http://digveloper.ppillip.com/?p=502

[6강] Accounts(로그인 및 계정)
http://digveloper.ppillip.com/?p=507


posted by 윤영식
2015. 7. 14. 22:54 Angular/Concept

Meteor는 Modern Application Platform이기도 하면서 Reactive Manifesto에서 이야기하는 User Responsive를 위한 Resilient와 Scalable을 갖추고 있다. 그래서 Meteor를 Realtime Modern Application을 위한 Reactive Platform이라 이야기를 해도 좋을 것 같다. 하지만 정작 Reactive라고 이야기를 해놓고 Reactive의 개념이 와닿지 않는 것은 거시적, 미시적 이해가 없기 때문이다. 최근에 각광 받고 있는 AngularJS는 Reactive Templating을 지원한다. Reactive라 붙일 수 있는 이유는 Reactive Programming에 대해 위키에서 찾아보면 액셀 예를 통해 어떤것을 의미하는지 이해를 할 수 있다. 다수의 b가 a를 의존할 때 a의 변화에 b가 종속이 되고, 옵저버 패턴(Observer Pattern)으로 보면 다수의 의존하는 Observer(소비자)가 데이터를 제공하는 Observerable(생산자)에 의존하는 것으로 a에 상태변경(이벤트 발생)에 대해 b에도 상태값을 알려주는 구조이다. Reactive Programming(RP)의 관건은 Asynchronous Data Flow관점에서 프로래밍을 하고 Functional Reactive Programming으로 오면 filter, map, reduce와 같은 블럭을 통해 Reactive Programming을 한다. 



리액티브 프로그래밍(RP)은 비동기와 이벤트 기반의 데이터 스트리밍(Asynchronous and Event-based Data Streaming)을 Observable Sequences로 변환해 개발하는 프로그래밍 방식이다.







Reactive 거시적, 미시적 이해


  Reactive Manifesto 의 내용을 이해할 필요가 있다. 왜 Reactive 해야 하는지 이유는 본 글에 잘 설명되어 있다. 현재는 인터넷 보급과 모바일 기기의 보급으로 365일 24시간 무정지의 끊김없는 빠른 서비스를 제공해야 한다. 이를 위해서는 장애(Failure)에 빨리 복구(Resilient)되고, 서비스의 수평적 확장이(Scalable) 용이해야 하며, Resilient와 Scalable 바탕에는 느슨한 결합(loose coupling)의 메세지 기반(Message Driven) 아키텍처가 기반이 되어야 한다. 


  - Responsive를 위한 Resilient와 Scalable 및 Message Driven에 대한 이야기

  - NDC에서 김종욱님이 발표한 RX와 Functional Reactive Programming 이야기 (원문)

    + 엔시소프트 리니지 서버의 Rx 적용 경험 공유

    + 2009년 MS 에서 Reactive eXtension 소개

    + 2011년 RxJS, 2012년 RxJava등이 나오고 현재는 RxSwift도 존재함 

    

   

  - 2013년 Infoq에 발표한 Reactive programming의 동향

    + 코세라에서 Scala 기반 오픈 강의 개설(Scala 창시자와 Rx 개발자가 직접 강의함) : Principles of Reactive Programming

    + Netflix에서는 RxJava 기반으로 광범위하게 개발을 하고 있다. 

    + Facebook은 ReactJS를 오픈소스화하고 페이스북 웹과 인스타그램 웹에 사용하고 있다.

    + Javascript 기반의 Bacon.js, Kefir.jsRxJS, Reactive.js 라이브러리를 타 프레임워크와 접목해서 사용할 수도 있다. 

  - Microsoft에서 이야기하는 Reactive eXtension 정의

  - 다양한 언어의 구현체는 ReactiveX(http://reactivex.io)에서 볼 수 있다.

  - 확장가능하고 병행처리 가능한 웹 아키텍쳐 구축하기


  - Observable에 대한 이해

    + 2분만에 이해하는 Observable : Rx is the underscore.js for events

    + FRP 연산자들에 대한 Sync와 Async에 대해 시뮬레이션 예제를 통해 보여준다. (슬라이드DevNation)

    + ReactiveX.io의 설명

       Observer는 Observable에 subscribe하고 onNext, onError, onCompleted를 Observer에 구현하면 이를 Observable이 호출

       onNext에는 emit 한다고 말하고, onError, onCompleted는 notification한다고 말함.

    + MS의 Reactive eXtension의 워크샵 (동영상)


  - Observable에 대한 기본 개념 

    

  

  - ReaciveX를 위한 Operators 종류

    + 언어별로 동일 연산자를 가진다. 

    + Create Observable, Transform Observable, Filtering Observable, Combining Observable, Error Handling, Utility, Conditional & Boolean ...

    + Operator사용을 위해서 Decision Tree의 내용을 숙지해 보자. 





Reactive Programming for JavaScript


  먼저 RxJS를 이용한 Reactive Programming에 대한 이해를 선행한 후에 FRP(Functional Reactive Programming)에 대한 이해를 위해 learnrx의 FRP 개념 이해를 위한 실습을 전부 따라해 본다. 


  - Javascript의 Sync처리와 Asynch 처리에 대한 이해를 뭔저 해본다. 동영사의 21분에서 forEach가 Sync, Async 처리 되는 과정을 이해.

   + Event-Loop 와 Call Stack, Task Queue 관계 시뮬레이션 (21분경에 나옴)

    


  - 예제들이 ES6 기준으로 되어 있는 경우가 많아 ES6 문법을 공부하자

    + Depth in ES6 이해 요약정리

  - Functional Reactive Programming (FRP) 에 대한 개념을 이해하자. 

    + Functional Programming 과 Reactive Programming의 결합 === Functional + Async Data Stream (Data Flow) 

    



  - Frontend Developer 입장에서 본 RxJS에 대한 기본 개념 이해 

    + Array에서 제공하는 map, filter, reduce는 할 때마다 다시 배열을 할당한다.(learnrx를 따라해보고 이해하자) 따라서 GC에 대한 이슈존재

    + RxJS의 Observable을 사용할 경우 배열 재할당이 없으므로 GC에 대한 이슈도 없다. 

    


  - RxJS의 깃헙 Readme를 읽자

  - RxJS 학습하기 

    + egghead.io의 RxJS 강좌와 Asynchronous 강좌를 본다.

    + RxMarbles : Rx를 다이어그램으로 보여주어서 시각적 이해를 돕는다

    + RxJSKoans 학습

    + RxJS GitBook 책을 읽자 (그외 RxJS 레퍼런스)


  - RxJS를 이용한 FRP API 소개 : 맨뒤의 참조 목록을 방문하자 

    


  - ng-conf 2015에서 Nexflix UI 개발자가 발표하는 Obserable을 보자 (슬라이드

    + RxJS 개념은 Angular 2.0 core 에서 사용한다!!!

    

  - Bacon.js  : Functional Reactive Programming(FRP) Library for Javascript
    + 강좌-1 : Hacking with jQuery
    + 강좌-2 : Bacon.js started
    + 강좌-3 : AJAX and stuffs



Reactive Programming for Another Stuffs

Reactive 프로그래밍은 다양한 언어를 지원하고 http://reactivex.io 에서 언어별로 확인이 가능하다. 
  - Java를 위한 Reactive 프로그래밍으로 RxJava를 제공하고, 안드로이드 v2.3 이상부터도 사용을 할 수 있다. 
  - 김대성님의 FRP에 대한 이야기 : RxJava를 소개하고 있다. 유튜브 동영상을 시청하면 보자.   
    

  - 안드로이드 개발을 위한 Rx기반의 아키텍쳐링 방법도 제공을 하고, RxAndroid 라이브러리도 제공을 한다
    

    + cycle.js를 React 스타일로 재구성한 cycle-react
    + Flux Pattern을 Rx-Flux 구현

  - Angular에 RX 적용하기 
    + BangJS : Reactive AngularJS 로서 Bacon.js를 사용한다.

  - D3.js와 붙여보자 




<참조>

  - React & Bacon 예

  - Neflix API를 사용해 Reactive Programming하기

  - Reactive Programming using RxJS

  - Observable 과 Promise의 차이점

  - Reactive Extension in MS

  - Rx 관련한 대부분의 자료 모음

  - RP and MVC 예제

posted by 윤영식
prev 1 next