spectrum learns to dig

정답은   return <obj> 가령, vue 같은 곳에서 ( https://atmospherejs.com/akryum/vue-coffee ) <script>   export default {     data() {       return {          "say": "ho"       }     }   } </script> 이와 같이 작성한 코드는 <script lang="coffee">   return data: ->     "say": "ho" </script> 이렇게 쓰면 된다.

이 블로그를 꾸준히 보시는 분들은 아마도 {}, [] 같은 시작과 끝만 알리고 아무것도 실행하지 않는 주제에 오롯이 한 행을 죄다 차지하는게 싫어서 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...

잘 되다가 갑자기 coffeescript/typescript/babel 등등의 디버깅이 sourcemap 연결 안된다면 크롬 디버거 열고 F1 누르고 Settings > Preferences > Sources > Enable Javascript source maps 를 체크해준다. 그러고 다시 크롬 디버거를 열어보면 Sources 탭에 요렇게 예쁘게 나온다. 갑자기 설정이 풀렸다 싶으면 당황하지 말고 Settings를 확인해보자.

결과물은 여기에 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' ...