최근 개인적으로 API서버를 만들 일이 있어서 뭘로 해볼까 하다가 이 놈으로 정했는데요. 일단 가볍게 써 본 결과로는 만족합니다. 기존 NodeJS에서 인기 있었던 WebFramework인 Express보다 더 맘에 드네요. 사실 요즘 MVC Framework는 다 잘 되어 있어서 어떤 걸 써도 다 만족하겠지만요.

Nodejs를 좋아하는 게 일단 웹개발을 많이 해봐서 Javascript가 좀 익숙하기도 하고, npm이라는 것이 있어서 손쉽게 설치할 수 있는 게 좋더라구요. 하지만, 콜백 지옥에 빠지면 답이 없긴함 ㄷㄷ 아직 언어를 익숙하게 잘 짜지 못하는 것이기도 하지만요ㅠ

그렇게 NodeJS용 Framework를 찾다보니 Sails라는 것을 찾게 되었네요.


http://sailsjs.org/#/


1. Sails 특징

모델과 컨트롤러 파일만 만들어도 자동으로 RestAPI를 만들어줍니다. BluePrint라는 것이 그렇게 하는 것 같은데, 처음엔 우와!!! 하는데, 사실 그대로 쓰이는 API는 거의 없죠. 나중에 분명 수정해야할 겁니다-_- 기본적인 CRUD를 코드 한 줄 없이 가능하게 해요.

ORM같은 것을 지원합니다(Waterline이라는 것!). 모델파일만 잘 작성하면 테이블도 직접 만들어줍니다. 모델 관계도 잘 지정하면 테이블끼리 외래키로 잘 연결해줍니다. 

다양한 DB를 제공하네요. MySQL, MongoDB, PostgreSQL, Redis, local disk 등을 제공하는데, 모델은 똑같이 사용이 가능한 것 같아요. 일단 저는 MySQL로 밖에 하지 않아서...

WebSocket을 쉽게 쓸 수 있어요. 그냥 프레임워크에 포함이 되어 있어요.

보안적인 면을 신경을 많이 썼더라구요. 웹은 개발하면서도 보안에 취약해지기에 마련인데, 최대한 놓치지 않으려고 많은 장치를 해놨어요. Cross-Origin Resource Sharing (CORS), Cross-site request forgery (CSRF) 등등 옵션들을 제공하고 있어요. 

커맨드라인 제너레이터도 제공을 해요. 간단히 테스트해볼 것은 console로 가능하고, 모델, 컨트롤러, API 생성기를 제공해요.

그 외에 레일즈처럼 asset compile도 하고, test도 쉽게 할 수 있으며, 웹프레임워크의 기본적인 것들인 국제화 처리, 라우터, 업로드, 뷰레이아웃 기능들을 제공하고 있습니다.


2. 또 다시 나온 소녀시대 스케줄 예제

설명하는 것보다 그냥 예제로... 간단하게 MySQL이랑 연동해서 DB데이터를 연결해서 뿌려주는 예제를 만들겠습니다. 모델도 소녀시대와 스케줄은 1:N으로 테이블 설계를 하겠습니다.

2-1. Sails설치

당근 Node.js와 npm이 설치가 되어 있다는 가정하에....(아래 링크에 참조를...)
http://sailsjs.org/#/getStarted

sails는 글로벌 옵션을 줘서 실행해서 언제 어디서든 프로젝트를 만들 수 있게 합니다.

npm install -g sails


2-2. Sails 프로젝트 생성

sails new 프로젝트명 쓰면 레일즈처럼 필요한 파일들을 미리 만들어줍니다.

sails new sosi-schedule-sails


2-3. 데이터 베이스 설정

npm으로 sails-mysql을 설치해야 합니다. package.json파일에 추가하는 게 차후에 배포할 때 좋습니다.

"dependencies": {
    .
    .
    "sails-mysql": "latest"
  }

그리고 

npm install

그러면 설치가 됩니다.

설정을 해야 하는데, config/connection.js파일을 보면 DB정보를 입력할 수 있습니다. someMysqlServer라고 되어 있는 부분이 있는데, 이걸 myMysqlServer로 바꾸죠. 내꺼니깐염. 그리고 디비정보를 입력하면 됩니다(아 내껀 MariaDB인데도 잘 되네요...).

config/connections.js

myMysqlServer: {
    adapter: 'sails-mysql',
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'sosi'
  },

그러면 기본 커넥션을 바꿔줘야하는데요. config/model.js를 열면, 기본적으로 커넥션을 어떤 것을 맺을 지 지정할 수 있습니다. 물론 모델별로 다른 커넥션을 맺을 수 있습니다. 모델별로 커넥션을 다르게 지정하면 됩니다. 일단 나는 디비가 하나니깐염.

config/models.js

module.exports.models = {
  connection: 'myMysqlServer',
  migrate: 'drop'
};

여기서 connection 이름은 우리가 지정한 내마이에스큐엘서버를 그대로 써주면 됩니다. 밑에 migrate는 뭐냐! 3가지 종류가 있는데염. 

drop: 서버를 죽였다가 다시 띄울 때마다 테이블을 다시 날려버리는 옵션입니다. 개발할 때 좋겠죠?
alter: 서버를 죽였다가 다시 띄울 때 모델에 칼럼의 변경사항을 체크해서 업데이트 해주는 옵션이고, 데이터를 살아있습니다. 이 옵션은 아직 실험적(experimental)인데요. 제가 데이터를 좀 많이 넣고 서버를 띄워보니 띄울 때마다 뭔가 알터를 하는지 서버 뜨는데 오래걸리는 현상이 발생합니다. 아직 문제가 많은 듯합니다.
safe: 서버를 죽였다가 다시 띄워도 아무것도 하지 않습니다.

적절히 골라쓰세요~


2-3. API 생성

sails는 자동으로 API를 생성해줍니다. API생성은 Model+Controller입니다. 물론 따로 생성할 수도 있습니다. API가 소녀시대 정보를 내려주는 SosiAPI와 스케줄 정보를 내려주는 ScheduleAPI를 생성합니다. 제너레이터를 이용하면 쉽게 생성할 수 있습니다. 근데 보면 사실 그냥 파일만 만들어주는거임-_-

sails generate api sosi
info: Created a new api!
sails generate api schedule
info: Created a new api! 

그러면 controllers/SosiController.js, models/Sosi.js, controllers/ScheduleController.js, models/Schedule.js가 생성이 되었습니다.

2-4. 모델 설정

모델에 attributes를 지정합니다. 여기서 One-to-Many방식으로 설정할 수 있습니다.

models/Sosi.js

module.exports = {

  attributes: {
    name: {
      type: 'string'
    },
    schedules: {
      collection: 'schedule',
      via: 'sosiId'
    }
  }
};

attributes는 말그대로 속성값(디비에서 칼럼값이지요). name이라는 속성이고 타입은 스트링임. 그리고 소녀시대는 스케줄이라는 배열을 가지게 되니 schedules로 지정하고, collection값은 스케줄, via는 sosiId(schedule의 속성값입니다)로 지정합니다. 

models/Schedule.js

module.exports = {

  attributes: {
    program: {
      type: 'string'
    },
    sosiId: {
      model: 'sosi'
    }
  }
};


2-5. 기본값 넣기 

drop방식이니까 기본적으로 서버 뜰 때 값을 넣고 시작할 수 있어요. bootstrap.js부분에 넣으면 서버가 시작할 때 실행이 되어요. 소녀시대 멤버들을 넣어볼게요.

config/bootstrap.js

Sosi.create({name: '태연'}).exec(console.log);
Sosi.create({name: '윤아'}).exec(console.log);
Sosi.create({name: '수영'}).exec(console.log);
Sosi.create({name: '효연'}).exec(console.log);
Sosi.create({name: '유리'}).exec(console.log);
Sosi.create({name: '티파니'}).exec(console.log);
Sosi.create({name: '써니'}).exec(console.log);
Sosi.create({name: '서현'}).exec(console.log);


2-6. 서버 실행

sails lift


2-7. API 잘 동작하는지 확인

기본적으로 BlueprintAPI를 제공하기 때문에 디비를 그대로 읽고 쓸 수 있는 url이 존재합니다. 

소녀시대 정보를 가져오려면 
http://localhost:1337/sosi/1 

스케줄 정보를 넣으려면 뭐 post도 되는데, get으로도 됩니다.
http://localhost:1337/schedule/create?program=무한도전&sosiId=1

다시 소녀시대 정보를 불러오면....

우오오 잘된다!

ps. 모바일앱 하나 만드려고 하는데....취약한 앱개발 공부는 안하고.....암튼, 뭐 맘에드는 프레임워크인데, 더 써봐야 알겠네요.

 
Posted by 머드초보
,
 
회사메일이 뭔가 맥용 메일 클라이언트랑 호환이 잘 안되는지 메일 푸쉬가 잘 안되어서 크롬플러그인으로 만들었습니다. 지메일용 unread 체크 표시해주는 플러그인이 있어서 거기서 영감을 받아 만들었습니다. 이게 근데 Node.js용 서버가 있어야 합니다-_- 크롬 익스텐션에서 뭔가 소켓통신이 될 줄 알았는데, 잘 안되더라구요.

그래서 chorme-extension -> Node.js서버로 읽지 않은 메일이 있는지 확인 요청 -> Node.js가 imap서버에 연결하여 읽지 않은 메일을 가져오기 방식으로 구현했습니다. 그리고 Socket.io를 쓴 이유가 커넥션을 계속 맺고 있으려고 그렇게 했는데, 최초 imap서버에 로그인하는데 오래걸려서 이미 커넥션을 맺고 있으면 읽지않은 메일 가져오는 서치는 빠르게 되더라구요. 그래서 그렇게 했는데... 음… 만들다보니 이게 최선이였…..

Node.js에서는 Socket.io를 이용해 크롬 익스텐션과 통신을 합니다.
imap서버를 지원하는 다음메일, 네이트메일, 네이버메일은 잘 되네요. 지메일도 잘 되는데, 신뢰하지 않은 애플리케이션 옵션을 꺼야지 되네요. 

1. Socket.io 프로토콜 구조

client -> server

login(id, pw, imap_server, imap_port, imap_tls)
로그인 요청. IMAP서버 연결정보를 전달해서 줌. 서버는 IMAP서버에 연결.

unseen()
읽지 않은 메일 아이디 목록 요청.

mail_info(mailId)
메일아이디로 메일정보 요청.

server -> client

connect()
클라이언트가 연결되면 전송.

login_success()
로그인 요청올 때 IMAP서버에 연결 후 이상이 없으면 전송.

unseen_result()
unseen요청이 올 때 unseen목록을 전송.

mail_info_result()
mail_info요청이 올 때 메일의 제목 및 보낸 사람 정보 전송.

server_error()
서버에서 IMAP서버에서 끊어지거나 예외 에러가 발생한 경우 전송.

대충 이렇습니다. 서버 에러가 나면 disconnect날려서 끊어버리면 클라가 다시 또 재연결을 시도합니다. 이런 식으로 좀비적으로 계속 붙어서 서버가 살아낼 때까지 연결합니다-_-
이제 실행법은 아래와 같습니다.


2. 로컬 서버 실행

서버 소스주소입니다.
RSA키키 만들고 실행하면 서버가 실행됩니다.
openssl genrsa -out rsa_1024_priv 1024
openssl ras -pubout -in rsa_1024_priv -out rsa_1024_pub
node app.js


3. 크롬확장프로그램 설치

크롬 확장프로그램 소스주소입니다.
위에서 만든 RSA키의 rsa_1024_pub키를 클론받은 소스 경로에 복사합니다.
크롬 실행 -> 설정 -> 확장프로그램 -> 개발자모드 체크 -> 압축해제된 확장프로그램 로드 후 소스 받은 경로 선택 하면 자동으로 설치가 됩니다.

4. 옵션 설정

오른쪽 상단에 표시된 크롬확장프로그램 아이콘에 오른쪽 버튼 클릭 후 옵션 선택하면 옵션이 나옵니다.

IMAP Server셋팅 대로 그대로 쓰시면 되고, 마지막 Enter WebMail Url은 크롬확장프로그램 클릭 시 이동하는 URL을 쓰면 됩니다.
저장 누르면 제대로 작동할 것입니다.

부록

Heroku서버에 올린 것과 연동된 플러그인을 크롬 웹스토어에 올렸습니다. 로컬서버 안 띄우고 제가 올린 서버와 연동되서 하는 것이긴 한데, 서버가 언제 죽을지는 모르니 참고하세요-_-

https://chrome.google.com/webstore/detail/imap-mail-checker/kbjiiglaopkgdnimdapohppnaeiocnbg?utm_source=chrome-ntp-icon

 
Posted by 머드초보
,
 

Javascript로 html5게임과 Android랑 iOS 게임을 만들 수 있는 멀티플랫폼 게임개발툴입니다. 제가 웹게임을 만드려고 알아보고 있었는데, 이게 가장 적합한 것 같네요. 게다가 같은 소스코드로 그대로 Android, iOS도 같이 빌드할 수 있습니다.

Cocos2d-x인 경우에는 c++을 이용해서 멀티플랫폼을 지원하는데,Cocos2d-x를 잠깐 해봤을 때 c++은 대학교 때 이후로 해보질 않아서 조금 어려운 점이 많았습니다. string을 다루는 법부터 시작해서 헤더파일도 다루고 그러는 것이 익숙치 않더라구요(아...쉬운 문법 언어만 해와서ㅠ). 

그래서 사이트에 가서 찾아보니 Javascript로도 개발을 할 수 있는 제품도 있더군요. 그래서 살짝 맛보기를 해보니 클래스명은 x와 서로 비슷하며 사용법 또한 비슷한데, 이것을 Javascript로만 표현을 했습니다. 문법면에서는 훨씬 쉽게 개발할 수 있을 겁니다(물론 저는 웹개발이 주여서 그게 더 쉽게 느껴지지만, c++만 한사람은 x가 더 쉽겠죠?).

간단히 다운로드 셋팅을 한 번 해봅시다. 참고로 저는 맥 이용자입니다. 윈도우에서도 되는지는 잘 모르겠네요.

0. 준비물

Apache ANT : http://ant.apache.org/bindownload.cgi
Python2.7.6 : https://www.python.org/downloads/
AndroidSDK : https://developer.android.com/sdk/index.html?hl=sk
AndroidNDK : https://developer.android.com/tools/sdk/ndk/index.html
XCode : AppStore에서 받으삼.
WebStorm: 있으면 좋음. 없으면 그냥 에디터에서 편집해도 됨 ㅇㅇ

1. Cocos2d-JS 다운로드

http://cocos2d-x.org/download
위 사이트에서 받을 수 있습니다. Cocos2d-JS를 받습니다. 아직까지는 베타버전입니다. 곧 정식버전이 나오길 ㄷㄷ. 그리고 다운로드 사이트에서는 크게 3가지를 받을 수 있는데요. Cocos2d-x, Cocos2d-JS, CocoStudio입니다. Cocos2d-x와 Cocos2d-JS는 말그대로 C++개발, JS개발 툴이구요. CocoStudio는 게임 개발할 때 필요한 Scene, UI, Animation 등을 손쉽게 개발할 수 있는 툴입니다. 유니티를 개발할 때에도 유니티개발툴에서 애니메이션, UI를 개발하는데 그것과 비슷한 것이라고 보면 됩니다.

그리고 개발하기 위해서는 웹에디터가 하나 필요한데요. 여기서 추천하는 것은 WebStorm입니다. 웹스톰이 확실히 자바스크립트 코딩할 때에는 갑이거든요. 자바스크립트 디버깅도 할 수 있고, 코드힌트 에러도 제일 잘 잡는 에디터에요. 웹개발에도 갑이고 꽤 좋은 에디터에요. 여기서 만든 에디터들은 다 좋아요. 

2. 환경 설정

환경설정은 Python으로 구현이 되어 있습니다. Cocos2d-JS압축을 풀면 setup.py파일이 나옵니다. 이걸 실행하면 NDK, Android SDK설정이 어디에 있냐고 물어보면서 그대로 대답하게 되면 그 값을 기반으로 .bash_profile에 환경변수와 패스를 저장해줍니다. NDK, SDK, ANT를 적당한 곳에 풀고 해당 패스를 물어보는 것에 적으면 알아서 .bash_profile에 넣어버립니다.
그러면 아래와 같이 자동으로 잡아줍니다.

# Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x

export COCOS_CONSOLE_ROOT=/Volumes/d/mudchobo/cocos2d-js-v3.0-beta/tools/cocos2d-console/bin
export PATH=$COCOS_CONSOLE_ROOT:$PATH

# Add environment variable NDK_ROOT for cocos2d-x
export NDK_ROOT=/Volumes/d/mudchobo/android-ndk
export PATH=$NDK_ROOT:$PATH

# Add environment variable ANDROID_SDK_ROOT for cocos2d-x

export ANDROID_SDK_ROOT=/Volumes/d/mudchobo/android-sdk
export PATH=$ANDROID_SDK_ROOT:$PATH
export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$PATH

근데 보면 버그인지 모르겠지만 ANT_ROOT는 안잡아주더군요. 그래서 그냥 ANT_ROOT는 수동으로 추가했습니다. 

# ant root
export ANT_ROOT=/Volumes/d/mudchobo/apache-ant

3. 프로젝트 생성

source ~/.bash_profile을 해서 profile파일을 다시 읽던가 아니면 터미널을 껐다켜면 해당 패스와 환경변수가 잡혀있을 겁니다. 그러면 초간단 프로젝트를 생성할 수 있습니다. COCOS_CONSOLE_ROOT가 패스에 잡혀서 cocos를 실행할 수 있습니다. 얘가 프로젝트를 만들어 줍니다. 

만들고 싶은 경로 위치로 가서 아래와 같이 실행하면 바로 만들어 집니다.

cocos new MudchoboTest -l js

new는 프로젝트 생성하라는 것이고 다음은 프로젝트 명입니다. 다음 옵션은 -l은 언어를 선택하는 건데, js로 하라는 것입니다. 그러면 바로 생성이 됩니다.

4. 실행

바로 실행하면 최초 헬로우월드 게임이 나옵니다. 실행도 cocos로 하면 됩니다.

cocos run -p web|ios|android|mac

원소스로 4가지 플랫폼을 전부다 실행해볼 수 있습니다. 올인원 겁나 좋아하는데 딱 저한테 맞는 플랫폼이네요. web으로 띄우면 서버도 자체적으로 만들어서 띄웁니다. web은 따로 컴파일이 필요없고, ios와 android는 따로 컴파일 후에 실행하게 됩니다. 시간이 조금 걸리긴 합니다.


확인해보니 websocket(socket.io모듈도 지원)도 지원을 합니다. 나중에 시간될 때 웹소켓으로 멀티유저게임을 한 번 만들어봐야겠네요. 

참고문서
http://cocos2d-x.org/docs/manual/framework/html5/v2/cocos-console/en

 
Posted by 머드초보
,
 
최근 자바스크립트가 급부상하면서 자바스크립트 관련된 책을 여러 개 읽고 있습니다. 진짜 보면서 느끼는 게 내가 지금까지 병신같이 개발해왔구나 라는 생각이 많이 드네요.

   
JavaScript자바스크립트성능최적화
카테고리 컴퓨터/IT > 프로그래밍/언어
지은이 니콜라스 자카스 (한빛미디어, 2011년)
상세보기

보니까 야후에서 YUI라는 라이브러리가 있는데, 그걸 만든 사람이 쓴 것 같아요. 그걸 만든 사람 시리즈 중에 자바스크립트 패턴이라고 있는데, 그것도 같이 보고 있어요.

일단, 다 읽어보면 매우 기본적인 내용을 바탕으로 하고 있습니다. 이렇게 쓰면 더 빠르다는 것을 주로 강조를 하며 빠르게 사용할 수 있는 여러 방법을 제시합니다. 보면 대부분 매우 간단하거나 쉽게 적용할 수 있는 내용이 많습니다. 이런 것들을 하나하나 모으면 사이트가 정말 최적화가 잘 되겠죠. 좋은 책인 것 같습니다. 그래서 우리가 만든 사이트들이 너무 느리다는 것을 이 책을 읽고 깨닫게 되었죠ㅠㅠ

1. 로딩과 실행
첫번째 장에서는 스크립트 위치와 로딩하는 순서에 대해서 간단히 얘기합니다. 보면 동적으로도 로딩하는 방법이 나옵니다. 이런 식으로도 스크립트를 삽입할 수 있는지 몰랐네요. 뭐 결론은 스크립트 태그를 포함하는 파일을 최소화하고 UI표시에 영향을 주지 않게 하는 것이 가장 큰 목적이겠네요.

2. 데이터접근
Javascript 코딩할 때 this가 짜증나서 전역변수를 선언해서 그냥 쓰거나 매번 document에 접근해서 쓰거나 뭐 이런 식의 코딩을 많이 했는데, 이런 전역변수를 계속 쓰게 되면 엔진이 스코프를 뒤지면서 계속 찾아야하니 느려진다는 것입니다. 그래서 지역변수를 주로 쓰는 것을 말하고 있고, 객체멤버 깊이도 줄여서 선언 및 사용해야 한다는 것을 설명하고 있네요.

3. DOM 스크립팅
DOM을 컨트롤하기 위해서는 DOM을 객체에서 찾거나 생성해야 해요. 찾으려면 selector를 통해 찾아야하고, 생성하려면 createElement를 통해 생성해야 해요. 그래서 이 책이 얘기하는 것은 비표준이더라도 innerHTML이나 querySelectorAll같은 함수를 활용하여 처리하는 게 빠르게 해결할 수 있는 것이라고 하네요. 그 외에 리페인트와 리플로우 개념에 대해서는 꼭 이해를 하고 가야 더욱 빠르게 dom을 추가하고 수정할 수 있다는 걸 설명하네요.

4. 알고리즘과 흐름 제어
루프는 뭐 다 비슷한데, 반복문이라면 length값 캐쉬하는 게 가장 중요합니다. 그 외에 반복횟수 줄이거나 그런 것들은 여러 프로그래밍 개발 언어에서도 충분히 적용될만한 내용이네요. 재귀함수(전 재귀가 싫어요.....-_-)에 대해서 캐쉬를 하는 메모이제이션 내용도 뭐 다른 프로그래밍 개발에도 잘 쓰이는 내용이네요.

5. 문자열과 정규 표현식
정규식은.......좀 더 공부를 해봐야겠습니다......

6. 응답성좋은 인터페이스
클릭과 동시에 반응하는 웹이야 말로 제대로 된 웹이겠지요. 뭐 html5의 내용인 웹워커 내용이 있는데, 이건 뭐 적용할 수 없죠. IE에서 지원을 안하니... 내용은 타이머를 통해 오래걸리는 처리는 처리에 맡기고 반응은 타이머콜백을 통해 빨리빨리 보이겠다는 것입니다. 근데 내용을 좀 이해할 수 없군요....-_- 좀 더 읽어봐야겠네요...

7. Ajax
일반적인 ajax내용이고, 비콘이라는 Image태그를 이용해서 서버에 보내는 재미있는 내용이 있네요. 그냥 단순히 쏘기만 할 때 좋은 듯. 그 외에 데이터포맷은 뭐가 빠른지에 대해서 설명이 되어있네요. json이 역시 짱이죠 ㅇㅇ

8. 프로그래밍 사례
eval, function 뭐 이런거 앵간해서는 쓰지말고, 객체 배열 리터럴 쓰고, 작업을 반복하지 말고, 뭐 읽어보면 매우 간단한 내용들이 있는데, 우리들이 개발하다보면 빨리 개발하다가 지나칠 수 있는 내용들이 많이 있습니다. 그리 어렵지 않으니 잘 읽고 잘 적용하면 좋을 듯 합니다.

9. 고성능 자바스크립트 애플리케이션 빌드와 배포
js 압축에 대해서 다룹니다. 뭐 압축하면 용량도 줄어들고, 변수명도 바뀌니 빨라지겠죠

10. 도구
여러 도구를 소개하고 있습니다. YUI 개발자들이라고 YUIProfiler도 소개하고... 도구는.....파이어버그, 크롬개발자 도구 이런 게 짱이죠.


PS. 크롬은 정말 성능이 좋은 것 같습니다. 그래서 제가 그지같이 개념없이 JS개발을 해도 크롬은 그걸 다 받아주며 빠르게(?) 동작시켜줘서 너무 고마웠네요. 근데, 확실히 IE에서는 느려요ㅠ 이 책을 교훈삼아 IE에서도 빠르게 동작하는 자바스크립트 개발을 해야겠네요.
 
Posted by 머드초보
,
 
Cloud9IDE는 말그대로 클라우드 IDE입니다. 웹에서 개발하고 테스트를 도와주는 웹기반 개발환경입니다. 벌써 이런 시대가 오다니 너무 멋지네요. 근데, 제한적인 것이 Node.js만 현재 웹에서 실행하고 테스트할 수 있고, php 등 다른 언어는 아직 실행은 할 수 없고 편집만 할 수 있는 듯 합니다.

그래도 Node.js는 제대로 쓸 수 있으니 완전 좋네요. 기존 git에 있는 것을 clone해서도 사용할 수 있는 듯 합니다. 일단 제가 git는 잘 모르니 새로 만드는 방법으로.....

Cloud9IDE 사이트입니다. 가입하세요~!
http://cloud9ide.com/


1. 프로젝트 생성 및 개발하기

일단 가입하고 dashboard로 들어갑니다.
거기서 좌측메뉴에서 My Projects에서 +버튼 눌러서 Create a new project를 합니다. 프로젝트 이름을 아무거나 만들고, START EDITING을 눌러서 편집을 합니다.
딱 보이는 화면이 영락없는 개발 툴 같습니다. 완전 좋네요!


이제 초간단 채팅예제를 작성할겁니다.
express와 socket.io를 이용한 예제여서 두개가 설치가 되어야 합니다. 다행히 cloud9ide에서는 npm를 지원합니다. 저기 콘솔에 입력해서 설치합니다.
npm install express
npm install socket.io

그리고 메인 javascript를 만듭니다.
app.js
var app = require("express").createServer(),
    io = require("socket.io").listen(app);

// 실제 heroku에서는 PORT를 사용. 현재 Cloud9ide에선 C9_PORT사용
var port = process.env.C9_PORT;
if (!port){
    port = process.env.PORT;
}

app.listen(port);

app.get("/", function(req, res){
    res.sendfile(__dirname + "/index.html");
});

io.sockets.on("connection", function(socket){
    socket.on("chat", function(data){
        console.log("receivedata = " + data);
        socket.broadcast.emit("chat", data);
    });
});

초간단 채팅예제입니다. 보면 socket연결이 chat으로 들어오면 바로 다른 연결된 socket에게 메세지를 그냥 전달하는 예제입니다.

index.html
<!DOCTYPE HTML>
<html>
    <head>
        <title>초간단 채팅</title>
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io.connect();
           
            $(document).ready(function(){
                socket.on("chat", function(data){
                    $("ul").prepend("<li>" + data + "</li>");
                });
               
                // 보내기 엔터이벤트
                $("#inputMessage").keyup(function(e){
                    if (e.keyCode == 13){
                        var val = $("#inputMessage").val();
                        if (val.length <= 0){
                            return;
                        }
                        send(val);
                        $("#inputMessage").val("");
                    }
                });
            });
           
            function send(message){
                socket.emit("chat", message);
                $("ul").prepend("<li>" + message + "</li>");
            }
        </script>
    </head>
    <body>
        <input type="text" id="inputMessage" name="inputMessage"/>
        <ul></ul>
    </body>
</html>

클라이언트 index.html은 그냥 메세지를 보내고 메세지가 들어오면 ul에 그려주는 내용이 다 입니다. 나 진짜 초간단 시리즈 잘 만드는 듯!

이제 run을 눌러서 실행해봅시다. 신기한 것은! 디버깅도 됩니다! 완전 짱! 그러면 아래 임시 url로 실행되는 것을 확인할 수 있습니다. "프로젝트명.cloude9ide아이디.cloud9ide.com"의 url로 확인할 수 있습니다.


2. Heroku에 배포하기

이제 잘 돌아가는 것을 확인했으면 Heroku에 배포해봅시다.
http://cloud9ide.posterous.com/introducing-heroku-support 저도 이 동영상 을 보고 따라했습니다. 두 개 다 완전 맘에 드는 서비스인데, 이렇게 합쳐질 수 있다는 것에 또 한번 감동하네요ㅠㅠ

편집 왼쪽에 Deploy라는 메뉴가 있습니다. 선택하고, +버튼을 눌러서 Choose type을 Heroku.com으로 바꿉니다. 로그인 해서  인증을 한 뒤에 Create new를 통해 프로젝트를 만듭니다. 원하는 이름으로 만들어서 ADD를 선택합니다.

일단 배포를 누르면 배포가 안될겁니다. 왜냐하면 Heroku에 배포하기 위해서 package.json파일과 Procfile이 필요하기 때문입니다.

package.json
{
    "name": "node-example",
    "version": "0.0.1",
    "dependencies": {
        "express": "2.2.0",
        "socket.io": "0.8.2"
    }
}

Procfile
web: node app.js

여기서 제가 헤맨부분이 있는데, Heroku에 배포하기 위해서는 Heroku에 key가 등록되어야 합니다. 근데, 이건 Cloud9ide에서 배포하는 것이라 Cloud9ide에서 키가 있어야 합니다. 친절하게 이것까지 고려했더라구요.
대시보드로 다시가면 "Show your SSH key"라는 부분이 있습니다. 보시면 공개키가 있습니다. 이걸 등록해줘야하는데, Heroku가 설치되어있는 PC에서 해야합니다.
Heroku설치는 여기에서...

그럼 cmd에서 C:\Users\자신아이디\.ssh\id_rsa.pub파일을 생성합니다. 기존 것은 백업해두시는 게 좋습니다. 그리고 아까 SSH key내용을 붙여넣어서 파일을 저장합니다.
그런 다음에 Heroku에 key를 등록합니다.
//이건 Cloude9ide에서 하는 것이 아니라 heroku가 깔린 자신의 PC에서 합니다.
heroku keys:add

그럼 이제 git를 통해 해당 내용을 커밋 후에 push를 하면 끝납니다.
git init
git add .
git commit -m "init"

한 뒤에, Deploy에서 생성한 곳을 선택한 뒤, deploy버튼을 눌러주면 배포됩니다.
참 쉽죠!
위에 내용을 배포한 url입니다.
http://socketiochat.herokuapp.com/

PS. 이제 로컬에서 개발하지 않아도 되는 환경이 점점 구축되어가네요! 웹 개발툴인데, 꽤 쓸만해요! 구글닥스가 쓸만하듯이요!
 
Posted by 머드초보
,