기본 콘텐츠로 건너뛰기

coffee는 쓰고 싶고 jsx는 쓰기 싫고. 그러면 만들어야지.

이 블로그를 꾸준히 보시는 분들은 아마도 {}, [] 같은 시작과 끝만 알리고 아무것도 실행하지 않는 주제에 오롯이 한 행을 죄다 차지하는게 싫어서 coffee나 jade나 stylus를 쓰는 변태영감탱이의 글들을 읽고 계실거다. 나는 Meteor를 매우 좋아하는 사람이고 Meteor 사용자의 저변을 넓히기 위해 frontend에서 가장 뜨거운 React를 Meteor에서 쓰면 좋다라고 열심히 약을 팔고 있는데. 정작 내게 불편한 것은 jsx였다. https://facebook.github.io/react/docs/react-without-jsx.html 이런 것이 없는 건 아닌데 이따위로 만들어놨다는 얘기는 쓰지 말란 얘기지. 그리고 어짜피 문서가 아닌데 구태여 코드안에 html을 쓸 이유가 있나? 애초에 html,css,js 로 분리한 건 의미를 가진 문서(html)를 서식화(css)해서 로직(js)을 돌아가게 함인데 이미 html도 css도 쓰지 않는 시점에서 코드안에 html을 섞어쓰는 것은 내겐 매우 불편한 일이었다. 그렇다면 DOM과 같이 위계를 갖는 요소를 어떻게 표현할 것이냐는 의문이 생기는데 다행히도 좋은 모델( http://mithril.js.org/#dom-elements )이 있다. 그러고보니 여기는 기껏 jsx를 지원한다고 했는데 내가 하려고 하는 건 그 반대;; 역시 변태영감인 것이다. <div>   <hr>   <ul>     <li>       First     <li>       <p style="font-weight: bold">Second</p>     </li>   </ul>   <div>     <span...

Meteor에서 접속(onConnection)/이탈(onClose) 관리에 대해 알아보자.

Meteor에서 로그인과는 상관없이 어떤 유저가 접속해 있고 이탈했는지를 추적하고 싶어서 정리, 서버사이드에서 아래와 같이 작성했다. Meteor.startup ->   console.log "server initiated"   ConnectedUsers.remove {} Meteor.onConnection (o)->   console.log "session [#{o.id}] is connected"   ConnectedUsers.insert userId: o.id   o.onClose (p)->     ConnectedUsers.remove userId: o.id Meteor.methods   "getSessionId": ->     @connection.id Meteor.publish "list.connectedUsers", ->   ConnectedUsers.find() 결론은 이정도이지 않나 싶다. mongodb를 사용하지 않고도 해보았는데 지나치게 publish쪽과 onConnection쪽이 복잡하고 일반화하기 좋지 않아 일단 보류. https://gist.github.com/makrem025/35543cd60aa88ca49fa0  의 예에서 응용하여 onConnection 일때 publish 의 added, remove로 쏘게 하면 되긴 함. 메모리 디비는 사랑입니다 <3 접속자 관리 관련한 기존 package(aka. mizzao:user-status)들은 지나치게 User collection을 괴롭혀서 성능을 떨어뜨린다. 생선을 낚으라고 준 낚시대인데 잡아야 하는 게 상어라면 분질러 버리고 작살을 만드는 게 맞다. ( 뭐? 상어도 낚시로 잡는다고? 낚알못 ) 우리는 뾰족하게 DDP를 통해 접근한 소켓(사용자가 아니다. 이름도 몰라요 성도 몰라 )에 대해 파악하고 이를 확인하는 것이 전부. 실전...

Grinder를 사용한 Meteor load testing

https://www.youtube.com/watch?v=tCPBGVI3PdA Adrian Lanning의 영상을 전에 본적이 있는데 기회가 있어 해보기로 함. https://raw.githubusercontent.com/technomancy/leiningen/stable/bin/lein  설치는 curl https://raw.githubusercontent.com/technomancy/leiningen/stable/bin/lein > /usr/local/bin/lein chmod 755 /usr/local/bin/lein 대략 이런 식으로 하면 된다. lein 을 한번 실행하고 https://github.com/alanning/meteor-load-test 를 받았다. lein deps 를 실행해서 의존성 라이브러리들을 받아놓자. https://github.com/alanning/meteor-load-test 에서 시키는 대로 해보자. 로컬 Meteor Application을 띄우고 bin/grinder agent start 로 에이전트 먼저 시작 start 뒤에 URL을 적어도 된다고 한다. tail -f log/agent_1.log 로그 파일도 모니터 하고 bin/grinder console start grinder 콘솔을 실행하자. clojure로 만든 되게 불편해 보이는 툴이 뜬다. 그냥 의전용 스샷이 아니니 잘 봐둬야... script탭을 선택하고 grinder 경로 아래에 working.properties 를 열어보자. OS X 유저들은 cmd 키가 안먹는다고 당황하지 말자. ctrl+c, ctrl+v, ctrl+a 등등 ctrl키를 이용. grinder.script = meteor.clj grinder.targetUrl = http://localhost:3000/ 가 보인다. 실제 grinder가 구동하는 스크립트는 clj파일이다. ;; ;; Load...

Meteor cordova app에서 splash 시간을 지연하고자 할때

최근 framework7( https://framework7.io/ )을 비롯해 UI Framework들이 기존의 하이브리드 웹앱의 한계를 극복하고자 하는 움직임도 있고 cordova 버전도 올라갔고(WKWebview + Crosswalk 지원) 하이브리드 앱 환경이 상당히 개선이 되었다는 반가운 소식을 들어 다시 Meteor를 가지고 하이브리드 앱을 만지고 있다. Cordova로 앱을 만들다 보면 가장 처음에 직면하는 것은 아무래도 어색한 Splash Screen인데. https://atmospherejs.com/meteor/launch-screen  를 발견하고 미시적이지만 꽤 프로페셔널한 개선이 어서 소개하고자 한다. 모바일 앱에서 최초 splashScreen은 무의미하고 느린 UI의 일종이라고 생각하지만 subscription등이 오래걸리거나 화면 이미지 로딩등으로 준비가 아직 되지않은 상태를 보여주기 싫다면 의미가 있다고 본다. 가령, 별도로 손을 쓰지 않으면 Splash 노출 -> Splash 소멸 -> 첫화면 (빈목록) -> subscription 끝 -> 첫화면 - 목록 노출 과 같은 단계를 실행할 것이고 빈목록이 보이는 지루한 시간은 사용자에게 완성도가 떨어지는 앱이라는 느낌을 줄 수 있다. Splash 노출 -> subscription 완료 -> Splash 소멸 -> 첫화면 - 목록 노출 처럼 작동한다면 splash화면을 봐줄만한 이유가 있고 제 역할을 하는 좋은 UI라고 생각한다. 먼저 package를 추가해보자. meteor add launch-screen namespace 가 없다! 그렇다. 서드파티가 아니고 공식지원이다! 일단 사용은 무척이나 간편한데 var handle = LaunchScreen.hold(); 를 글로벌 scope 에 넣기만 하면 끝. subscribe를 받아서 subs.ready() 같은 reactive data source를 ...
최근 확 떠오르는 micro 호스팅 서비스인 now에 meteor deploy가 가능하다고 해서 시도해봄. 먼저 now 와 meteor-now를 각각 설치하고 npm install -g now meteor-now 계정부터 만들어보자. $ now --login > Enter your email: 당신의@이메일.주소 > Please follow the link sent to 당신의@이메일.주소 to log in. > Verify that the provided security code in the email matches Smooth Dormouse. ✔ Confirmed email address! > Logged in successfully. Token saved in ~/.now.json 이게 전부다. .now.json 에 있는 토큰을 잘 뒀다가 나중에 또 써먹자. 우리는 일반 유저가 아니라 프로그래머이므로 password 따위는 사치일 뿐. 좋은 인증 방법이다. 일단 작동 확인을 위해 아무거나 meteor 프로젝트를 만들어보자. git clone https://github.com/meteor/clock clock 예제 정도가 DB를 사용하지 않으니 연습상대로 적당하다. cd clock해서 meteor 프로젝트 디렉토리로 진입한 뒤 meteor-now 하거나 MONGO_URL이 없으면 warning을 보여주니 빈거라도 넣어서 묻지마 deploy를 시작해보자. $ meteor-now -e MONGO_URL= ✔ [METEOR-NOW] - building meteor app ✔ [METEOR-NOW] - preparing build ⠍⠉ [METEOR-NOW] - deploying build (this can take several minutes) 꽤 시간이 흐르고 ✔ [METEOR-NOW] - meteor app deployed to https://clock-cseoxvdfzv.now.sh 뜨든! 주...

[tip] pico-8의 GPIO 기능

http://www.lexaloffle.com/pico-8.php?page=manual  를 읽다보니 재밌는 부분이 있다. 그건 바로 pico-8이 GPIO(General Purpose Input Output)를 지원한다는 점인데 CHIP/Pocket CHIP 뿐만 아니라 Raspberry Pi에도 대응하고 심지어 HTML으로 export했을 때도 된다는 사실. pico-8에는 가상의 메모리 맵이 있고 PEEK/POKE 명령으로 해당 주소를 읽고 쓸 수 있다. 메모리 맵은 아래와 같은데 0x0    gfx 0x1000 gfx2/map2 (shared) 0x2000 map 0x3000 gfx_props 0x3100 song 0x3200 sfx 0x4300 user data 0x5e00 persistent cart data (256 bytes) 0x5f00 draw state 0x5f40 hardware state 0x5f80 gpio pins (128 bytes) 0x6000 screen (8k) 이 0x5f80영역이 GPIO랑 붙는다. PEEK(0x5f80), POKE(0x5f81, 0xff)와 같이 접근 가능하다. CHIP류에선 0~7번 핀을 0x5f80~0x5f87까지 (PocketCHIP은 0,1 생략) RaspberryPi류에선 0x5f80~0x58f8f까지 사용할 수 있다. WiringPi Pin 번호에 주의하자 여튼 GPIO를 사용할 땐 pico8을 반드시 sudo 로 구동하여야 원활하게 사용할 수 있는 점을 명심하자. 재미있는 점은 HTML을 export 했을 때 pgio8_gpio 란 글로벌 변수로 GPIO를 시뮬레이션 할 수 있다. var pico8_gpio = Array(128); 이와 같이 미리 선언하고 PEEK, POKE하면 외부에서 pico-8 모듈로 읽고 쓰기가 가능해서 매우 유용하니 꼭 기억해두자.

pico-8 finger dance

pocketC.H.I.P을 너무 사고 싶은데 가격도 오르고 배송도 압박이어서 안사려는 마음으로 pico-8을 질렀(?)다. 감사합니다. HumbleBundle. 새로운 장난감을 얻었으니 손가락을 단련하자. 부팅 후 처음 접하는 화면은 콘솔 상태. HELP를 보자 load <filename> save <filename> run resume shutdown reboot install_demos dir cd <dirname> mkdir <dirname> cd .. keyconfig splore 명령어들이 나오는데 나머지는 뭐 뻔한 거니 설명이 필요없고 splore는 포럼( http://www.lexaloffle.com/bbs/?cat=7  - 근데 forum/community/bbs 뭐가 맞는거? 용어 통일이 안되있네)에 올라온 게임들을 살펴볼 수 있는 명령인데 s만치고 엔터쳐도 된다. 오호 꿀! 여기에 있는 게임만 다 해보는 것도 일이겠다. 엄청 많다. ESC 로 커맨드라인과 개발환경을 전환할 수 있다. 개발환경모드는 이런 식으로 구성. 오른쪽 상단은 순서대로 코드에디터-스프라이트에디터-맵에디터-SFX에디터-뮤직에디터이고 ALT+좌우화살표키로 이동가능하다. 코드에디터 하단왼쪽은 LINE 현재커서위치라인/전체라인수. 오른쪽은 토큰숫자인데 명령어 하나당 하나씩 증가하고 8192. 즉 8k까지 쓸 수 있다. 핑거댄스니까 단축키 위주로 정리 CMD(CTRL)+C,X,V (copy, cut, paste) CMD(CTRL)+Z,Y (undo, redo) CMD(CTRL)+F,G (find, next) CMD(CTRL)+UP, DOWN (top, end) CMD(CTRL)+LEFT, RIGHT (word 간 이동) ALT+UP,DOWN (function간 이동) CMD(CTRL)+D (줄 복사) TAB, SHIFT+TAB (indent, un-in...