기본 콘텐츠로 건너뛰기

글

라벨이 reactiveX인 게시물 표시

RxJS - ReactiveX 인터뷰

A: 왜 RxJS입니까 B: javascript는 참 쉽고 친숙한 언어죠. A: 별로 그렇게 생각 안합니다만. B: 그래서 좀 어렵고 있어보이는게 뭘까 싶어서... A: 네? B: 함수형이라는게 유행하기도 하고 f(x) 좋쟎습니까? 미스테리~ 미스테리~ 정수정짱짱 으아아 이런 수학선생님이라면 수포자 따윈 A: ... B: 그리고 반응형이라는 말 뭔가 A: 뭔가? B: 대충대충해도 막 알아서 할거 같고... A: 그럴리가요? B: 안그렇겠죠? A: 네 B: 네 (잠시만 기다려주세요) A: 그래도 뭔가 매력이 있으니 이렇게 시간을 내셔서 이것저것 Rx에 대해 글도 쓰고 이야기도 하고 그러시는거 아닌가요? B: 매력이라. 으음. 제가 팔꿈치 터널 증후근이 좀 있어요. 오른손 세끼손가락, 약지손가락이 저립니다. A: 무슨 상관이? B: 그래서 각종 괄호를 쓰는게 너무 힘듭니다. 소중대괄호 만든 사람 죽었으면. Hello world (ASCII): https://esolangs.org/wiki/Parenthesis_Hell A: 이미 옛날에 돌아가셨겠죠. B: 그렇겠네요. 아무튼 그래서 소중대괄호 의존이 적은 커피스크립트를 쓰는데요. A: 빨리 본론을 말씀해주시죠. B: 커피스크립트에서 가로로 80자 이상쓰면 Line exceeds maximum allowed length 라고 경고해요. A: 그래서요? B: 근데 Rx를 쓰면 코드를 가늘게 쓸 수가 있더라구요. A: 호오? B: 그리고 = 쓰는 것도 너무 힘듭니다. A: 네? B: 오른손을 쓰쟎아요. A: ... 그러니까 정리하면 1. 괄호가 힘들다 2. 커피를 쓴다 3. 커피는 길게 쓰면 경고 4. Rx를 쓰면 코드가 가늘다 5. 대입문을 줄이고 싶다. B: 네 하지만 5번은 생각보다 별로... A: B: B: 아! A: ? B: 코드가 가늘어서 좋은 점이. A: 네. B: 핸드폰에서 코드를 보...
댓글 쓰기
자세한 내용 보기

RxJS Basic - 기초

http://reactivex.io/rxjs/manual/tutorial.html  글을 대충 번역해서 쓰는 글입니다. jsbin/codepen 같은 곳에서 RxJS 라이브러리를 추가한 후 연습해봅시다. 현재 가장 최근 버전은  https://cdnjs.com/libraries/rxjs/5.0.0-rc.1  에서 확인하세요. Observable 로 변환하기 하나 혹은 n 개의 값으로부터 Rx.Observable.of('foo', 'bar'); =>foo =>bar 배열로부터 Rx.Observable.from([1,2,3]); =>1 =>2 =>3 이벤트로부터 Rx.Observable.fromEvent(document.querySelector('button'), 'click'); =>button을 누를 때 마다 event로 변환 Promise로부터 Rx.Observable.fromPromise(fetch('/users')); =>/user 주소의 내용을 fetch한 것을 변환 마지막 인자가 콜백인 경우 콜백으로부터 /* node.js */ var exists = Rx.Observable.bindCallback(fs.exists); exists('file.txt').subscribe(exists => console.log('Does file exist?', exists)); var rename = Rx.Observable.bindNodeCallback(fs.rename); rename('file.txt', 'else.txt').subscribe(() => console.log('Renamed!')); Observable 만들기 외부로부터 새로운 이벤트를 생성한다. var myObservable = Rx.Subject.create(); myObserv...
댓글 쓰기
자세한 내용 보기

ReactiveX(Rx), Promise, 그리고 Future

Rx를 하다보니 fiber/future도 새롭게 보인다. 가령 비동기 구간을 setTimeout -> ..... , 1000 으로 하는 구현을 해보자. Rx.Observable.create (observable)->   # callback block   setTimeout ->     observable.onNext "<결과값>"   , 1000 .subscribe (res)->   console.log res 요건 Promise로 풀면 new Promise (resolve, reject)->   # callback block   setTimeout ->     resolve "<결과값>"   , 1000 .then (res)->   console.log res 거의 같은 모양을 하고 있다. 그 fiber/future로 풀면 doSomeAsync = ->   future = new Future()   setTimeout ->     future.return "<결과값>"   ,1000   future.wait() console.log doAsync() 핵심은 동기에서 return 에 들어갈 부분이 대체되고 그걸 외부에서 받는 부분이랑 한 쌍을 구성한다는 점인데 future는 c coroutine library 인 libcoro( https://github.com/ramonza/libcoro )를 사용하고 있다.  사실 coroutine만 해도 c에서 구현만 http://www.chiark.greenend.org.uk/~sgtatham/coroutines.html  이렇게 다양한데. ECMA6 (coffeescript 1.10.0)...
댓글 쓰기
자세한 내용 보기

RxJS 연습.

http://jsbin.com/roweju  에 해보고 있음. Rx.Observable 에 fromEvent 를 붙여서 click 눌렀을 때 카운트가 올라가는 건 솔직히 잘 모르겠고 map으로 가공하고 최종결과를 subscribe 하는 패턴은 재미있다. 비동기 실행을 하는 부분은  Rx.Observable.create (observer)-> 로 시작해서 observer.next( 리턴값 ) 형식으로 끝나는 건 promise 랑 되게 비슷한 패턴이다. .flatMap은    .map (url)-> sendRequest url, 'GET', null    .mergeAll() 이 두개를 합친 것이라고 보면 됨. * HTML <!DOCTYPE html> <html> <head> <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <title>JS Bin</title> </head> <body>   <button id="btn">click</button>   <p><span id="counter">1</span>th click</p>   <button id="btn-get">get posts</button>   <pre id="result">   </pre> </b...
댓글 쓰기
자세한 내용 보기