기본 콘텐츠로 건너뛰기

amok 에서 vim으로 coffeescript 를 사용하는 법

amok.js 는 아주 빠르고 멋진 코드 갱신을 할 수 있게 하는 작은 툴이다.
webpack의 Hot module replacement 와는 차원이 다른 반응속도를 보여준다.
물론, 구조도 더 단순하고 무엇보다 러닝커브가 낮다.

uglify 툴로 이전에 언급한 Tracker.js , mithril.min.js , MeteorDDP.js 를 모두 묶어서 util.js 라고 만들고


> uglify -s MeteorDDP.js,Tracker.js,mithril.min.js -o util.js

html 파일은 간단하게 만들자

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mamok</title>
</head>
<body>
<script src="./util.js"></script>
<script src="./index.js"></script>
</body>
</html>

index.js 를 바라보게 했는데 사실은 index.coffee를 쓸거다.

'use strict'

window.addEventListener 'patch', ->
  m.redraw()

m.module document.body,
  view: -> [
    m 'h1', 'Hey, Brother.'
    m 'h3', m.trust '<button>hey hey</button>'
  ]

아주 짧지만 신통한 구조다. 파일 변경을 감지하면 amok은 patch라는 이벤트를 보내는데 이때마다 그저 m.redraw() 로 뷰를 갱신하는게 전부.
amok이 coffeescript를 지원하긴 하지만 여러개의 파일이나 js랑 섞어쓸때 전채를 다 로딩해버리는 만행을 저질러서 그냥 그때그때 coffee파일을 저장할 때마다 js로 컴파일 하는 방식을 택했다.
이것 역시 매우 빠르다.
내 경우는 https://github.com/kchmck/vim-coffee-script 을 사용하고 있는데
:CoffeeWatch 를 입력하면 바로 js 결과물이 보이고.

autocmd BufWritePost *.coffee silent make!
를 설정(https://github.com/kchmck/vim-coffee-script#recompile-on-write)해놓으면 저장할 때마다 *.coffee 파일인 것은 js make 할 수 있어서 매우 편리하다.
.vimrc 에 넣으면 더욱 편하지만 coffee를 js로 변환하지 말아야하는 경우도 많아서 그냥 일일이 치기로 했다.

마지막으로 amok을 실행하면 되는데 

amok -i --browser chrome -t file://$PWD/index.html

이렇게 해주면 크롬브라우저를 띄우고 -i 옵션인 터미널에서 인터렉티브모드와 -t 옵션인 Hot Patching 을 index.html 기준으로 실행한다.

만일, 매번 타이핑을 안하고 좀 더 이쁘게 하고 싶으면 package.json을 활용하자.
{
  "private": true,
  "scripts": {
    "start": "amok -i --browser chrome -t file://$PWD/index.html
  },
  "dependencies": {
    "amok": "file:../.."
  }
}

이와 같이 하고 npm start 로 
요렇게 된다.
patch 때 이벤트를 감시헀더니 util.js 파일은 로드하지 않고 index.js  만 갱신하는 걸 볼 수 있었다.
지화자!

이 블로그의 인기 게시물

Mac 주의 - 약간 빡치는 git 대소문자 변환 파일명 변환(renaming)하는 법

Mac에서 종종 화나는 일 중 하나가 파일 시스템이 대소문자를 구분하지 않는 점이다.
가령, A.png를 a.png로 바꿔야할 경우 HFS 기준으론 전혀 바뀐 점이 없는 걸로 인식하는데 다소 화가난다.
하지만, 방법이 없는 것은 아닌데

A.png를 임의의 다른 파일로 바꾼다. (ex. A_.png)1에서 바꾼 상태에서 staging 한다. (git add A_.png)1의 파일을 다시 원래 바꾸려고 했던 파일로 바꾼다. (mv A_.png a.png)3을 다시 staging 한다. (git add a.png)commit 한다.https://stackoverflow.com/a/40307511/880991 에서 답변해준 Chris Barr 님에게 감사를.
* 추가

실제로 해보니 git mv --force A.png a.png 가 더 간단하다. 이는 바로 staging 영역에 add까지 해준다.

graphql 연습 /w launchpad

https://launchpad.graphql.com/mw9wkzv99
단순 전체쿼리+조건쿼리+추가

http://graphql.org/graphql-js/passing-arguments/
참고. random ID는 crypto 1.0.1 사용
  type Query {
    Members: [member]
    getMember(id: ID!): member
  }
  type member {
    id: ID!
    text: String
  }
  input memberInput {
    text: String
  }
  type Mutation {
    addMember(member: memberInput): member
  } SQL 정의. facebook 쪽은 스트링에 지지는 거 진짜 좋아하네. *.gql 파일이 있다고 하니 이해해주자.
resolver는 var buffer = [];
const resolvers = {
  Query: {
    Members: (root, args, context) => {
      return buffer;
    },
    getMember: (id)=> {
      return buffer.find(o=>o.id)
    }
  },
  Mutation: {
    addMember(_, {member}) {
      const mm = { ...member, id:randomBytes(10).toString('hex') };
      buffer.push(mm);
      return mm;
    }
  }
}; 평범 평범.
https://dev-blog.apollodata.com/tutorial-graphql-subscriptions-server-side-e51c32dc2951 다음으로 pub/sub 연습.
https://launchpad.graphql.com/xvn94n3ql   type Subscription {
    memberAdded: member
  } member가 added되는 순간을 감시. imp…

즐거운 Online Prototyping Tool 들

jsbin, codepen, jsfiddle 이런 것들은 일단 생략. 너무 유명한 것들이라.

https://launchpad.graphql.com - node.js 기반 graphQL 연습장. 이것만으로도 충분히 훌륭한 백엔드
https://codesandbox.io/ npm 사용이 가능한 클라이언트 사이드 연습장. webpackbin이 너무 문제가 많아서 찾아본 것.

https://scrimba.com 이건 codesandbox+ asciinema(https://asciinema.org/) 같은 느낌인데 키 녹화와 음성 녹화 기능이 추가되었다. 다 좋은데 화살표 키로 빨리감기 뒤로감기 기능이 안되고 익스포트(youtube등)으로 지원이 없는게 아쉽다.

이 둘이 만나면? https://codesandbox.io/s/jvlrl98xw3?from-embed
뭐야 이거 무서워 하지마 ㄷㄷ;  graphql+react-native-web(부왘ㅋㅋ)

https://repl.it/languages 전통을 자랑하는 REPL 도구. 지원 언어 종류가 -_-;;;;;

https://tio.run/# repl.it? 장난함? 얘는 지원 언어가 무려 386종류. J랑 아희도 있다.

https://play.golang.org/ 즐거운 go playground. 소스 포멧팅 넘 좋아.

http://decaffeinate-project.org/repl/ 최고의 coffeescript REPL. 원래 용도는 coffee를 ecma6코드로 바꾸는 것이지만...

https://scaphold.io
https://www.graph.cool/ graphql backend service. scaphold.io는 설치도 필요없는 클라우드. graphcool은 호스팅+클라우드 다있음. 둘 다 막상막하. 푸쉬서버도 되고 뭐 미친득.

https://glitch.com/ gomix에서 결국 glitch로 안착.  node.js

https://www.shadertoy.com 잘하고 싶다! 쉐이다! 오디오도 된다!

http:/…