기본 콘텐츠로 건너뛰기

10월, 2016의 게시물 표시

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: 핸드폰에서 코드를 보기 좋습니다.
A: ... 왜 팔꿈치 터널 증후근이 안 낫는지 알겠습니다.
B: 도와주세요.
쇠고기 사묵으면 나을 것 같습니…

RxJS 에서 requestAnimationFrame 을 사용하려면?

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) {
    if (!start) star…

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();
myObservable.subscribe(value => console.log(valu…

JavascriptCore in Swift 3 연습

//: 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)
반대의 경우, 즉 자바스크립트에서 스위프트의 특정 함수를 호출하고자 할 땐 해당 context의 globalObject에 setValue를 하되 unsafeBitCast를 사용한…

ESP32 DevBoard 개봉기

오늘 드디어 손에 넣었다. 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 으로 연결해보자.
내 경우엔 tty.SLAB_USBtoUART 로 잡혔다.
어디서 기본 속도가 115200bps 라고 들은 적이 있어서
screen /dev/tty.SLAB_USBtoUART …

amok.js 에서 RxJS와 coffeescript 사용하기

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 = window.innerWidth
  c.height = window.innerH…