기본 콘텐츠로 건너뛰기

11월, 2016의 게시물 표시

tutorial - radio button을 이용한 tree 구조 만들기

http://jsbin.com/cikuga/edit?html,css,output

IE 호환을 위해 jQuery를 사용했다. 안해도 되지만 이 편이 그래도 좀 읽기 쉽지 않나 싶다.
접히고 펼쳐지는 트리구조를 만드는 데 있어 핵심 아이디어는 같은 깊이에 인접한(sibling ) 요소들끼리는 radio button을 사용하면 된다는 것이다.

가령

<input type="radio" name="group1">
<input type="radio" name="group1">
<input type="radio" name="group1">

이렇게 했을 경우 같은 이름(name)을 가지고 있으므로 셋 중 하나만 radio 버튼이 들어오고

<input type="radio" name="group1">
<input type="radio" name="group2">
<input type="radio" name="group2">
<input type="radio" name="group2">

<input type="radio" name="group1">
<input type="radio" name="group1">

이와 같이 구성하면 group2는 group2끼리 group1은 group1끼리 각각 구성할 수 있다.
따라서 각각의 radio button에 대한 id가

1
  1-1
  1-2
2
  2-1
    2-1-1
    2-1-2
3

일 경우엔 1,2,3을 top
1-1, 1-2는 1
2-1은 2
2-1-1, 2-1-2는 2-1 같이 name을 지정해주면 된다…

Meteor DDP subscribe 처리 시 주의할 점

Meteor에서 logout 시 독특한 패턴으로 websocket이 날아오기 때문에 주의해야한다.

먼저 logout을 보내면
["{\"msg\":\"method\",\"method\":\"logout\",\"params\":[],\"id\":\"3\"}"]

가입 되있던 모든 publish에 영향 받는 collection이 removed 된다.
a["{\"msg\":\"removed\",\"collection\":\"users\",\"id\":\"ySWmTt329QeLQZTEc\"}"]80
23:56:26.494
.........

a["{\"msg\":\"ready\",\"subs\":[\"CPSzK3DsirQq4fSmo\",\"87ojrAZZKFwu9LTeH\",\"5ynAG9oTZg7i3DMCs\",\"KZBaQRzyPiF33BoLz\",\"w3JwjFeWaFmxXiiaL\",\"ZM9oXYRjZ7cfSxvMY\",\"Q7XAmPJC35NjLdBYL\"]}"]189
23:56:26.529

정체불명의 subs 가 array로 뭉텅 날아오고

a["{\"msg\":\"updated\",\"methods\":[\"3\"]}"]46
23:56:26.530

logout method 에 대한 updated 와

a["{\"msg\":\"result\",\"id\":\&…

decaffeinate hack - Rx.js 를 import 해보자!

http://decaffeinate-project.org/repl
평소에 coffee를 좋아하지만 ecma6로 바꿔서 보여줘야 좋아하는 분들이 종종 있어서 decaffeinate를 쓰다보니 나름 console.log 만 띡 나오는게 꽤 쓰기 좋아서 자주 쓰는데.
쓰다보니 아쉬운 점이 외부 라이브러리를 불러올 수가 없어서 약간의 hack을 해보기로 했다.
script = document.createElement('script')
script.src = "//cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.0-rc.2/Rx.js"
x=document.getElementsByTagName('script')[0]
x.parentNode.insertBefore script, x 단순하게 생각하면 이런 식
script tag을 하나 만들고 src를 Rx.js CDN 라이브러리로 지정하고 insertBefore를 사용해서 밀어넣으면 될거라고 생각했는데
repl.js?t=2015-03-09T08:30:22-07:00:7 Uncaught Error: module is not supported in the browser, you need a commonjs environment such as node.js/io.js, browserify/webpack etc 이런 오류가 난다. 보니까 의도적으로 decaffeinate에서 "module", "exports", "require" 이라는 말을 쓰면 저지하도록 되있더라
  ["module", "exports", "require"].forEach(function(commonVar){
    Object.defineProperty(window, commonVar, {
      get: function () {
        throw new Error(common…

Bluestacks OS X를 android 개발용으로 쓰는 법

먼저 docker 를 설치했다면 꺼준다.
둘 다 가상화를 쓰는 시스템이라 충돌한다.

vi ~/Library/Preferences/com.BlueStacks.AppPlayer.plist
로 들어가서
width 와 height 부분을 바꿔준다.
<key>Width</key>
<integer>420</integer>
<key>Height</key>
<integer>700</integer> 420x700 으로 바꾸면 720p 노트북에서 그럭저럭 볼만하다.