뭔 바람이 또 들었는지. 이번엔 node.js 입니다.
javascript하면 웹초창기때부터 익숙했던 대표적 client-side script였지만 요놈이 server side로 넘어가 node.js 란 이름으로 재탄생되었더군요.
node.js가 javascript라고 보기에는 무리가 있고 javascript의 문법을 차용한 server-side script로 봐야겠습니다.
뭐 암턴 관심을 가지고 요것저것 하는 도중에 server-side script이다보니 뭔가 좀 해보려면 서버가 필요합니다.
그냥 집에서 localhost로 공부만하겠다면 문제없지만 기왕에 시작한것 내 벽돌 갤럭시에서도 돌아가는 모바일 앱 하나 해보자니
node.js hosting 꽁짜를 뒤져봅니다.
역시나 있습니다 ㅋㅋ
우선 먼저 발견한 것은 AWS와 heroku.
두 가지 node.js hosting이 여기저기 비교도되고 많이 사용되는 것 같습니다.
뭐를 가지고 해볼까 고민중에 홈피가 아기자기하게 이쁜 heroku (오타쿠 스러운 분위기가 딱 맘에 듭니다 ㅋ)로 시작해봅니다.
<가격표 ㅋ. 사이트 곳곳에 오타쿠스러움이 묻어나있다~ 너무 쪽x리스럽지만 좋네~>
일단 계정을 등록하고 어딜가나 중요한 Hello World tutorial을 시작합니다.
이미 Tutorial에 나온 내용은 모두 skip하고 제가 겪은 삽질들을 몇가지 소개합니다.
#1 Tutorial Page에서 나오는 "package.json"파일의 express dependency 버전을 tutorial 그대로 입력하면 안된다!
- 막무가내로 똑같이 "2.2.0"을 설정하고 npm install을 해버리면 내가 지금 설치한 node.js 버전이 너무 높다고 안된다고 뜹니다;
당연한 이야기이지만 제가 이제 막 node.js 설치하였으니 지금 버전은 0.6.13, express module의 최신버전을 홈페이지에서 확인해보면 현재 "2.5.8".
그래서 tutorial에 나온 그대로 입력하면 안되고 버전란에 "2.5.8"라고 하던지 무난하게 "latest"라고 입력해서 진행해야합니다.
#2 git push가 Error를 뿌려준다 - "Heroku push rejected, no Cedar-supported app detected"
- 이건 Cedar-supported 란 말때문에 뭐가 있나하고 좀 당황했지만, 기존에 있던 파일 일부가 git에 add가 안되서 문제였던 것 입니다. 깔끔하게 그냥 git에 추가하고 push 하면 정상 진행됩니다.
#3 Procfile ? 요건 뭐냐?
- 아직 이게 뭔지 잘 모르겠습니다. foreman 이 사용하는 process list file이란 심증은 가지만 좀 더 서핑 잉여질 스터디가 필요합니다.(줄줄이 사탕으로 알아둬야할 잉여서핑리스트에 차곡차곡 쌓입니다. ㅋ)
일단 이것을 만들지 않고 foreman start 하면 Process list가 설정되지 않았다며 아무것도 시작하지 않습니다.
#4 내 App의 web url은 뭐야?
- heroku 는 호스팅 서비스!! 그러니 내가 App을 올렷으니 확인을 위한 url이 필요한데, 홈페이지에 불친절하게도 자세한 내용이 없습니다.(사실 언급없이 살짝 나오지만 놓치기 쉽상).
herokuapp.com의 sub domain으로 사용된는 것은 처음 heroku create cmd 생성시 만들어지는 git id가 나의 subdomain이 됩니다.
아마 그것을 보지못하고 놓쳤다면 git directory의 config 를 열어보면 heroku로 설정된 remote alias에서 찾을 수 있습니다.
http://severe-waterfall-3920.herokuapp.com
이 내 hostring url입니다. ^^*
----추가!
URL을 위에처럼 어렵게 만들어진 이유는 app create할때 app이름을 아래처럼 안넣어줘서이네요;
heroku create --stack cedar자기만의 subdomain을 app이름으로 할당가능했습니다. 아래처럼
heroku create --stack cedar <app_name>app을 create하면 http://<app_name>.herokuapp.com 로 가능합니다.
이뿌게 hello world 찍어봤으니. 그럼 뭘 해볼까~ 고민해봅니다 ㅋ
근래에 숨돌릴 수 있는 틈이 생겨서 한번 제대로 헤딩해보기로 했다.
이전에도 몇 번 Beta로 서비스 될때 Sample Project 생성해서 그 위에서 투닥여서 사용한 적은 있지만,
이번에는 Empty Project로 시작해서 맨땅에 해딩해보자~
맨땅 헤딩 Start!
----------------------------------------------------------
역시 맨땅 헤딩의 시작은 "Hello World!"
Eclipse에서 GAE Plugin을 설치하고(어떻게 설치하는지는 생략! 참조 : http://code.google.com/appengine/docs/)
Project를 생성한다( Google >Web Application Project ). 과감하게 Sample은 uncheck 하고 Finish!
눈앞에는 빈깡통 프로젝트가 생겨나는데 완전 빈깡통은 아니고 기본적인 GWT, GAE library들과 기본적인 configuration file들이 포함되서 생성된다.
그냥 바로 Run 해본다. ㅋㅋ
Missing required argument 'module[s]'
주옥같은 애러가 바로 표시된다. ㅋ
이것은 GWT실행을 위한 Module Class가 없다는 것. 당연하다 src안에 아무것도 없으니까 ㅋ
빈깡통 StudyGWT Class를 하나 만들어준다. 여기에서는 내 프로젝트명 (StudyGWT)을 기준으로 설명 ㅋ
그리고 다시 Run!
[ERROR] Unable to find 'com/nurinamu/study/gwt/StudyGWT.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?
어익후 신난다~ 또 뭔가가 떴네. 2가지 문제가 발생했다.
StudyGWT.gwt.xml이 없거나 Entry 가 포함이 안되었다는데. 난 Entry를 만든적이 없으니.
일단 빈깡통 StudyGWT class를 EntryPoint Interface를 상속하도록 변경한다.
그리고 다시 Run! 하지만 다시 같은 애러. Entry는 생성하였지만 StudyGWT.gwt.xml이 없다.
이것이 Emtpy Project생성시에 자동으로 라도 만들어지면 좋았겠지만 왜 안만들어지는 모르겠다.
그래서 결국 Hello포함된 프로젝트에서 업어와서 아래 태그만 수정
(실제 gwt.xml의 doctype은 찾지를 못했고 GWT project사이트의 Issue란에서 URL discussion만 봤고 아직 실제 url을 못봤다;; Tutorial에서도 DTD의 언급은 안보이는군.)
<entry-point class='com.nurinamu.study.gwt.StudyGWT'/>그리고 다시 Run!
그러면 Console에서 뭔가 Server가 동작하는 듯 메세지들이 찍히고 http://localhost:8888 에서 실행되었다고 찍힌다.
그럼 실행되었다니 웹브라우저에서 열어본다.
멋진 403 애러 뜬다. ㅋHTTP ERROR 403
Problem accessing /. Reason:
FORBIDDEN
왜 이럴까 찾아보면 Console msg에 답이 있다.
[WARN] No startup URLs supplied and no plausible ones found -- use -startupUrl
startupUrl을 argument로 안주어서 ㅋ 거기에다 아직 html 페이지가 하나도 작성되지 않았다.
war폴더 아래에 index.html을 하나 생성해서 "Hello World!" 작성해서 저장한다.
그리고 "http://localhost:8888/index.html"을 browser에 치면!
짜잔 하고 "Hello World!"가 반겨준다.
깔끔한 마지막 마무리를 위해 WARN에서 알려준 startupUrl을 argument로 추가한다.
-startupUrl index.html다시 Project를 실행하고 "http://localhost:8888"로 접속을 하면
알흠다운 "Hello World!"가 출력된다.
자 이제 문을 열었으니 다음은 GWT로 간단 예제를 해보도록하쟈!!
http://www.javascriptkit.com/jsref/event.shtml
다음과 같이 시작시간과 시간을 넘겨받아 사용하게 살짝 수정~
* sec : onScroll event 이후 움직이기 시작할 시간 (단위 : 밀리세컨)
* pos : 화면 Top에서부터 떨어진 위치 (단위 : pixel)
*/
function followScroll(idname,sec,pos)
{
var moveObj = eval(idname);
var yFrom, yTo, yOffset, timeoutNextCheck;
yFrom = parseInt (moveObj.style.top, 10);
yTo = document.body.scrollTop+parseInt(pos);
timeoutNextCheck = sec;
if ( yFrom != yTo) {
yOffset = Math.ceil( Math.abs( yTo - (yFrom) ) / 20 );
if ( yTo < (yFrom) )
yOffset = -yOffset;
moveObj.style.top = parseInt (moveObj.style.top, 10) + yOffset;
timeoutNextCheck = 1;
}
setTimeout ("followScroll('"+idname+"',"+sec+",'"+pos+"')", timeoutNextCheck);
}
function init()
{
var y;
divNeck_nk.style.top = document.body.scrollTop-100;
divMenu.style.top = document.body.scrollTop+200
followScroll('divNeck_nk',1,'-100');
followScroll('divMenu',1000,'230');
return true;
}
<!--body태그 로드시 호출--->
<body onload="init();">
<div id="divNeck_nk" style="position:absolute;left:500px;top:0px;z-index:3;"></div>
<div id="divMenu" style="position:absolute;left:820px;top:0px;z-index:2;"></div>
</body>