Outsider's Dev Story: CoffeeScript 카테고리 글 목록https://blog.outsider.ne.kr/Stay Hungry. Stay Foolish. Don't Be Satisfied.2024-03-15T15:14:20+09:00Textcube 1.10.7 : Tempo primoWindows에서 CoffeeScript 사용하기Outsiderhttps://blog.outsider.ne.kr/7262012-01-08T16:43:36+09:002012-01-08T16:43:36+09:00CoffeeScript는 웹 브라우저에서 커피스크립트 컴파일러 파일을 불러들여서 사용할 수도 있지만 Node.js에서 사용할 수도 있습니다. 사실 제대로 커피스크립트를 사용하려면 Node.js기반해서 사용해야 하는데 그 전에는 Node.js가 Windows에서 동작하지 않았기 때문에 Windows에서는 사용할 수 없었습니다. 하지만 Node.js가 0.6.x버전부터는 Windows로 포팅되었고 이젠 npm까지 완전히 포팅되었기 때문에 Windows에서도 자유롭게 커피스크립트를 사용할 수 있습니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1285001396.jpg" alt="Node.js 다운로드 페이지 " height="410" width="550" /></div><br><a href="http://nodejs.org/#download" target="_blank">Node.js 다운로드 페이지</a>에서 윈도우즈 인스톨러를 다운로드 받습니다. 일반적인 인스톨러처럼 Next를 눌러서 설치하면 Node.js와 npm이 모두 설치되고 환경변수까지 자동으로 설정됩니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1014684890.jpg" alt="윈도우즈 명령 프롬프트에서 커피스크립트를 실행하는 화면" height="170" width="550" /></div><br><span style="color: rgb(255, 118, 53);">npm install coffee-script -g</span> 를 실행하면 글로벌로 커피스크립트를 설치할 수 있습니다. 윈도우즈에서 글로벌로 설치하는 npm은 <span style="color: rgb(255, 118, 53);">C:\Users\사용자명\AppData\Roaming\npm\node_modules</span> 아래에 설치되고 자동으로 환경변수까지 잡혀 있으므로 위처럼 바로 coffee 명령어를 사용할 수 있습니다.<br><p><strong><a href="https://blog.outsider.ne.kr/726?commentInput=true#entry726WriteComment">댓글 쓰기</a></strong></p>CoffeeScript의 빌드도구 CakeOutsiderhttps://blog.outsider.ne.kr/7122011-11-05T04:05:30+09:002011-11-05T04:05:30+09:00Unix에서는 빌드자동화를 위해서 <a href="http://en.wikipedia.org/wiki/Make_%28software%29" target="_blank">Make</a>라는 도구를 보통 사용합니다. 어떤 빌드작업이 필요할때 Makefile이라는 파일을 두고 make명령어를 실행하면 Makefile에 정의된 빌드가 자동으로 실행됩니다. 빌드를 어떻게 해야한다고 설명하는 대신에 간단히 사용할 수 있는 것인데 커피스크립트에도 이러한 빌드 도구가 포함되어 있습니다.<br><br>웹브라우저에서 커피스크립트 컴파일러만 불러들여서 사용한다면 쓸 수 없지만 Unix기반에서는 보통 Node.js와 함께 npm을 이용해서 커피스크립트를 설치하기 때문에 이렇게 설치할 경우 커피스크립트의 빌드도구인 Cake를 사용할 수 있고 Cake의 파일은 Cakefile입니다.(Make를 Cake로 바꿔서 Make를 연상시킬수 있으면서 커피와 케이크라니 네이밍 센스가 참 좋군요.)<br><br><span style="color: rgb(204, 153, 0);">Cakefile은 cake명령어로 실행할 수 있으며 cake를 실행하는 위치에 Cakefile라는 파일이 존재하면 됩니다. </span>파일이 없을 경우 오류가 납니다. 커피스크립트를 NPM으로 글로벌설치를 하였다면 자동으로 Cake로 설치가 됩니다. Cake의 사용법을 보기 위해서 다음과 같이 간단한 Cakefile을 만들어 보겠습니다.<br><br><pre class="line-numbers"><code class="language-javascript">
task 'helloworld', 'echo hello world', ->
console.log 'Hello World'
</code></pre><br>task라는 이름으로 해야할 작업을 정의해 주면 되는데 다음과 같은 형식으로 정의합니다.<br><br><div style="margin-left: 40px;"><span style="color: rgb(255, 118, 53);">task 테스크이름, 테스크설명, 실행할함수</span><br></div><br>그래서 위 코드는 helloworld라는 테스크는 console.log로 "Hello World"라고 출력해 주도록 정의한 것입니다.<br><br><pre class="line-numbers"><code class="language-shell">
$ cake
cake helloworld # echo hello world
$ cake helloworld
Hello World
</code></pre><br>다른 파라미터없이 커맨드라인에서 cake 명령어를 실행하면 Cakefile에 정의된 테스크의 리스트를 출력해 줍니다. 그리고 cake helloworld를 실행하면 해당 테스크에 정의된 함수가 실행되는 것을 볼 수가 있습니다. <span style="color: rgb(204, 153, 0);">Cakefile은 사실 커피스크립트 파일이기 때문에 커피스크립트 문법을 그대로 사용할 수 있으며 Node.js까지 같이 사용하면 필요한 작업은 어떤 것이든 할 수 있습니다.</span> task정의는 사실 task라는 함수에 파라미터 3개를 넘겨준 것이고 실행되면 마지막 파라미터의 콜백함수가 실행되는 것입니다.<br><br>커피스크립트를 자바스크립트 파일로 컴파일 해주는 다음과 같은 빌드작업을 자동화 할 수도 있습니다.<br><br><pre class="line-numbers"><code class="language-javascript">
{exec} = require 'child_process'
task 'build', 'Build project from src/*.coffee to lib/*.js', ->
exec 'coffee --compile --output lib/ src/', (err, stdout, stderr) ->
throw err if err
console.log stdout + stderr
</code></pre><br>task build를 실행하면 src 폴더에 있는 모든 커피스크립트 파일을 자바스크립트로 컴파일해서 lib 폴더에 두게 됩니다. {exec} = require 'child_process'는 커피스크립트의 Destructuring Assignment 기능입니다. 예를 들면 {a, b} = {a:1, b:2}를 실행하면 자동으로 a변수에는 1이 b변수에는 2가 할당되는 것이므로 exec = (require 'child_process').exec와 동일합니다. exec를 이용하면 커맨드라인에서 사용하는 명령어를 그대로 실행시킬 수 있습니다.<br><br>커피스크립트의 <a href="https://github.com/jashkenas/coffee-script/wiki/%5BHowTo%5D-Compiling-and-Setting-Up-Build-Tools" target="_blank">위키를 참고</a>하면 더 많은 예제에 대해서 확인할 수 있습니다. 사실 저는 쉘로 컴퓨터를 배우진 않았기 때문에 Makefile을 잘 사용하지는 못하는데 커피스크립트로 원하는 로직을 만들어서 쉽게 실행할 수 있으니 작업을 자동화하기에 꽤나 편하군요.<br><p><strong><a href="https://blog.outsider.ne.kr/712?commentInput=true#entry712WriteComment">댓글 쓰기</a></strong></p>FRENDS JSAF에서 발표한 CoffeeScript - What's Good 발표자료Outsiderhttps://blog.outsider.ne.kr/7042011-10-11T01:21:51+09:002011-10-11T01:21:51+09:00저번에도 <a href="http://blog.outsider.ne.kr/678" target="_blank">커피스크립트 발표자료</a>를 공개한 것처럼 현재 <a href="http://frends.kr/" target="_blank">FRENDS</a>에서 JavaScript Application Framework 스터디를 하고 있는데 거기서 커피스크립트쪽을 맡아서 진행하고 있습니다. 저번에 발표하고 다른 프레임워크들을 돌아보다가 다시 커피스크립트 차례가 돌아와서 발표한 내용입니다.<br><br><div style="width:510px" id="__ss_9632214"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/rockdoli/coffeescript-whats-good" title="Coffeescript - what's good" target="_blank">Coffeescript - what's good</a></strong> <object id="__sse9632214" width="510" height="426"> <param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=coffeescript-whatsgood-111010103948-phpapp02&stripped_title=coffeescript-whats-good&userName=rockdoli" /> <param name="allowFullScreen" value="true"/> <param name="allowScriptAccess" value="always"/> <embed name="__sse9632214" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=coffeescript-whatsgood-111010103948-phpapp02&stripped_title=coffeescript-whats-good&userName=rockdoli" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="510" height="426"></embed> </object> <div style="padding:5px 0 12px"> View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/rockdoli" target="_blank">Outsider</a> </div> </div><br>지난번엔 기초적인 문법에 대해서 발표를 하였지만 이번에는 많은 고민을 하였습니다. 커피스크립트로 여러가지 프로젝트를 진행해 보았다면 이런저런 경험들을 나눌 수 있었겠지만 현실은 그러지 못했고 커피스크립트는 사실 그냥 자바스크립트로 컴파일되는 언어이기 때문에 커피스크립트로 뭔가는 만드는 것을 보여준다는 것도 그냥 자바스크립트로 만들어 보는 것과 다름없기 때문에 설명하기가 약간 애매했습니다.<br><br>그래서 커피스크립트가 얼마나 코드를 직관적이고 간결화되는가에 대한 비교를 좀 하고 관련한 도구들을 설명해 주는 정도로 방향을 잡았습니다. 개인적으로 커피스크립트에 대한 판단은 현재로썬 그리 나쁘게 보고 있지는 않고(최근에 괄호나 세미콜론이 없는 문법에 대해서 많이 긍정적이 되었기에...) 완전한 판단은 커피스크립트가 더 익숙해 질 때까지 미루려고 합니다. ㅎ<br><p><strong><a href="https://blog.outsider.ne.kr/704?commentInput=true#entry704WriteComment">댓글 쓰기</a></strong></p>Firebug 콘솔에서 CoffeeScript 사용할 수 있는 AcebugOutsiderhttps://blog.outsider.ne.kr/7032011-10-10T03:16:26+09:002011-10-10T03:16:26+09:00파이어폭스에는 많은 개발관련 애드온이 있지만 그중에서도 <a href="http://getfirebug.com/" target="_blank">Firebug</a>가 돋보적입니다. 그래서 파이어폭스를 위한 애드온이 아닌 <a href="http://getfirebug.com/wiki/index.php/Firebug_Extensions" target="_blank">파이어버그를 위한 애드온</a>도 많이 있는데 <a href="https://addons.mozilla.org/en-US/firefox/addon/acebug/" target="_blank">Acebug</a>도 그중 하나입니다. Acebug는 사실 커피스크립트를 위한 애드온은 아니고 파이어버그의 기능을 강화시켜주는 애드온입니다.<br>
<br>
<br><br>
<font style="font-weight: bold;" size="5">Acebug 사용하기</font><br>
<br>
<div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1305876359.gif" alt="파이어버그 멀티라인 콘솔" height="250" width="475" /></div><br>
위는 기본 파이어버그의 멀티라인 콘솔의 모습입니다.<br>
<br>
<div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1182405843.gif" alt="에이스버그 멀티라인 콘솔" height="247" width="478" /></div><br>
위는 Acebug를 설치한 후의 파이어버그 멀티라인 콘솔의 모습니다. 보는 바와 같이 콘솔에서 코드 하일라이트를 해주기 때문에
코드를 보기가 더욱 쉬워 집니다. 그리고 아래쪽에 보면 버튼배열이 약간 달라진 것을 볼 수 있습니다. 우측을 보면 스크립트를
저장하거나 기존에 작성해 놓은 스크립트 파일을 로드해서 실행할 수 있습니다.<br>
<br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1226447156.gif" alt="에이스버크의 코드오류 표시" height="103" width="312" /></div><br>
그리고 스크립트에 대한 오류를 체크해줘서 오류나 경고가 있을 경우 콘솔의 좌측에 표시를 해 줍니다.<br>
<br>
<div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1056782054.gif" alt="에이스버그의 console.dir 버튼" height="249" width="424" /></div><br>
그리고 Dir 버튼이 있는데 일반적으로 실행을 하면 코드를 실행한 결과만 나오기 때문에 console.log를 보통 사용합니다.
하지만 console.log는 그냥 객체만 찍어주기 때문에(물론 파이어버그는 좋기 때문에 클릭하면 객체의 내용을 볼 수
있습니다.) console.dir을 사용하면 JSON객체를 테이블형식으로 출력해 해 주는데 일일이 console.dir을 써줄필요
없이 결과 객체를 console.dir로 찍어주도록 해줍니다.<br>
<br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1368656593.gif" alt="에이스버그의 환경설정" height="411" width="332" /></div><br>
Acebug의 설정을 보면 세부사항에 대해서 설정할 수 있고 콘솔에 대한 테마와 키바인딩을 vi나 emacs로 바꾸어 줄 수도 있습니다.<br>
<br><br>
<br>
<font style="font-weight: bold;" size="5">CoffeeScript 사용하기</font><br>
커피스크립트는 아직은 문법이 생소하기 때문에 제대로 동작하는지 테스트해보아야 할 일이 많습니다. node.js를 사용하는
환경이라면 커피스크립트를 설치해서 REPL을(별로 좋지는 않지만) 사용할 수 있지만 간단히 코드를 테스트해볼때 쉽게 사용할 수
없는 콘솔이 없는 것을 매우 불편한 일입니다. 저같은 경우는 커피스크립트를 테스트해 보려면 CoffeeScript의 공식사이트의 <a href="http://jashkenas.github.com/coffee-script/" target="_blank">Try CoffeeScript</a>를 사용하곤 합니다. 하지만 Acebug를 사용하면 파이어버그 콘솔에서 커피스크립트를 사용할 수 있습니다.<br>
<br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1266122165.gif" alt="에이스버그의 프롬프트 진입화면" height="220" width="221" /></div><br>
콘솔에서<span style="color: rgb(255, 118, 53);"> Shift + Enter</span>를 입력하면 Prompt에 들어가고 위처럼 <span style="color: rgb(255, 118, 53);">#>></span>표시가 나오면서 Prompt에 진입했음을 알려줍니다.<br>
<br>
<div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1229033065.gif" alt="에이스버그에서 커피스크립트를 사용한 화면" height="197" width="550" /></div><br>
프롬프트에 <span style="color: rgb(255, 118, 53);">lang=cf</span> 를 입력하고 커피스크립트를 입력하면 커피스크립트를 사용할 수 있습니다.<br><p><strong><a href="https://blog.outsider.ne.kr/703?commentInput=true#entry703WriteComment">댓글 쓰기</a></strong></p>CoffeeScript 지원을 위한 Vim 플러그인 : vim-coffee-scriptOutsiderhttps://blog.outsider.ne.kr/6862011-08-29T02:31:43+09:002011-08-29T02:31:27+09:00커피스크립트를 본격적으로 익혀보려고 하니 개발환경 셋팅이 필요했습니다. <a href="http://www.aptana.com/" target="_blank">Aptana Studio</a>같은 경우는 최신버전에 CoffeeScript 지원이 들어갔지만 Vim에서는 확장자가 .coffee 이기 때문에 커피스크립트 지원을 위한 환경설정이 필요했습니다. 다행히도 <a href="https://github.com/kchmck" target="_blank">Mick Koch</a>이라는 사람이 커피스크립트 지원을 위한 <a href="https://github.com/kchmck/vim-coffee-script" target="_blank">vim-coffee-script</a> 플러그인을 만들어 놓았습니다.<br><br>단순히 <span style="color: rgb(204, 153, 0);">Syntax Highlighting뿐만이 아니라 커피스크립트 컴파일을 위한 다양한 기능을 제공하고 있기 때문에 Vim에서 커피스크립트를 사용하는데 꽤나 유용합니다.</span><br><br><br><br><font style="font-weight: bold;" size="5">vim-coffee-script 설치하기</font><br>설치는 간단한 편입니다. <a href="https://github.com/kchmck/vim-coffee-script" target="_blank">Github 저장소</a>에서 <a href="https://github.com/kchmck/vim-coffee-script/zipball/master" target="_blank">파일을 다운</a>받아서 압축을 풀어 홈디레토리의 .vim 폴더 아래에 복사만 해주면 됩니다. 새로운 수정버전의 경우도 같은 방식으로 복사를 해주면 됩니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1130677308.gif" alt="커피스크립트가 지원되지 않는 Vim" height="466" width="550" /></div><br>기존에는 커피스크립트를 지원하지 않았기 때문에 위처럼 .coffee 파일을 열면 아무런 효과도 없이 위처럼 나타납니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1381467766.gif" alt="커피스크립트의 신텍스 하일라이트가 나타난 화면" height="458" width="550" /></div><br><span style="color: rgb(204, 153, 0);">vim-coffee-script를 설치하고 나면 위처럼 Syntax Highlighting이 됩니다. 이 파일은 단순히 자바스크립트 파일을 확장자만 .coffee로 바꾼 것이기 때문에 커피스크립트 문법에 맞지 않은 부분은 빨간색으로 오류표시까지 해줍니다.</span> <a href="https://github.com/kchmck/vim-coffee-script" target="_blank">vim-coffee-script 가이드</a>에는 Pathogen라는 것을 이용한 설치도 가이드하고 있지만 저는 Pathogen를 써본적이 없어서 그냥 간단히 복사로 설치했습니다.<br><br><br><br><font style="font-weight: bold;" size="5">CoffeeMake로 컴파일하기</font><br>커피스크립트 파일을 컴파일하기 위해서는 CoffeeMake 명령어를 사용합니다.<br><br><div style="margin-left: 40px;"><span style="color: rgb(255, 118, 53);">:CoffeeMake</span><br></div><br>vim에서 위처럼 명령어를 실행하면 아래 화면처럼 화면이 전환되면서 컴파일 여부를 알려줍니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1083451375.gif" alt="컴파일 결과 화면" height="284" width="372" /></div><br>이렇게 컴파일을 하면 같은 파일명의 .js를 만들어 줍니다. demo.coffee였다면 컴파일된 demo.js 파일이 만들어집니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1203128630.gif" alt="오류가 있을 경우에 컴파일결과 화면" height="208" width="550" /></div><br>만약 커피스크립트에 오류가 있다면 컴파일 실패의 결과를 위처럼 알려줍니다. 만약 위처럼 컴파일 하는데 vim의 화면이 전환되는 것을 원치 않는다면 아래의 명령어를 사용합니다.<br><br><div style="margin-left: 40px;"><span style="color: rgb(255, 118, 53);">:silent CoffeeMake! | cwindow 2</span><br></div><br>이렇게 사용하면 아래처럼 화면의 하단에 컴파일에 대한 결과를 간단하게 알려줍니다.<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1161895207.gif" alt="Vim하단에 컴파일 결과가 나타난 화면 " height="210" width="436" /></div><br>CoffeeMake 명령어를 통해서 컴파일을 할 수 있지만 저 같은 경우에는 처름에 CoffeeMake 명령어가 없는 명령어라고 나타났습니다. 이 문제는 이유는 잘 모르겠지만 플러그인이 제대로 동작하지 않아서 발생한 문제인듯 합니다. CoffeeMake명령어를 사용하지 못할 경우에는 vim에서 <span style="color: rgb(255, 118, 53);">:filetype </span>을 입력해서 내용을 확인합니다. 저같은 경우는 <span style="color: rgb(255, 118, 53);">filetype detection:ON plugin:OFF indent:ON</span>라고 나타났는데 plugin부분이 OFF로 되어 있습니다.<br><br><span style="color: rgb(255, 118, 53);">.vimrc</span>파일에 <span style="color: rgb(255, 118, 53);">filetype plugin on</span>를 추가해줌으로써 이 문제를 해결할 수 있습니다. 만약 <span style="color: rgb(255, 118, 53);">:filetype</span>의 결과가 <span style="color: rgb(255, 118, 53);">filetype detection:ON plugin:OFF indent:OFF</span>처럼 나온다면 <span style="color: rgb(255, 118, 53);">filetype plugin indent on</span>과 같이 넣어주면 됩니다.<br><br>추가적으로 일일이 CoffeeMake 명령어를 사용하지 않고 저장할 때마다 자동으로 컴파일을 해서 .js파일을 만들어주기를 원한다면 아래 라인을 <span style="color: rgb(255, 118, 53);">.vimrc</span>파일에 추가해 줍니다.<br><br><div style="margin-left: 40px;"><span style="color: rgb(255, 118, 53);">au BufWritePost *.coffee silent CoffeeMake! -b | cwindow | redraw!</span><br></div><br>이제 .coffee파일을 수정하고 저장할때마다 바로 컴파일을 하고 그 결과를 알려줍니다. 컴파일 오류가 없을 결우는 바로바로 .js파일로 컴파일 됩니다.<br><br><br><br><font style="font-weight: bold;" size="5">CoffeeCompile로 컴파일 테스트 하기</font><br><br><div style="margin-left: 40px;"><span style="color: rgb(255, 118, 53);">:CoffeeCompile</span><br></div><br>위와같이 Vim에서 CoffeeCompile를 하면 커피스크립트의 컴파일 결과를 즉석에서 확인할 수 있습니다. <br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1211604288.gif" alt="JS 컴파일 결과가 나타난 화면 " height="228" width="201" /></div><br>커피스크립트 코드를 작성하고 CoffeeCompile을 하면 위처럼 JavaScript로 컴파일된 결과를 확인할 수 있습니다. <br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1186899947.gif" alt="세로로 분할되어서 JS컴파링 결과가 나타난 화면 " height="191" width="468" /></div><br><span style="color: rgb(255, 118, 53);">:CoffeeCompile vert </span>명령어를 사용하면 위처럼 세로로 분할하여 컴파일 결과를 확인할 수 있게 해줍니다.(커피스크립트가 왼쪽에 나왔으면 좋겠는데 이상하게 저는 오른쪽에 나오는군요 ㅠㅠ)<br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1240112268.gif" alt="사용자 삽입 이미지" height="244" width="469" /></div><br><span style="color: rgb(255, 118, 53);">:CoffeeCompile watch vert</span> 처럼 watch 옵션을 주면 <a href="http://jashkenas.github.com/coffee-script/" target="_blank">공식사이트의 Try CoffeeScript</a>처럼 Live로 커피스크립트의 컴파일 결과를 확인할 수 있습니다. 커피스크립트에 새로운 코드를 작성하면 바로 자바스크립트로 변환해서 보여줍니다.(세로 분할창 간의 커서 이동은 ctrl + w로 할 수 있습니다.)<br><br><br><br><font style="font-weight: bold;" size="5">CoffeeRun으로 커피스크립트 실행하기</font><br><span style="color: rgb(255, 118, 53);">:CoffeeRun</span> 명령어를 사용하면 vim에서 커피스크립트를 실행해 볼 수 있습니다. <br><br><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1043246339.gif" alt="커피스크립트에서 CoffeeRun을 실행하는 화면 " height="153" width="275" /></div><div class="imageblock center" style="text-align: center; clear: both;"><img src="//blog.outsider.ne.kr/attach/1/1262818856.gif" alt="커피스크립트 실행결과가 나온 화면" height="152" width="369" /></div><br>위처럼 커피스크립트를 실행한 결과를 Vim내에서 확인해 볼 수 있습니다.<br><br>좀더 자세한 내용은 <a href="https://github.com/kchmck/vim-coffee-script" target="_blank">vim-coffee-script의 가이드</a>를 확인하면 됩니다.<br><p><strong><a href="https://blog.outsider.ne.kr/686?commentInput=true#entry686WriteComment">댓글 쓰기</a></strong></p>