spectrum learns to dig

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: 핸드폰에서 코드를 보기 좋습

http://jsbin.com/qosigic/edit?html,js,output 소스는 이쪽. 게임과 같은 분야는 타이밍 처리가 매우 중요하기 때문에 UI를 갱신하는 무한 루프를 놓고 delta 시간을 얻어와서 처리하는 로직을 많이 쓰는데 이걸 Javascript 에서 할 땐 전통적으로 setTimeout 을 걸어놓은 함수를 재귀하는 식으로 썼는데 문제는 setTimeout(setInterval도 마찬가지)이 굉장히 부정확한 타이밍을 가지고 있었고 이를 보완하기 위해 requestAnimationFrame 이라는 것을 만들어 사용하기 시작했다. 문제는 역시 지원하지 않는 몇몇 브라우저(ex. IE < 10)들 때문에 안타깝게도 RxJS 5.x 의 defaultScheduler에선 setTimeout( https://github.com/Reactive-Extensions/RxJS/blob/6dac0365ad22f87a92197fc4dcee70e72a11ddbb/src/modular/scheduler/defaultscheduler.js#L119 )을 쓰고 있는데 물론 권장하는 방식은  https://github.com/Reactive-Extensions/RxJS/tree/8fa95ac884181fb6cbff8ce7c1d669ffb190f5e4/examples/crop  의 예처럼 RequestAnimationFrameScheduler 를 사용하는 것이지만 RxLua 처럼 기본으로 타이머가 없고 외부패키지에 의존하는 환경도 있고해서 기본 RxJS 환경에서 직접 만들어보기로 했다. Scope 을 위해 일단 function으로 감싸보았다. (function() {   var canvas=document.getElementById('canvas1');   var ctx = canvas.getContext('2d');   var start = 0;   var step = function(timestamp)

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

//: Playground - noun: a place where people can play import UIKit import JavaScriptCore /* swift to javascript */ let str = "var double=function(x) { return x*2 };" let context = JSContext () context ?. evaluateScript ( str ) let getDouble = context ?. objectForKeyedSubscript ( "double" ) getDouble ?. call (withArguments: [ 1 ]). toString () *2를 하는 double이라는 function을 js에서 만들고 swift에서 인지 1을 넣어 2를 반환하는 예. 스위프트에서 자바스크립트 함수를 호출할 때는  objectForKeyedSubscript를 사용하여 함수명을 지정하고 call(withArguments: [, ... ]) 를 사용하여 인자를 지정한다. 결과값은 JSValue 형이므로 적당히 변환해서 사용한다. /* javascript to swfit */ let str2 = "postMessage('갔다가 다시 올꺼야')" let postMessageBlock : @convention(block) (AnyObject?) -> (AnyObject) = { (data) in     print(data)     return data! } context?.globalObject.setValue(unsafeBitCast(postMessageBlock, to: AnyObject.self), forProperty: "postMessage") context?.evaluateScript(str2) 반대의 경

오늘 드디어 손에 넣었다. ESP32 DevBoard! Adafruit 에서 15개 한정 재입고 트윗을 보고 광속 결제. 그리고 1주일의 기다림. 사랑해요 USPS <3 알리를 이용하다보니 1주일 정도는 광속 배송임. 물론 배송비도 무자비함 -_ㅜ 15개 한정판 adafruit 발 dev board 그놈이 틀림없으렸다. 오오 강려크한 포스 ESP32_Core_board_V2라고 적혀있군요. ESP32 맞구요. 네네. ESP32-D0WDQ6 라고 써있는데 D → Dual-core 0 → No internal flash W → Wi-Fi D → Dual-mode Bluetooth Q → Quad Flat No-leads (QFN) package 6 → 6 mm × 6 mm package body size 라고 함. 길이는 이정도 모듈크기는 이정도 코어는 6mm밖에 안해! 여기에 전기만 넣으면 BLE+WIFI! 밑에 크고 발 8개 달린 놈은 FM25Q32라고 32Mbit 플래시메모리 ESP8266 DevBoard 동생이랑 비교 크고 아름다운 레귤레이터랑 CP2102 USB Driver가 붙어있음. ESP8266 DevBoard엔 CH340G 인데 확 작아졌네. 머리를 맞대어 보았음. 모듈크기는 아주 약간 ESP32가 더 큰데 워낙에 핀이 많고 촘촘함. ESP8266인 ESP12는 핀 간격이 2.00mm인데 비해 ESP32는 1.27mm 밖에 안함. 딱봐도 비교가 될 정도. https://www.sparkfun.com/news/2017 크고 아름다운 Pinouts ESP8266 보드랑 별로 안달라보인다. http://www.silabs.com/products/mcu/pages/usbtouartbridgevcpdrivers.aspx#mac 에서 CP2102 드라이버를 설치하고 screen 으로

amok은 live reload 가 가능해서 개발을 즐겁게 한다. 프로토타이핑할때 아주 좋다. RxJS 라이브러리를 받고 index.js 도 만들자. curl https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-beta.12/Rx.min.js > Rx.min.js touch index.js index.coffee package.json 을 만들어 놓으면 편하다. npm init 을 해서 엔터 연타하고 script 부분만 수정하자 {   "name": "rxamok",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "start": "amok --browser chrome --interactive --hot Rx.min.js index.js"   },   "author": "",   "license": "ISC" } 이러면 준비 끝. amok 에서 coffeescript를 compile 하는 옵션이 deprecated 되었다고 한다. 하지만 걱정할 것 없다. 저장할때마다 자동으로 coffeescript를 컴파일 할 수 있다. coffee -wco ./ *.coffee 해놓고 편하게 코딩하자. rate = 1000/60 c = document.createElement 'canvas' c.style.position = 'absolute' c.style.top = '0' c.style.left = '0' resize = ->   c.width = w