ES6로 작성 Isomorphic 앱 입문 - Part2: 브라우저에서 사용할 수 있는 REPL

ES6로 작성된 Isomorphic 앱 개발은 아직 Getting Started 이전의 지식밖에 없습니다. 길은 길 것 같지만 차세대 개발 준비는 조금씩 해두고 싶습니다. ClojureScript에는 iOS에서 실행되는 Ambly라는 REPL도 있습니다. 신경이 쓰일 때 터미널을 열지 않아도 어디서나 REPL을 사용할 수있게되면 계산기 대신도됩니다.

Getting Started with ES6 – The Next Version of JavaScript 게시물에는 브라우저에서 온라인으로 사용할 수있는 ES6의 REPL이 몇 가지 소개되어 있습니다.

온라인 브라우저

Traceur 및 Babel 컴파일러 홈페이지에 브라우저에서 사용할 수있는 REPL이 공개되어 있습니다. 설치가 불필요하므로 조금 시도하는 경우에 가장 간단합니다.

ES6 Fiddle

Traceur Transcoding Demo

Babel REPL

TypeScript Playground

Chrome Extension

Scratch JS는 Chrome Extension입니다. 개발자의 의견에도 있지만, 누군가의 블로그를 읽고 시도하려는 코드가 있을 때 option + command + I를 눌러 Developer Tools에서 바로 확인할 수 있습니다.

Scratch JS Chrome Extension

Docker와 Cloud9

공식 io.js 이미지를 사용합니다. 현재 최신 버전의 2.3입니다. io.js의 ES6에 플래그에 대해 쓰는 것처럼 화살 함수는 아직 기본적으로 지원되지 않습니다. harmony 플래그를 붙여 기동할 필요가 있습니다.

$ docker run --rm -it iojs:2.3 iojs --harmony_arrow_functions

내 경우 io.js를 기본 이미지로 사용하여 Cloud9를 클라우드에 브라우저에서 사용할 수있는 개발 환경을 만들고 있습니다.

Dockerfile

FROM iojs:2.3
MAINTAINER Masato Shimizu <[email protected]>

RUN apt-get update && apt-get install -y vim

RUN git clone https://github.com/c9/core.git /cloud9 && \
    cd /cloud9 && ./scripts/install-sdk.sh

RUN npm install hexo-cli -g

RUN wget -O - https://storage.googleapis.com/golang/go1.4.2.linux-amd64.tar.gz | tar -xzC /usr/local -f - && \
    echo "export GOPATH=/workspace/gocode" >> /root/.profile && \
    echo "export PATH=$PATH:/usr/local/go/bin:/workspace/gocode/bin" >> /root/.profile

WORKDIR /workspace

RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

Cloud9 터미널에서 ES6 REPL을 실행할 수 있습니다.