2013년 2월 20일 수요일

Meteor server-side debugging Tip

Meteor는 수정할때마다 소스를 다시 생성하는 방법이라서 기존 IDE상에서 node.js 디버깅은 어렵다.
하지만 방법이 없는 건 아닌데 의외로 간단하니 breakpoint나 watch가 필요한 경우 잘 보고 적용해보도록 하자.

사실 Meteor 에서 지원하는게 아니라 node 자체의 debugging 옵션을 사용하는 것인데
환경 변수 하나를 설정한다.

export NODE_OPTIONS='--debug'

그리고 meteor(혹은 mrt)서버를 시작한다.
시작할때 로그를 보면


Running on: http://localhost:3000/
debugger listening on port 5858

5858포트로 디버거를 열었음을 확인할 수 있다.(default:기본값이 5858)
만일 특정포트로 열고자 하면

export NODE_OPTIONS='--debug=47977'

이런 식으로 하면 된다.
그리고 자신이 애용하는 node debugger로 보면 된다.
node-inspector(https://github.com/dannycoates/node-inspector)나 node-webkit-agent (https://github.com/c4milo/node-webkit-agent)같은 걸 사용하면 되겠다.


webstorm을 사용한다면 Run/Debug Configuration으로 가서 설정하면 된다.
node-inspector를 설치하고 해당 meteor 프로젝트가 있는 경로에서
터미널에 wstorm . 과 같이 커맨드라인 실행을 했다는 가정이다.
(커맨드라인 실행은 webstorm > tools > Create Launcher Script 에서 지정한 name으로 할 수 있다)
그리고 Command Line Tools Console 에서 node-inspector나 node-webkit-agent 를 띄워서 본다.

내 경우엔 브라우저에서 창을 왔다갔다 하는게 불편해서 remote debugger 를 하나 더 띄웠다.
(http://youtrack.jetbrains.com/issue/WEB-6264#comment=27-445048& 내용참조)

위와 같이 하나 더 설정을 만들고 실행
methods에 breakpoint 를 걸고 watch 로 인자값을 살펴보았다.
경로가 프로젝트 경로가 아니라 .meteor/local/bin/app 아래인 점에 주목.

2013년 2월 11일 월요일

intelliJ IDEA 12에서 flash + starling framework 시작하기

내가 어쩌다 이 글을 쓰게 된건지는 모르겠지만 나를 위해 일단 기록을 남긴다.

요새 Flash에 관심이 가서 보던 중 intelliJ IDEA 12에서 Flash/Flex지원을 기본으로 한다는 이야기를 듣고 바로 알아보기로 함.
Preference > Plugins를 보았다.

있다!

맨바닥에서 하는 건 싫으니까 조금 찾아봤더니 Starling이니 Feather니 하는 것들을 발견.
일단 둘다 clone 하고 보자 zip 파일로 받아놓는 것도 좋지만 업데이트 편하게
library 디렉토리 하나 만들고
git clone git://github.com/PrimaryFeather/Starling-Framework.git
git clone git://github.com/joshtynjala/feathers.git
Flex SDK도 받아놓자. 현재 4.6버전임
http://www.adobe.com/devnet/flex/flex-sdk-download.html
iOS Simulator 를 돌리려면 (OS X전용) Air SDK 3.3 이상이 있어야한다고 하니 이것도 받자.
http://www.adobe.com/devnet/air/air-sdk-download.html

준비는 다 되었다. 이 다음은 친절한 분이 잘 정리해놓으셨네.
http://wiki.starling-framework.org/manual/project_setup

이걸보고 하나씩 해본다.
Project Structure로 가서
Platform Settings > SDKs 를 찍고 +를 눌러서 Flex SDK를 선택
받아놓은 Flex SDK 경로를 설정하고
추가 후 Document 를 위해 Documentation Paths 탭을 선택 +지구본 모양 아이콘을 클릭.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/를 추가하자.
자동으로 URL을 따주는 것 같기도 하고 아닌것 같기도 하고 가물가물

그리고 Platform Settings > Global Libraries를 찍고
+ 눌러서 starling 라이브러리를 추가하자.
경로는 [CLONE 한 디렉토리]/starling/src를 선택.
*.swc 파일을 쓰거나 매번 프로젝트를 만들때 Project Settings > Libaries 에서 Raw ActionScript Library로 추가해도 되지만 귀찮으니까 Global로.

File > New Project를 선택해 프로젝트를 만들어 보자. 프로젝트 이름은 starlingEx 이라고 줬다.(아래 그림처럼 starling 이라고 하면 안된다! 이름이 겹치니까!!)
12버전에선 조금 편해졌나보다.
그냥 Flash Module 선택하고 시작하면 된다.
프로젝트명을 적고 Next
나는 모바일에 관심이 있어서 하는 거니까 Target platform은 Mobile로
그리고 Pure ActionScript 에 체크.

프로젝트 생성 후
다시 Project Structure / Platform Settings / Global Libaries 에 추가했던 starling 라이브러리를 선택 후 Add to Modules 에 현재 생성한 프로젝트의 모듈명을 선택한다.
여기까지 오케이.

이 상태로 해도 일단 빌드와 실행은 가능하지만 Starling 라이브러리를 사용한 경우 오류를 renderMode 오류가 날 수 있으므로 기본 xml을 만들어준다.
Application descriptor 에서 Custom template을 선택 후 create 버튼을 누르면 나오는 화면에서 AIR application descriptor 를 생성하자. 이것 때문에 한참 해멨다;

아마 기본으로 src/StarlingEx.as 파일이 생성되면서 내용은 아래와 같을 것이다.

package {
import flash.display.Sprite;
import flash.text.TextField;
public class Starling extends Sprite {
    public function Starling() {
        var textField:TextField = new TextField();
        textField.text = "Hello, World";
        addChild(textField);
    }
}
}
실행해보면 잘된다. 이제 기본 flash 패키지가 아니라 starling 을 이용하여 만들어본다.
우리 인도아저씨 http://gamua.com/starling/first-steps/ 튜토리얼 보고 해보자.


package {

import flash.display.Sprite;

import starling.core.Starling;

public class StarlingEx extends Sprite {
    private var mStarling:Starling;
    public function StarlingEx() {
        mStarling=new Starling(Game, stage);
        mStarling.start();
    }
}
}
메인인 StarlingEx.as를 만들고 Game 클래스도 만들자.

package {
import starling.display.Sprite;
import starling.text.TextField;

public class Game extends Sprite {
    public function Game() {
        var textField : TextField = new TextField(100,100,"Hi, Hello");
        addChild(textField);
    }
}
}
실행해본다.

만일 이렇게 오류가 난다면 wmode 가 제대로 지정되지 않았다는 소리다. 위에서 만든 xml을 파일을 열어보자.
*-app.xml 로 끝나는 형식으로 만들었을 것이다.
renderMode 가 주석으로 막혀있는 것을 gpu로 지정하자.
저장하고 다시 실행.

정상적으로 나오는 것을 확인할 수 있다.

참고한 페이지들: