spectrum learns to dig

오늘 드디어 손에 넣었다. 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 드라이버를 설치하고 ...

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...

결과물은 여기에 http://jsbin.com/wuhega/edit?js,output Reactive Programming 의 장점+효용이 극대화되는 분야는 아무래도 게임이지 않을까 싶어서 짬을 내어 RxJS로 슈팅게임을 만들고 있다. 배경+플레이어+총알:  https://jsbin.com/worewow/edit?js,output 1+적+폭파에니메이션:  https://jsbin.com/modedic/edit?js,output 2+coffee+적 움직임등 :  https://jsbin.com/yobuka/ 대략, 이런 흐름으로 살을 조금씩 붙여가면서 올리고 있는데 어느정도 튜토리얼을 만들려는 생각으로 ECMA6를 가지고 시작을 했지만 {}, (), [] 괄호노동을 통한 손목터널증후근과 코딩하는 시간 만큼 쌍 맞추는 시간이 소모되는 자신을 발견하고 개인의 행복을 위해(...) 다시 coffeescript로 바꿔서 진행하고 있다. 살 것 같다. 아효. 아마도 곧 합쳐질 것 같지만 어느정도 내용물이 만들어졌으니 이것들을 감싸는 껍데기를 어떻게 만들지 코드를 짜면서 고민해보았다. 일단 크게 나누어 보기를 Splash Scene - 한번만 노출. 게임명과 제작자에 대해 알리는 화면 Title Scene - 게임시작을 위해 대기하는 화면 Game Scene - 실제 게임 화면 GameOver Scene - 게임을 더 이상할 수 없는 상황. 이정도로 잡고 1>2>3>4>2>... 의 반복 구조로 설계를 해보기로 했다. 아무런 레퍼런스도 없고 검색해 본 것도 없어서 매우 삽질이 예상되지만 그래도 FRP(Functional Reactive Programming)원칙에 충실하려고 노력했다. 먼저, 화면을 준비한다. 'use strict' ### setup canvas ### c = document.createElement 'canvas' ...

http://jsbin.com/geqige/edit?js,console,output 선 소스. ( 조금 더 자세한 구현 :  http://jsbin.com/ziraga/edit?html,js,output ) 먼저 Drag and Drop이라는게 어떤 절차인지 생각해보면 이동하고자 하는 대상에 MouseDown 이동하고자 하는 지점까지 MouseMove 이동하고자 하는 지점에서 MouseUp 하는 세개의 동작을 순서대로 실행하는 것이라 할 수 있겠다. 100,100 위치에 있는 A라는 대상을 200,200까지 Drag and Drop을 하는 과정을 표로 옮기면 시간(seq) 행동 좌표 1 mousedown (150,150) 2 mousemove (150,150) 3 mousemove (160,160) 4 mousemove (170,170) 5 mousemove (..., ...) (n-1)th mousemove (250, 250) (n)th mouseup (250, 250) 과 같은 과정을 수행할 것이다. 눈치챘을지도 모르겠지만 mousemove 구간이 바로 Stream이다! Rx 기준으로 그러면 다시 Drag and Drop을 재정의하면 mousedown 이후 시점으로부터 mouseup이 되기전까지 mousemove 를 Observe 하는 것 인것이다. 그러면 재료를 모아보자. mousedown mouseup mousemove 이 세 개를 Observable 로 만들자.   const down$ = Rx.Observable.fromEvent(box, 'mousedown');   const...

질문: 쇼핑몰에서 옵션이 여러개 있는데 이걸 조합해서 보여주고 싶어요. 사이즈: s, m, l 색상: blue, red 길이: short, long 대상: girl, boy, woman, man 이라고 했을 때 s blue short woman 이런 식으로요. 답변: reduce 를 사용하세요. 풀이 예제  << 클릭하면 coffee/js 소스랑 결과값 모두 볼 수 있어요. Array::flatMap = (lambda) ->   @concat.apply [], @.map lambda v=[  ['s','m','l']  ['blue','red']  ['short', 'long']  ['girl', 'boy', 'woman', 'man'] ] console.log "result\n",   v.reduce (x1,x2)->     x1.map (o)->       x2.map (p)->         "#{o} #{p}"     .flatMap (o)->o 분류의 갯수는 상관없어요. 두개를 순서대로 합쳐야한다! 싶을 때는 reduce로 어떻게 해봐야지! 하고 시작하는게 좋아요. 먼저 ['s', 'm', 'l'] 하고 ['blue', 'red'] 만 놓고 보자구요. map으로 이중 루프를 돌면서 둘을 조합하면 되겠지요? ['s', 'm', 'l'].map (o)->   ['blue', 'red'].map (p)->     "#{o} #{p}" 근데 이렇게 하면 [["s blue","s r...

시작은 SVG에서 호( 弧: arc)를 그리는 것에서 비롯하였다. SVG는 정비율 원인 circle 과 ellipse는 있는데 arc 가 따로 있는 건 아니다. pie graph 류를 그릴 땐 꼭 필요한데 path 말곤 뾰족한 수가 없어 보인다. 뭐 이렇게 된거 path 에 대해 전부 다 알아보도록 하자. path는 "명령 숫자 숫자 ..."의 조합인데 각각 의도에 맞는 명령(M,L,H,V,Z,C,S,Q,T,A)와 거기에 맞는 인자들을 잘 넣어서 한방에 그릴 수 있게 한다. 참고로, 각각의 커맨드를 소문자로 쓰면 상대 좌표계로 바뀐다. 인자가 없는 Z의 경우는 어느쪽이던 똑같다. 그냥 생각해봐도 일일이 line 으로 모든 걸 다 그리는 건 비효율적이긴 하다. 어짜피 이런 건 아는 것 보다 "하는" 것이 중요하니까 한번 직접 크롬 개발 환경이라도 열고 해보는 게 좋다. 이동 명령 (M) 직선 명령 (L, H, V) L x y - 현재 점에서 x,y 까지 직선을 긋는다. H x - 현재 점에서 x 위치까지 가로로 직선을 긋는다. V y - 현재 점에서 y 위치까지 세로로 직선을 긋는다. 폐쇄 명령 (Z) - 맨 처음 점으로 되돌아가게끔 직선을 그어 닫힌 면을 만든다. 인자 없는 것이 특징. 곡선명령 (C,S,Q,T) C x1 y1, x2 y2, x y - 현재 점에서 x,y 까지 직선을 그은 것을 Bezier 곡선을 만든다. 현재 점에서 x1,y1만큼, x,y 에서 x2,y2 만큼 핸들을 사용한다. c 즉 상대좌표일 때 주의할 점은 x2 y2는 x,y 기준이 아니라 현재 점 기준. S x2, y2, x y - 이전의 핸들을 연장한다. 아래의 경우를 비교해보자. 둘은 완전히 같은 형태의 곡선을 그리지만 S를 쓰는 쪽이 인자가 하나 적다. <path d="M100 500 C 150 400, 200 500, 200 500 C 250 600, 300 500, 300 500...

rhc 그러니까 옛날 버전 기준이다. 요즘껀 도대체 뭐가 뭔지 모르겠어. 잊지 않겠다 Kubernetes.. o>< rhc app create --no-scaling nodebb https://raw.githubusercontent.com/icflorescu/openshift-cartridge-nodejs/master/metadata/manifest.yml rhc cartridge add https://raw.githubusercontent.com/icflorescu/openshift-cartridge-mongodb/master/metadata/manifest.yml -a nodebb https://github.com/icflorescu/openshift-cartridge-nodejs/issues/55 참조. node.js 버전을 지정하려면 semver.io를 참조. NODE_VERSION_URL 환경 변수도 바꿔줘야한다. rhc env set -a [어플리케이션 이름] NODE_VERSION_URL=https://semver.io/node/resolve/4 (https://semver.io/node 가 안정버전, https://semver.io/node/unstable 이 최신이다) 일단, NODE_VERSION_URL 을 지정하지 않았으므로 최신(unstable) node.js 설치를 할거다. app create를 하면 nodebb 디렉토리를 만드는데 cd nodebb git remote add upstream -m master https://github.com/NodeBB/NodeBB.git rm -rf `ls` .eslintrc && git commit -a -m 'Cleaned up for NodeBB' git pull --no-edit -s recursive -X theirs upstream master 순으로 하자. upstream에서 가져올 때 ...