saltfactory's blog

brew update 명령어에서The following untracked working tree files 문제 해결하기

saltfactory — Tue, 05 Mar 2013 11:09:02 +0900

homebrew는 Mac에서 설치되지 않은 Unix 패키지를 관리하기 위한 툴로 맥 운영체제로 개발 연구하는 사람들에게 가장 인기 있는 툴 중에서 하나이다. 좀더 자세한 글은 "Homebrew를 이용하여 Mac OS X 에서 Unix 패키기 사용하기"를 참고하자.

MariaDB를 homebrew를 이용해서 설치하려고 그동안 homebrew 를 업데이트를 한 적이 없어서 업데이트를 하는데 다음과 같은 에러를 보이면서 업데이트가 되지 않는 문제가 발생했다.

brew update

error: The following untracked working tree files would be overwritten by merge:

Library/Formula/cmigemo.rb

Please move or remove them before you can merge.

Aborting

Error: Failure while executing: git pull -q origin refs/heads/master:refs/remotes/origin/master

brew의 저장소에 관련된 문제가 발생한 것이기 때문에 git의 정보를 변경해줘야한다. brew는 /user/local 에 Cellar라는 git 저장소를 clone하는데 git 정보를 변경하기 위해서 /usr/local로 이동을 한다.

cd /usr/local

그리고 git fetch를 하여 homebrew의 최신 header 정보를 받아온다.

git fetch origin

다음은 git의 master에 대한 정보를 강제로 reset를 시켜준다.

git reset --hard origin/master

이제 homebrew를 git 저장소로부터 소스를 받아와서 업데이트를 할 준비를 모두 마쳤다. brew update로 최신 homebrew로 업데이트르 실행하면 된다.

brew update

<참고>

1. http://stackoverflow.com/questions/10762859/brew-update-the-following-untracked-working-tree-files-would-be-overwritten-by

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

Sencha Application을 Chrome에서 file 경로로 실행하기

saltfactory — Thu, 14 Feb 2013 22:34:36 +0900

Sencha Application은 web application을 개발하는 프레임워크라는 사실을 이젠 많은 개발자들이 알고 센차터치의 잠재력을 높이 평가하고 있다. 이러한 sencha application을 실행하기 위해서는 간단하게 html 파일과 javascript, css 파일만 있으면 브라우저에서 원격지에 파일을 업로드하지 않고 실행하면서 개발을 할 수 있다. 오페라 브라우저도 webkit engine을 포용하는 지금 시점에서 웹 어플리케이션은 webkit insepector로 개발하는 것이 이젠 거의 표준인 것으로 생각하기 때문에 chrome browser로 개발을 하는 사람들이 많아졌다.

자 그럼 sencha touch 테스트를 위해서 다음과 같이 간단히 sencha touch application을 sencha command로 만들어보겠다.

$ cd $SENCHA_HOME

$ sencha generate app TestApp ../TestApp

이젠 테스트로 만든 Sencha Projects 디렉토리에서 index.html 파일을 chrome에서 열어보자.

$ cd ../TestApp

$ open -a "Google Chrome" index.html

chrome 브라우저가 열리면서 다음과 같이 Cross origin requests are only supported for HTTP 에러를 발생하면서 Sencha Application이 실행이 되지 않는다. Safari 브라우저로 열어보자

$ open -a "Safari" index.html

Safari 브라우저에서는 문제 없이 실행이 되는 것을 확인할 수 있다. 위와 같은 문제는 Chrome 브라우저에서 file 경로로 브라우저에서 열게되었을때 access file policy 제한으로 발생하는 문제이다. 그래서 Chrome 브라우저를 실행할 때 다음과 같이 옵션을 추가한다.

--args --allow-file-access-from-files

열려 있는 Chrome 프로세스를 완전히 종료를 한다. (만약 프로세스가 완벽하게 중지되지 않으면 오션을 추가해도 반영이 되지 않는다는 오류 메세지를 보게 될 것이다.) 그리고 옵션을 추가해서 Chrome을 열어보자.

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --allow-file-access-from-files index.html

이렇게 Chrome 브라우저를 열때 file access policy 제한을 풀어서 index.html을 실행하면 앞에서 봤던 문제 없이 Sencha Application을 Chrome에서 file 경로로 실행할 수 있게 된다.

<참고>

1. http://stackoverflow.com/questions/14776281/chrome-disable-web-security-cant-open-file

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

Sencha Touch에서 View 이벤트를 Controller에서 관리하기

saltfactory — Wed, 02 Jan 2013 12:03:55 +0900

Sencha Touch의 가장 큰 장점이 MVC 프레임워크 지원이 된다는 것이다. 그런데 사실 MVC라고 말해도 일부 사람들(개발자가 아니거나, 한 클래스에 모든 기능을 다 넣어두는 개발자)에게는 MVC 지원이 뭐 그리 대수냐고 말할 수 있을지도 모른다. 우리는 흔히 HTML 코드와 Javascript를 분리해서 markup에 최대한 집중하여 웹 자체를 문서로 만들어보자 라는 생각을 하고 있다. 그래서 HTML 코드 안에 onClick 대신에 javascript에서 DOM을 selector를 이용해서 접근해서 이벤트를 등록하는 코드를 만들어 사용한다. 다음 코드를 살펴보자. button이라는 HTML 엘리먼트에 모두 onclick 이벤트를 추가하는 가장 간단한 방법이다.

<!DOCTYPE html>

<html>

<head>

function onButtonClick(element) {

console.log(element.id)

}

</script>

</head>

<body>

<button id="1" class="buttons" onclick="onButtonClick(this);">button1</button>

<button id="2" class="buttons" onclick="onButtonClick(this);">button2</button>

<button id="3" class="buttons" onclick="onButtonClick(this);">button3</button>

<button id="4" class="buttons" onclick="onButtonClick(this);">button4</button>

<button id="5" class="buttons" onclick="onButtonClick(this);">button5</button>

</body>

</html>

하지만 위 코드는 뷰에 이벤트처리 코드가 포함이 되어 있다. 위 코드는 다음과 같이 HTML 코드와 이벤트 처리를 분리할 수 있다. <script>안에 코드는 script src로 외부 파일로 분리할 수 있으니 결국 이 HTML 문서에서는 이벤트에 관련된 코드를 분리해서 관리할 수 있게 된다.

<!DOCTYPE html>

<html>

<head>

function onButtonClick(element) {

console.log(element.id)

}

window.addEventListener("load", function () {

var buttons = document.getElementsByClassName("buttons");

for (var i = 0; i < buttons.length - 1; i++) {

buttons[i].addEventListener("click", function () {

console.log(this.id)

});

}

}, false);

</script>

</head>

<body>

<button id="1" class="buttons">button1</button>

<button id="2" class="buttons">button2</button>

<button id="3" class="buttons">button3</button>

<button id="4" class="buttons">button4</button>

<button id="5" class="buttons">button5</button>

</body>

</html>

위 문서에서 이벤트 처리 코드만 파일로 분리했을 경우 남게되는 코드는 다음과 같다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="1" class="buttons">button1</button>

<button id="2" class="buttons">button2</button>

<button id="3" class="buttons">button3</button>

<button id="4" class="buttons">button4</button>

<button id="5" class="buttons">button5</button>

</body>

</html>

이렇게 문서와 이벤트 처리 코드가 분리되면 문서와 이벤트의 결합도가 낮아지게 된다. 이와 마찬가지로 Sencha Touch에서도 View에 이벤트를 처리하는 코드를 Controller에서 처리할 수 있게 분리한다면 View를 관리하는 파일에서 이벤트 처리를 모두 분리할 수 있다. 이것이 MVC에서 Controller의 event firewire 기능이다. Sencha Touch에서는 Ext에서 특정 참조에 대해서 이벤트를 등록할 수 있게 되어 있다. Sencha Touch 2 (센차터치)를 이용한 웹앱 개발 - 9. 컨트롤러(Controller) 글을 참조하기 바란다.

그럼 Sencha Touch에서 Panel에 관련된 이벤트를 간단하게 Controller에서 처리하는 방법을 살펴보자.

Ext의 container에 관련된 객체들은 모두 listeners를 이용해서 이벤트를 처리를 listeners에 등록할 수 있다. 다음 코드는 Panel이 만들어질 때 발생하는 이벤트를 listeners에 등록해서 처리하는 것을 확인할 수 있다.

/**

* filename : MainPanel.js

Ext.define('Saltfactory.view.MainPanel', {

extend: 'Ext.Panel',

id: 'MainPanel',

alias: 'widget.MainPanel',

xtype: 'mainpanel',

config:{

html:'Main Panel',

listeners:{

activate:function(){

console.log('onActivate');

show:function(){

console.log('onShow');

painted:function(){

console.log('onPainted');

}

initialize: function () {

this.callParent(arguments);

}

});

위와 같이 listeners에 이벤트를 등록하면 다음과 같이 console에 로그가 남는 것을 확인할 수 있다.

이젠 View에서 처리하는 이벤트를 Controller에서 처리하도록 해보자. 먼저 activate를 controller 에 등록하는 경우이다. MainPanelController를 파일을 만들고 app.js에 다음과 같이 controller와 view 파일을 등록한다.

/**

* filename:app.js

Ext.application({

name: 'Saltfactory',

appFolder : 'js/test/app',

views: ['MainPanel'],

controllers: ['MainPanelController'],

launch: function() {

var mainView = {xtype:'mainpanel'};

Ext.Viewport.add(mainView);

}

});

그리고 view 파일인 MainPanel.js 에서 listeners를 모두 주석처리를 한다.

/**

* filename : MainPanel.js

Ext.define('Saltfactory.view.MainPanel', {

extend: 'Ext.Panel',

id: 'MainPanel',

alias: 'widget.MainPanel',

xtype: 'mainpanel',

config:{

html:'Main Panel'

// listeners:{

// activate:function(){

// console.log('onActivate');

// },

// show:function(){

// console.log('onShow');

// },

// painted:function(){

// console.log('onPainted');

// }

initialize: function () {

this.callParent(arguments);

}

});

마지막으로 Controller에서 뷰 객체를 refs에 등록하고 해당하는 refs에 등록된 객체에 control을 정의한다. View의 listeners 에 등록된 activate가 controller에 activate로 정의하고 해당하는 함수의 이름을 지정하면 refs에 등록된 객체에 이벤트 처리 핸들러가 바인딩되게 된다.

/**

* filename : MainPanelController.js

Ext.define('Saltfactory.controller.MainPanelController', {

extend:'Ext.app.Controller',

alias:'MainPanelController',

config:{

refs:{

mainPanel:'mainpanel'

control:{

mainPanel:{

activate:'onActivate'

}

onActivate:function(){

console.log('onActivate');

init:function () {

console.log('init MainPanelContorller');

launch:function () {

}

});

웹 앱을 다시 리로드 시켜보자. View에서 listeners에 등록해서 사용할 때는 view에 있는 handler 함수가 동작했지만 controller에 추가한 handler가 동작하고 있는 것을 확인할 수 있다.

이렇게 View의 event를 Controller로 분리함으로 View에는 실제 display시키는 것에만 집주할 수 있게 되고 Controller에서 이벤트와 데이터를 처리해서 View 코드의 의존성은 낮출수 있게 된다.

<참고>

1. http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller

2. http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

Ruby로 살펴보는 Mixin 이해

saltfactory — Thu, 22 Nov 2012 00:04:27 +0900

Ruby를 처음 접하게 된 것은 순수하게 컴퓨터전공을 하는 나의 학부시절 "Programming Languages Concepts"라는 과목의 과제로 조별로 각각 겹치지 않는 프로그램언어에 대한 조사를 해서 발표하는 시간 때문이였다. python, perl, xml, php, java 등 이미 익숙한 프로그래밍 언어에서 제외되어서 결국 찾게된 것이 Ruby Programming Lanaguage 였다. 처음은 그냥 이름이 마음에 들었는데 Perl과 Python의 조합으로 이루어진것 같은 이 언어는 모든게 객체인 이게 바로 진짜 객체 언어야 라고 박수를 치면서 Ruby의 매력에 점점 빠져들게 되었다. 얼마 지나지 않아서 Ruby on Rails가 scaffold를 이용해서 5분안에 블로그를 만드는 동영상이 인터넷에서 커다란 이슈를 만들었고 이후 agile 기반의 빠른 웹 개발 프레임워크로 웹 개발자들에게 가장 인기 있는 언어로 등극하게 되었다. 비록 학부 과제 때문에 Ruby를 알게 되었지만 Ruby의 빠르게 개발할 수 있고 확장성이 좋고 유연하며 코드량을 줄일 수 있다는 이유로 지금도 서버 프로그램은 대부분 Ruby로 만들고 있다.

오늘 Ruby를 다시 찾게 된 이유는 바로 Mixin 이라는 개념 때문이다. 연구소에서 Java Web Application framework로 Spring MVC framework를 선택했고 수석 연구원께서 ROO를 적극적으로 도입하려고 해서 ROO에 대해서 찾아보았다. 그러던 도중에 ROO가 Mixin으로 구현되었다는 특징을 보게 되어서 Mixin의 개념을 회고하기 위해서 Ruby의 Mixin을 소개하려고 한다.

먼저 Java에서 상위 클래스의 속성을 그대로 상속받아서 확장된 서브 클래스를 만들어 사용하는 것에 익숙하다.

Java 코드로 살펴보면 Number의 intValue 메소드를 상속받아서 BigInteger는 inteValue 메소드를 가지고 있지만, stringfy라는 value 값을 문자열로 출력하게 하는 메소드를 추가했다.

public class Number {

protected int value;

public void intValue (int value){

this.value = value;

}

public class BigInteger extends Number {

public BigInteger(int value){

super.value = value;

}

public String stringfy(){

String str = null;

if (this.value == 1){

str = "One";

} else if (this.value == 2){

str = "Two";

} else if (this.value == 3){

str = "Three";

}

return str;

}

또는 Java에서는 추상클래스를 만들고 그것을 상속받아서 구현체를 만들어 가는 것 또 한 Java 객체 지향 프로그램에 익숙한 클래스의 사용 패턴이다.

하지만 현실의 세계에서는 객체가 단일 상속만 이루어지지 않는다. 예를 들어 엄마, 아빠에게서 서로 좋은 점만 닮은 특징을 가져와서 같이 사용하고 싶은 경우가 충분히 있을 수 있다. 개발자와 디자이너의 메소드를 각각 가져와서 유니콘 같은 슈퍼개발자를 만들고 싶어한다면 Java와 같은 단일 상속만 지원하는 프로그래밍 언어에서는 절대 유니콘을 만들 수 없게 된다.

Mixin은 이러한 한계를 해결할 수 있는 개발 패턴이다. 즉 클래스에 새로운 특징을 더 추가해서 여러가지 기능을 필요한 곳에서 가져와서 새로운 클래스를 만드는 것이다. 우리가 지금까지 목말라해온 다중 상속의 문제를 아주 간단하게 해결할 수 있는 도깨비 방망이 같은 것이다.

과연 Ruby는 어떻게 이런것이 가능할까? 루비는 Class와 비슷한 Module 이라는 것을 가지고 있다. Module는 Class와 비슷하게 메소드, 상수, 모듈, 클래스를 포함할 수 있다. 그러나 Class와 달리 모듈을 상속받아서 객체를 생성할 수는 없다. 하지만 이 Module의 인스턴스 메소드를 클래스에서 사용할 수 있다. 이렇게 상속을 하지 않고도 여러개의 Class가 같은 Module을 mixin해서 사용하거나 여러개의 Module을 하나의 클래스에 mixin하여 사용할 수 있다. 위에서 작성한 Java 코드의 한계를 Ruby에서는 이렇게 해결을 하였다.

예제 코드는 Math와 Stringfy라는 두가지 Module를 가지고 있고, Number라는 클래스를 상속받아서 만든 BigInteger에 Mixin을 해서 객체에 모듈의 메소드를 추가하는 예제이다.

Math 모듈은 add라는 메소드를 가지고 있는데 두 수를 더하는 값을 BigInteger에 초기 값으로 넘겨주는 메소드이다.

# filename : Math.rb

module Math

def add(value_one, value_two)

BigInteger.new(value_one+value_two)

end

Stringfy 모듈은 stringfy라는 메소드를 가지고 있는데 @value라는 객체 변수의 값에 따라서 문자열을 반환해주는 메소드이다.

#filename : Stringfy.rb

module Stringfy

def stringfy

if @value == 1

"One"

elsif @value == 2

"Two"

elsif @value == 3

"Three"

end

Number 클래스는 inteValue라는 메소드를 가지고 있는데 이것은 @value 객체를 반환하는 메소드이다.

# filename : Number.rb

class Number

def intValue

@value

end

위의 Number 클래스를 상속해서 BigInteger 클래스를 만드는데 이 클래스에 Stringfy를 mixin하고 Math 메소드를 확장했다.

#filename : BigInteger.rb

require 'Stringfy'

require 'Math'

require 'Number'

class BigInteger < Number

include Stringfy

extend Math

def initialize(value)

@value = value

end

테스트를 해보자. 아래 코드는 단순하게 BigInteger를 사용해서 생성자에 10이라는 값을 넣고 객체를 생성해서 Number가 가지고 있었던 intValue로 @value객체 변수의 값을 출력하는 코드이다.

#filename test.rb

require 'BigInteger'

bigint1 = BigInteger.new(10)

puts bigint1.intValue

단순히 BigInteger가 가지고 있는 생성자 메소드인 initialize 에서 받은 value 값을 객체 변수 @value에 할당했다가 출력하는 Java와 같은 단순 상속의 예제이다.

다음은 Math를 Mixin으로 추가된 Math의 add를 사용해서 BigInteger 객체를 생성해보자.

#filename test.rb

require 'BigInteger'

bigint1 = BigInteger.new(10)

puts bigint1.intValue

bigint2 = BigInteger.add(-2, 4)

puts bigint2.intValue

Mixin으로 Math의 add가 실행되었는데 이 때 입력받은 두 인자값은 Math의 add 메소드안에 포함된 클래스 BigInteger.new(a+b)로 두 인자 값을 더해서 객체를 생성시키는 것이다. 그래서 결국은 BigInteger의 객체변수 @value에 두 인자를 더한 2의 값이 저장되어 있다.

여기 생성된 bigint2는 Math 뿐만 아니라 Stringfy도 Mixin되어 있기 때문에 Stringfy의 stringfy 메소드를 사용할 수 있다. 결과는 BigInteger의 객체인 bigint2의 객체변수(@value)가 2이기 때문에 Stringfy의 인스턴스 메소드 stringfy 안에 @value를 비교해서 해당 문자열을 반환하는 메소드가 실행이 된 것이다.

#filename test.rb

require 'BigInteger'

bigint1 = BigInteger.new(10)

puts bigint1.intValue

bigint2 = BigInteger.add(-2, 4)

puts bigint2.intValue

마지막 테스트로 생성된 객체에다 새로운 Module을 하나더 mixin 해보기로 하자. BigInteger로 생성한 객체 bigint2에 format이라는 메소드를 가진 Module을 Mixin했다. 그리고 bigint2에 mixin된 module의 메소드인 format으로 객체의 객체변수 @value 값 앞에 $를 붙여서 출력시키도록 했다.

#filename test.rb

require 'BigInteger'

bigint1 = BigInteger.new(10)

puts bigint1.intValue

bigint2 = BigInteger.add(-2, 4)

puts bigint2.intValue

puts bigint2.stringfy

module CurrencyFormatter

def format

"$#{@value}"

end

bigint2.extend CurrencyFormatter

puts bigint2.format

그럼 CurrecyFormatter를 Mixin하지 않은 bigint1이라는 BigInteger로 만든 객체는 과연 format이라는 메소드를 가지고 있을까? 아래와 같이 Mixin되지 않는 객체에서 format 메소드를 불렀기 때문에 에러가 발생한다.

결과가 놀랍지 않는가? 마치 JavaScript의 prototype 마냥 Module을 이용해서 무한정 메소드를 추가할 수 있게 되었다. 심지어 클래스로 생성된 객체에도 mixin이 가능하다는 것이다. 이런 이유로 Ruby는 Module과 Class를 잘 이용해서 유연하고 확정성 좋은 모듈과 라이브러리를 만들어서 쉽게 다양한 프로젝트에서 코드를 재사용할 수 있는 장점을 가지고 있다.

<결론>

객체 지향 언어의 장점은 클래스를 만들어서 다른 프로그램을 작성할 때 그 클래스를 재사용할 수 있다는 것이다. 하지만 클래스가 많아지고 여러자기 클래스의 속성들을 조합해서 하나의 클래스고 상속해서 코드도 줄이고 코드를 재사용하고 싶지만, Java와 같은 객체 지향 언어에서는 다중 상속을 할 수가 없다. 하지만 Mixin을 지원하는 객체지향 언어는 다중 클래스를 상속해서 객체를 만든는 것과 같은 방법을 Mixin을 이용해서 할 수 있다. 클래스와 객체에 여러개의 메소드를 가진 Module을 Mixin시켜서 Module이 가지고 있는 메소드를 클래스로 생성한 객체에서 멤버 메소드인것 처럼 객체의 변수와 모듈의 메소드를 서로 연결하여 하나의 클래스인것 처럼 사용 할 수 있다. 이러한 Mixin의 장점은 중복 코드를 제거하고 코드의 유연성을 높여서 기능별로 모듈을 만들어서 필요할 때 마치 레고 블럭을 맞추듯 필요한 모듈을 클래스에 조립해서 필요한 메소드를 사용할 수 있다는 것이다. ROO가 이런 Mixin으로 구현되어 있다는데 Ruby의 Mixin과 구현 방법은 다를지 몰라도 Mixin 패턴으로 개발이 되었다는 말은 클래스에 다른 모듈이나 클래스의 멤버 메소드나 멤버변수가 injection 된다는 이야기로 상상해볼 수 있을 것 같다. 좀더 자세한 내용은 ROO를 실험하고 테스트한 뒤 다시한번 Ruby의 Mixin과 비교해서 포스팅할 예정이다.

<참고>

1. http://www.silversoft.net/docs/dp/hires/chap1fso.htm

2. http://lambert.tistory.com/165

3. http://juixe.com/techknow/index.php/2006/06/15/mixins-in-ruby/

4. http://en.wikipedia.org/wiki/Mixin

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

github의 page를 이용해서 개인 사이트 구축하기

saltfactory — Wed, 21 Nov 2012 09:52:43 +0900

github는 git hosting 서비스를 넘어서 개발자의 SNS, 소셜 코딩, 코드 소스팅 등 많은 기능이 제공되는 개발 플랫폼으로 대부분의 개발자들이 가입해서 활동하고 있는 서비스이다. 트위터나 페이스북 등 영향력 있는 회사들 뿐만 아니라 국내 기업들도 오픈소스 프로젝트를 진행할 때는 github를 이용해서 코드를 배포하거나 오픈소스를 관리하기도 한다. 이러한 github.com에는 소스관리 뿐만 아니라 page 라는 기능도 포함하고 있다. 다시말해서 개인 page를 만들어서 서비스할 수 있는데 재미난 것은 github 답게 git로 page를 생성하고 관리한다는 것이다. 어떤 기업은 git로 이력서를 받는다는 이야기를 들었는데 github에서는 아마 모든 것을 git 방법으로 처리하려는 재밌는 고집 같기도 하다.

기존에 프로필 page로 http://about.me 를 이용하고 있었는데, github의 활성화를 위해서 github의 page를 생성해보기로 했다.

http://about.met/saltfactory

우선 github.com에 page를 git로 생성하고 관리한다고 했는데 이 말은 github.com에 page를 위한 repository를 등록해야한다는 것과 같은 말이다. 그래서 새로운 repository를 등록해보자. 이때 주의해야할 점은 {자신의계정}.github.com 으로 repository를 생성해야한다. 이후 github.com의 프로필 page는 http://{자신의계정}.github.com 으로 서비스 된다는 것을 생각하면 된다. github.com의 계정이 http://github.com/saltfactory 이기 때문에 http://saltfactory.githubm.com 으로 page 가 만들어지게 된다.

1. Manual 하게 github.com 개인 페이지 만드는 방법

(1) Page를 위한 Repository 추가

간단하게 저장소를 추가하면 다음과 같이 생성이 된다.

(2) HTML, JavaScript, CSS 파일 추가

이렇게 저장소가 생성되면 github에서 위 저장소를 작업하기 위해서 clone을 한다.

git clone https://github.com/saltfactory/saltfactory.github.com

이렇게 로컬에 받은 saltfactory.github.com 저장소 안에 index.html 과 javascript, css 파일을 추가하면 된다. 만약 IntelliJ와 같은 IDE를 사용하고 싶은 경우는 이 저장소를 그대로 사용하면 된다. 어떠한 IDE에도 영향 없이 개발하기 위해서 로컬에서는 IntelliJ를 이용했지만 github 소스 저장소에는 IntelliJ의 메타 파일들이 관리되지 않기 위해서 .gitignore에 IDE에 관련된 파일들을 추가해서 버전관리 되지 않게 설정했다.

테스트를 위해서 index.html에 다음과 같이 간단한 코드를 추가했다.

<!DOCTYPE HTML>

<html>

<head>

<title>saltfactory's page</title>

</head>

<body>

<h1>This page is saltfactory's github page</h1>

</body>

</html>

그리고 추가한 파일들을 staging 에 추가하고 commit 한 다음에 github.com으로 push 한다.

이렇게 하면 github.com에 http://saltfactory.github.com 이라는 개인 page가 생성이 된다.

2. Automatic Page Generator 를 이용해서 page를 생성하는 방법

(1) Page를 위한 Repository 추가

위에 설명한 Manual하게 Page를 생성하는 방법의 page를 위한 repository를 추가하는 방법과 동일하다.

(2) Repository의 Admin 페이지로 이동

github.com에서 새로 추가한 repository로 이동을 한다. https://github.com/saltfactory/saltfactory.github.com 그러면 repository 페이지의 오른쪽 상단에 Admin 이라는 버튼이 보이는데 이것을 눌러서 repository 의 admin 페이지로 이동한다.

(3) Automatic Page Generator 선택

Repository의 admin 페이지로 이동하면 Github page 라는 항목 아래 Automatic Page Generator 라는 버튼이 보인다. 이 버튼을 선택한다.

(3) Markdown 수정

Automatic Page Generator 버튼을 누르면 Markdown 을 수정할 수 있는 페이지가 나타난다. github는 HTML 개발자 뿐만 아니라 다양한 개발자들이 사용하기 때문에 혹시 HTML 코드를 모르거나 (그럴일은 없겠지만), 보다 HTML을 간단하고 편리하게 작성하기 위해서 Markdown을 사용할 수 있게 지원해주는 것 같다. Markdown에 익숙해지면 HTML코드는 귀찮게 느껴지게 된다. ^^

화면 캡쳐에는 제외되었지만 아래로 스크롤을 하면 google analytics id를 연결하는 것도 있다. page의 접근 통계를 google analytics 로 분석할 수 있는 기능도 지원된다. 그리도 Layout을 선택하는 버튼이 보이는데 이를 누르고 Layout을 선택할 수 있다.

(4) Layout 선택

github는 미리 다양한 layout을 만들어 두었다. 역시 개발자의 귀차니즘을 잘 알고 미리 이쁜 theme들을 준비할 것을 보면 github가 얼마나 개발자들의 특징을 잘 알고 서비스를 만드는지를 알 수 있다. (다양한 layout이 보이는데 @susukang98 님의 page가 github의 default layout으로 만들어진 것을 확인할 수 있다. 역시 개발자세요~ default)

마음에 드는 layout을 선택하고 publish 라고 체크표시가 된 버튼을 선택하면 약 10분 뒤에 적용이 된다는 메세지와 repository에 layout을 위한 파일들이 추가된 것을 확인할 수 있다.

얼마 지나고 나서 http://saltfactory.github.com 을 열어보자. 멋진 개인 page가 만들어진 것을 확인할 수 있다. 뿐만 아니라 github.com의 개인 저장소로 연결해주는 귀여운 버튼도 자동으로 만들어지는 것을 확인할 수 있다. 이제 Markdown을 수정해서 내용만 변경하면 될 것이다.

<결론>

nodeconf 를 다녀와서 @susukang98 의 트위터에 등록된 개인 사이트가 github.com으로 만들어진 것을 보고 방법을 찾다가 @outsideris 의 블로그에 포스팅된 내용을 보면서 테스트 했는데 github.com에 개인 page가 git를 이용해서 생성하고 수정할 수 있으며 버전까지 관리해주는 것을 보면서 재밌는 기능을 github.com에서 제공하고 있다는 것을 소개하기 위해서 포스팅을 했다. 개인적으로 간단한 개인 page를 자신의 로컬 머신에 두고 서비스하기 보다는 github.com과 같은 안정화된 서비스에 page를 만들어서 서비스한다면 여러가지 이유로 page가 죽는 경우가 적을 것 같다고 생각이 든다. 또한 개인이 html, javascript, css 파일을 직접 핸들링할 수 있다는 것 자체가 여러가지 웹 앱을 생성할 수 있다는 메리트가 있다. 뿐만 아니라 환경이 git이니 당연히 코드의 버전관리가 된다는 것도 좋은것 같다. 만약 이도저도 귀찮고 오직 Markdown으로 관리하면서 기본적으로 아름다운 layout을 사용하고 싶다면 github에서 제공하는 Repository의 admin 페이지에서 Automatic Page Generator를 이용하면 된다. 훌륭한 디자인으로 만들어진 개인 Page를 갖게 될 것이다. github는 개발자의 특징을 너무 잘 파악하고 있는것 같다. 아마 이래서 github가 개발자들에 가장 인기를 얻는 code hosting 서비스가 아닌가 생각이 든다. 나도 틈틈히 개인 page를 업데이트하면서 개인 프로필 페이지를 ghttp://saltfactory.giithub.com 으로 이전 해야겠다고 생각을 했다^^ 개발자와 연구원들 모두 아름다운 개인 page를 만들어보세요~

<참고>

1. http://pages.github.com

2. http://blog.outsider.ne.kr/593

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

JSPX로 빠르게 웹 서비스 개발하기 - 1. 기본 설정

saltfactory — Mon, 19 Nov 2012 12:15:43 +0900

SPX는 Java web RAD framework이다. JSPX는 자바 rich interactive web application 개발을 쉽게하기 위해서 2008년도에 자바 커뮤니티인 java.net에서 소개가 되었다. JSPX는 초기에는 web form과 같은 매우 제한적이였지만 JSPX-bay로 프로젝트가 옮겨지면서 지원하는 것이 점차 많아지게 되었다. RAD framework는 Rapid Application Development framework로 RAD software 방법론을 기반으로 만들어진 프레임워크이다. RAD software 방법론은 매우 짧은 개발 주기를 강조하는 선형모델로 비즈니스 모델링, 데이터 모데링, 어플리케이션 생성, 테스팅의 인과 과정을 보다 빠르게 하면서 고품질의 제품을 개발하는 모델이다

소프트웨어 자체는 지속적으로 변화를 수용할 수 있는 개발 방법론을 적용해서 요구사항이 들어오면 그 요구사항에 맞게 신속하게 제품의 디자인(모델링)부터 어플리케이션 변경까지 변경되어져야하는데 정적인 개발 방법을 가지고는 대규모 어플리케이션에 적용하기 힘들어진다. 하지만 어플리케이션을 마치 뼈대를 조립하듯이 설계가 되어져 있으면 변경이 필요한 부분만 빠르게 변경하고 조립해가는 방법을 사용하면 되기 때문에 이런 RAD framework는 고객의 요구사항과 어플리케이션 변경에 빠르게 대응할 수 있는 환경을 가지고 있다. RAD는 제한된 범위의 단독 시스템을 CASE를 사용하여 신속하게 개발하는 방법론이다. 이 개발 대상은 시스템이 복잡하지 않아서 독립적으로 기술을 설계가 가능한 경우에 사용할 수 있다.

JSPX라 불리는 JSPX-bay는 무료 java web RAD framework 으로 위 개념의 아키텍처를 지원하고 있다. JSPX를 Oracle Application Framework와 XML 표현식의 JSP와 혼동해서는 안된다. JSPX는 Java EE Servlet의 확장판으로 HTML 코드를 생성하는데 OOP모델로 개발할 수 있게 해주는 것을 지원하고 있다.

JSPX는 RAD의 방법론을 기반해서 다음 목적으로 디자인 되었다.

1. Business case Driven Framework

- JSPX는 비즈니스 CASE를 driven 할 수 있는데 이는 코드와 비즈니스 모델, 그리고 task를 분리할 수 있다.

2. Zero configuration

- JSPX는 JSF와 비교가 많이 되지만 JSF는 외부 설정 파일이 존재해야하는 반면에 JSPX는 그렇지 않다.

3. Declarative and Imperative Web

- JSPX는 HTML 코드를 OOP로 정의할 수 있고 Java API로 정의된 속성에 접근이 가능하다.

4. Optional and Default Implementation

- JSPX 자체게 기본 값이 있기 때문에 모두 설정하는 번거러움이 없다.

5. Interaction with other framework

- JSPX 페이지 안에 기존의 JSP를 임포트해서 사용할 수 있다.

6. Portable framework

- 추가 노력 없이 거의 모든 Java Application Server에서 동작한다.

JSPX의 구조는 다음과 같다. Http Request 요청이 들어오면 Java Servlet이 URL 패턴에 해당되는 RequestHandler에게 요청을 넘겨서 Cache가 있으면 Cache된 컨트롤러를 사용하고 아니면 Page Controller과 Page Model Composer 를 이용해서 jspx와 조합해서 사용자 코드를 결합해서 Http Response를 반환해주는 구조를 가지고 있다.

CASE 기반으로 개발이 가능하다는 이야기인데 실제 어떻게 적용되는지 알아보기 이전에 기본 설정이 필요기 때문에 설정하는 포스팅부터 준비를 했다. JSPX는 Spring 프레임워크와 함께 연동해서 사용도 가능하지만 JSPX의 개념을 알기위해서 단독으로 설정해서 개발하는 방법을 소개한다.

1. Java 웹 어플리케이션 프로젝트 생성

Java 웹 어플리케이션을 개발하려면 기본적으로 Java 서블릿 서버가 필요한데 apache-tomcat과 같이 무료 오픈소스 서브를 이용하여 개발을 하고 있을 것으로 예상이된다. 그리고 IntelliJ나 Eclipse와 같이 IDE를 통해서 쉽게 웹 어플리케이션 프로젝트를 생성할 수 있기 때문에 그에 대한 설명은 생략한다. 이 포스팅을 위해 JSPXTutorial이라는 웹 어플리케이션 프로젝트를 IntelliJ에서 생성했다. 그리고 서블릿 엔진 서버는 apache-tomcat-6.0.36을 사용했다. 그리고 web root 디렉토리 밑에 jspx 파일을 저장하기 위해서 jspx 디렉토리를 생성했다.

2. JSPX 라이브러리 다운로드

JSPX는 JSPX-bay 프로젝트로 이동이 되었다. JSPX-bay에서 jar 라이브러리를 다운받는다. http://jspx-bay.sourceforge.net/pages/build/download.html 이 글을 포스팅할 때는 jspx-1.10.jar 버전을 다운 받았다.

Java IDE에 사용하고 있는 라이브러리 디렉토리에 jspx-1.10.jar를 넣는다. 이 포스팅은 IntelliJ 기반으로 작성하고 있지만 eclipse에 사용하는 lib 디렉토리에 넣고 classpath를 추가하면 된다. JSPX 라이브러리는 기본적으로 commons-fileupload와 log4j 라이브러리에 의존성을 가지고 있다. JSPX의 태생이 web form을 위한 것이기 때문에 fileupload 라이브러리에 대한 의존성을 가진것으로 보이고, logging을 위해서 log4j를 이용한것 같다. 이 두가지 라이브러리를 다음 링크에서 다운 받아서 프로젝트의 lib 디렉토리에 저장하여 classpath에 추가한다.

http://commons.apache.org/fileupload/download_fileupload.cgi

http://logging.apache.org/log4j/1.2/download.html

3. web.xml 설정

Java 웹 어플리케이션을 개발하기 위해서는 Java 서블릿을 서블릿 엔진이 해석하기 위해서 web.xml을 설정해야한다. JspxHandler라는 서블릿은 eg.java.net.jspx.engine.RequestHandler 클래스로 *.jspx 파일 요청이 들어오면 매핑이되게 설정했고. /jspEmbededResources/* 요청이 들어오면 eg.java.net.web.jspx.engine.ResourceHandler 클래스인 서블릿과 매핑이 되게 설정했다.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

version="2.5">

<display-name>jspx-demo</display-name>

<servlet-name>JspxHandler</servlet-name>

<servlet-class>eg.java.net.web.jspx.engine.RequestHandler</servlet-class>

</servlet>

<servlet-name>ResourceHandler</servlet-name>

<servlet-class>eg.java.net.web.jspx.engine.ResourceHandler</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>JspxHandler</servlet-name>

<url-pattern>*.jspx</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>ResourceHandler</servlet-name>

<url-pattern>/jspxEmbededResources/*</url-pattern>

</servlet-mapping>

</web-app>

4. HelloWorld page 클래스 작성

JSPX는 요청이 들어오면 Java Page 컨트롤러 클래스파일과 JSPX가 서로 조합되어서 HTML 파일이 만들어진다. Page가 만들어질 때 Label이라는 element에 Hello Java World 라고 문자열을 입력했다. 이후에 JSPX 파일에 <label id="message"/>에 여기 Label 이라는 jspx ui element에 문자열을 넣기 위해서 이다. Page 클래스를 상속받은 HelloWorld 클래스는 단순하게 POJO 형태로 setter와 getter로 jspx의 html element와 서로 상호데이터를 주고 받을 수 있다.

package net.saltfactory.tutorial.jspx;

import eg.java.net.web.jspx.ui.controls.html.elements.Label;

import eg.java.net.web.jspx.ui.pages.Page;

import org.apache.log4j.Logger;

/**

* Filename: HelloWorld.java

* Created by saltfactory@gmail.com

* User: Saltfactory

* Date: 11/16/12

public class HelloWorld extends Page {

Label message;

Logger log;

public HelloWorld() {

log = Logger.getLogger(this.getClass());

}

protected void pageLoaded() {

if (!isPostBack) {

message.setValue("Hello Jspx World");

}

public void setMessage(Label message) {

this.message = message;

}

public Label getMessage() {

log.debug(message.getValue());

return message;

}

5. JSPX 파일 생성

JSPX는 HTML 파일 생성하는 코드를 대폭적으로 줄일 수 있다고 JSPX에서는 설명하고 있다. 실제 PageController과 조합해서 HTML 코드가 OOP 적으로 설계해서 조립을 하는 것이기 때문인것 같은데 이번 예제에서는 단순하게 label 이라는 html element에 Page 클래스를 상속받은 HelloWorld의 message만 가져와서 조립되는 예제만 준비했다. 아래코드를 살펴보면 label 이라는 element에 id만 부여 되었을 뿐 label에 포함된 문자열은 비어 있다. helloworld.jspx 파일은 web root 디렉토리 밑에 jspx/helloworld.jspx 파일로 저장을 한다. (/JSPXTutorial/web/jspx/helloworld.jspx)

<html>

<head>

<title>JSPX Tutorial</title>

</head>

<body>

</body>

</html>

</page>

이제 모든 설정이 마쳤으니 서블릿 서버를 실행하고 http 요청을 해보자.

http://localhost:8080/jspx/helloworld.jspx

jspx에 <label id="message"/>에 비어 있던 내용이 Hello Jspx World 라는 문자열을 포함해서 HTML이 생성된 것을 확인할 수 있다. 소스코드를 확인해보자. HelloWorld.java에서 Label에 setter했던 내용이 HTML 조립이 될 때 getter를 이용해서 가져와서 label element에 Hello Jspx World 문자열을 포함시켰다. 그리고 web.xml 서블릿에 리소스에 대한 url Link 엘리먼트로 자동으로 생성되는 것을 확인할 수 있다.

<결론>

JSPX는 Java web RAD framework이다. 그래서 비즈니스의 요구 사항에 코드가 빠르게 요구사항을 받아들여서 어플리케이션 개발에 적용되어야 되기 때문에 CASE별 독릭접으로 만들어서 조립을 하는 형태를 지원하고 있다. 기존의 JSP 개발은 Java Bean을 가져와서 JSP 문법과 HTML 코드를 혼합해서 사용을 했었다. 하지만 JSPX는 위와 같이 PageController가 페이지에 관한 내용을 추가하거나 조작할 수 있다. 이런 이유로 JSPX 디자인과 데이터 처리에 관련된 코드를 분리해서 View에 빠르게 적용을 할 수 있다. 뿐만 아니라 JSPX는 기본적으로 지원하는 설정들이 있는데, 이 포스팅은 JSPX 의 개발을 위한 기본 설정을 소개하고 있기 때문에 JSPX에 대한 자세한 사용법에 대해서는 소개하지 않았다. 더욱 자세한 내용은 앞으로 추가될 예정이다.

<참고>

1. http://jspx-bay.sourceforge.net/pages/tout/demo.html#

2. http://en.wikipedia.org/wiki/Jspx-bay

3. http://java.net/projects/jspx

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

Sencha Touch 에서 JSONP으로 크로스 도메인 JSON요청 문제 해결하기 (with nodejs)

saltfactory — Thu, 15 Nov 2012 17:11:44 +0900

Sencha Touch는 모바일 웹 앱을 쉽게 만들 수 있는 환경을 제공하고 있다. 그래서 Sencha Touch에서는 웹앱에서 서버측으로 JSON 데이터를 요청해서 Sencha Touch 기반의 application에서 사용할 수 있는 Data Model로 쉽게 사용할 수 있다. 그런데 Sencha Touch를 모바일 어플리케이션으로 개발하게 된다면 즉, 하이브리드 앱으로 네이티브 앱에 패키징하여 개발하게 된다면 어플리케이션의 자원들이 모두 local에 저장하기 때문에 http://domain 으로 요청행하는 크로스 도메인 문제가 발생하게 된다. 이렇게 서로 다른 도메인에서 JSON 데이터를 요청하여 처리할 수 있는 것이 바로 JSONP(JSON with Padding)이다. JSONP는 content-type을 application/json으로 json 데이터를 요청하는 것이 아니라 application/javascript로 JSON을 가지는 callback function을 요청해서 callback function의 JSON 데이터를 사용하는 방법이다. "Javascript 에서 callback 구현하기" 글에서 callback function 자체를 parameter로 넘겨서 callback function 이름에 ()를 표시해서 callback 함수를 실행시키듯, JavaScript는 call by name 으로 함수를 참조하고 dynamic parameter passing을 하기 때문에 JSONP라는 특수한 기능을 사용할 수 있다.

위키에서 소개한 SJONP를 살펴보면 callback function 이름으로 JSON payload를 가지도록 해서 JSONP의 요청을 처리하는 것을 볼 수 있다.

http://en.wikipedia.org/wiki/JSONP

1. Sencha Simple Application 구성

우리는 Sencha Touch의 기본 사용법은 앞의 포스팅으로 익히 알고 있다고 가정하고 기본 설정이나 사용법에 대해서는 생략한다. SenchaTutorial이라는 디렉토리 안에 lib 안에 sencha touch 개발에 필요한 js와 css 파일을 추가하였다. IDE는 각자 편리한 IDE를 사용하면 된다. 연구소에서 공식적으로 IntelliJ를 사용하고 있기 때문에 이 포스팅은 IntelliJ 기반으로 설명한다.

그리고 간단히 index.html을 만든다. sencha 의 파일과 app.js를 호출하는 코드가 있다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

app.js에는 JSONP를 요청하고 결과를 받아 볼 수 있게 간단한 titlebar와 button을 가지도록 xtype을 Ext.Viewport에 추가하였다.

/**

* filename : app.js

* author : saltfactory@gmail.com

* license : CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/2.0/)

Ext.application({

name:"SenchaTutorial",

launch:function () {

var button = {

xtype:"button",

text:"JSONP",

ui:"confirm",

align:"right"

};

var titlebar = {

xtype:'titlebar',

title:"JSONP Test",

docked:"top",

items:[button]

};

var rootPanel = {

xtype:"panel",

layout:"fit",

items:[titlebar]

};

Ext.Viewport.add(rootPanel)

}

});

위의 Sencha Touch의 코드를 실행하면 다음과 같은 화면이 보이게 된다.

2. NodeJS 설치

이제 JSONP 버턴을 누르면 http://localhost/test.json 으로 json을 요청하도록 서버 프로그래밍을 해볼 것이다. 우리는 하이브리드 앱이나 웹 앱을 만들려고 하기 때문에 JavaScript에 익숙할 것이다. 그래서 서버 프로그래밍도 nodejs를 이용해서 테스트해보겠다. 우선 Mac OS X에 homebrew가 설치되어 있어야한다. 아니면 homebrew 없이 바로 node가 설치되어 있어야한다.HomeBrew는 Mac OS X의 missing unix package를 설치해주는 툴이다. Homebrew를 이용하여Mac OS X에서 Unix 패키지 사용하기 글을 참조하면 더욱 자세히 설치하는 방법과 사용하는 방법을 확인할 수 있다. homebrew가 설치되어 있으면 node를 설치한다.

brew install node

3. HTTP 서버 생성

lib/server.js 라는 파일을 다음과 같이 코드를 추가한다. nodejs에 기본적으로 포함되어져 있는 http 모듈을 가지고 http 서버를 만들고 요청이 들어오면 url 모듈로 url을 파싱해서 url 쿼리스트링 중에 callback 이라는 파라미터의 값을 console 로 출력하였다. 그리고 http의 응답으로 name이 "saltfactory"인 json 객체를 JSON string 문자로 변환하여 응답으로 만들어서 돌려주는 코드이다.

/**

* filename : server.js

* author : saltfactory@gmail.com

* license : CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/2.0/)

var http = require('http');

var url = require('url');

var server = http.createServer(function (req, res) {

var parts = url.parse(req.url, true);

var callback = parts.query.callback;

console.log(callback);

var obj = {name:'saltfactory'};

res.writeHead(200, {"Content-Type":"application/json"});

res.write(JSON.stringify(obj));

res.end();

});

server.listen(8080);

이 코드를 실행하고 다음과 같이 브라우저에서 요청한다.

http://localhost:8080/test.json?callback=callbackfunc

그러면 브라우저에서 application/json인 {"name":"saltfactory"} 라는 json 결과를 받을 수 있다는 것을 확인할 수 있다. 그럼 서버측에 로깅을 살펴보자.

서버측에서는 url 파싱을 해서 callback 파라미터를 출력하니 callbackfunc이라는 결과가 나왔는데 이상하게 undefined도 같이 출력된다. 브라우저에서 refresh를 반복적으로하면 이 두 쌍이 계속적으로 출력이되는 것을 확인할 수 있다. 이것은 http요청을 할 때 favicon을 요청하는 url이 들어와서 이다. 그래서 그래서 다음과 같이 코드를 변경한다.

/**

* filename : server.js

* author : saltfactory@gmail.com

* license : CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/2.0/)

var http = require('http');

var url = require('url');

var server = http.createServer(function (req, res) {

if (req.url == '/favicon.ico') {

res.writeHead(404, {'Content-type':'text/plain'});

res.end('not found');

} else {

var parts = url.parse(req.url, true);

var callback = parts.query.callback;

console.log(callback);

var obj = {name:'saltfactory'};

res.writeHead(200, {"Content-Type":"application/json"});

res.write(JSON.stringify(obj));

res.end();

}

});

server.listen(8080);

이제 서버측 로그를 살펴보면 callbackfunc만 출력되는 것을 확인할 수 있다.

4. Ajax 요청 테스트

HTTP 서버가 만들어 졌으니 Sencha에서 Ajax로 JSON을 요청해보자. app.js에서 JSONP 버튼을 누르면 위에서 만든 HTTP 서버로 test.json을 요청할 것이다. Sencha Touch에서 Ajax를 요청하기 위해서는 Ext.Ajax.request를 이용해서 ajax 요청을 할 수 있다. 서버측으로 부터 받은 json은 문자열이기 때문에 Ext.decode를 이용해서 json 문자열을 json object로 변경한다.

/**

* filename : app.js

* author : saltfactory@gmail.com

* license : CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/2.0/)

Ext.application({

name:"SenchaTutorial",

launch:function () {

var button = {

xtype:"button",

text:"JSONP",

ui:"confirm",

align:"right",

handler:function () {

Ext.Viewport.mask();

var url = 'http://localhost:8080/test.json';

Ext.Ajax.request({

url:url,

headers:{

"Content-Type":"application/json"

sucess:function (response) {

var obj = Ext.decode(response.responseText);

Ext.Msg.alert("Confirm", "My Name is : " + obj.name);

Ext.Viewport.unmask();

}

});

}

};

var titlebar = {

xtype:'titlebar',

title:"JSONP Test",

docked:"top",

items:[button]

};

var rootPanel = {

xtype:"panel",

layout:"fit",

items:[titlebar]

};

Ext.Viewport.add(rootPanel)

}

});

위 코드를 브라우저에서 실행해보았다. 브라우저에서 index.html 파일은 file:// 로 시작하는 로컬파일이다. 이 파일에서 http://localhost 인 크로스 도메인으로 ajax를 요청하면 XMLHttpRequest를 사용할 수 없다는 에러를 발생한다.

5. JSONP 요청

이제 우리는 JSONP를 요청하는 코드로 변경할 것이다. Sencha에서 JSONP는 Ext.data.JsonP.request를 이용해서 크로스 도메인으로 JSON 데이터를 요청할 수 있다. 이때 payload를 가지고 리턴할 callback 함수의 이름을 서버측으로 넘겨주는데 callbackKey에 파라미터의 이름으로 넘겨준다. 즉 http://localhost:8080/test.json?callback=callbackfunc 으로 될 수 있기 callback 이라는 파라미터 이름으로 넘겨주게 된다. 서버에서 받은 JSON은 payload로 넘겨받은 것 자체가 json으로 되기 때문에 json의 key 로 데이터를 가져올 수 있다. 서버측에서 payload로 넘겨주는 json은 {name:"saltfactory"} 이다.

/**

* filename : app.js

* author : saltfactory@gmail.com

* license : CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/2.0/)

Ext.application({

name:"SenchaTutorial",

launch:function () {

var button = {

xtype:"button",

text:"JSONP",

ui:"confirm",

align:"right",

handler:function () {

Ext.Viewport.mask();

var url = 'http://localhost:8080/test.json';

Ext.data.JsonP.request({

url:url,

callbackKey:'callback',

headers:{

"Content-Type":"application/javascript"

success:function (json) {

Ext.Msg.alert("Confirm", "My Name is : " + json.name);

Ext.Viewport.unmask();

}

});

}

};

var titlebar = {

xtype:'titlebar',

title:"JSONP Test",

docked:"top",

items:[button]

};

var rootPanel = {

xtype:"panel",

layout:"fit",

items:[titlebar]

};

Ext.Viewport.add(rootPanel)

}

});

이제 서버측으로 요청해보자. 그런데 app.js에서 요청하는 JSONP는 정상적인데 서버측에서 받게된 JSON 객체를 파싱하는데 문제가 발생한다. 크로스도메인으로 JavaScript 코드를 요청하는데 문제는 발생하지 않지만, JSONP는 payload를 넘겨주는 function으로 wrapping을 해줘야하기 때문이다.

그래서 서버에 코드를 다음과 같이 callback 파라미터가 가지고 오는 callback function 이름으로 json을 payload로 wrapping하도록 한다. 이때 Content-Type은 application/json에서 application/javascript로 변경해서 javascript callback function과 payload를 전송한다.

/**

* filename : server.js

* author : saltfactory@gmail.com

* license : CC BY-NC-SA (http://creativecommons.org/licenses/by-nc-sa/2.0/)

var http = require('http');

var url = require('url');

var server = http.createServer(function (req, res) {

if (req.url == '/favicon.ico') {

res.writeHead(404, {'Content-type':'text/plain'});

res.end('not found');

} else {

var parts = url.parse(req.url, true);

var callback = parts.query.callback;

console.log(callback);

var obj = {name:'saltfactory'};

res.writeHead(200, {"Content-Type":"application/javascript"});

res.write(callback+"("+JSON.stringify(obj)+")");

res.end();

}

});

server.listen(8080);

브라우저에서 다시한번 테스트하면 Sencha Touch에서 JSONP를 요청하기 위해서 넘기는 callback 함수의 이름이 Ext.data.JsonP.callback1 이라는 것을 확인할 수 있다.

6. 결론

Sencha Touchs는 서버에서 모바일 웹 서비스를 만들 뿐만 아니라 클라이언트 로컬에 돌아가는 앱을 만들 수 있다. 이때 로컬 도메인과 서버측 도메인과 서로 다른 도메인이기 때문에 서버측으로 JSON 데이터를 요청하는데 보안상 문제가 발생하게 된다. 이 문제를 해결하기 위해서 Sencha Touch는 JSONP 요청을 쉽게 사구현할 수 있게 내장 모듈을 가지고 있다. JSONP는 서버측에 application/javascript의 타입의 JSON을 payload로 가지는 callback function을 만들어서 넘겨주게 되는데 이는 Java, PHP, nodejs 등 서버 프로그램에서 구현해줘야 한다. Sencha Touch는 무거운 웹 앱 프레임워크라는 말이 많지만 여러가지 편리한 기능이 포함되어 있다. 그리고 잘 구조화된 모듈 때문에 Ajax를 요청하거나 JSONP를 요청할 때 데이터를 요청하는 코드만 변경해주면 다른 코드에 영향을 주지않고 크로스 도메인의 데이터 요청 문제를 해결할 수 있다.

<참고>

1. http://docs.sencha.com/touch/2-0/#!/guide/ajax

2. http://docs.sencha.com/touch/2-0/#!/api/Ext.data.JsonP

3. http://nodeguide.com/beginner.html

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

HTML5의 Application Cache를 이용해서 이미지,JS,CSS 많은 웹 페이지 응답속도 높이기

saltfactory — Fri, 19 Oct 2012 16:08:03 +0900

연구소에서 HTML5를 부분적으로 도입하기로 결정하면서 여러가지 HTML5 API를 이젠 적용할 수 있는 범위를 정할 수 있게 테스트를 하고 있다. HTML5는 단순히 Hyper Text Markup Language가 아니라는 것을 조금씩 알아가고 있다. 트랜드를 아는 것과 실제 사용하기 위해서 하나하나 테스트를 하는 것과는 연구하는 사람에게 너무나 다르게 느껴진다. 이번 포스팅은 HTML5의 Application Cache에 대한 소개를 하고자 한다. Application Cache는 HTML5에서 Offline Application을 위해서 만들어진 API 이지만 Application Cache의 가장 큰 장점은 바로 웹의 자원을 Application Level에서 Cache를 제어할 수 있다는 것이다. 이미 Application Cache에 대한 포스팅도 있고 이 기술이 공개된지는 오래 되었지만 내가 연구하는 연구소에서 도입할 범위를 정하기 위해서 연구소내 공유 목적으로 포스팅을 하려고 한다. 만약 Application Cache에 대한 좀 더 심도 깊은 내용은 참고[1][2] 사이트에서 정보를 보충하길 바란다.

우리가 생각하는 사이트의 첫번째 문제는 화면이 로딩될 때 많은 이미지를 가져오는데 시간이 소요된다는 것이다. 그것이 광고든지, 아니면 주기적으로 자주 변하는 이지든 말이다. HTML5가 나오기 전에 우리는 어떻게 웹 프로그래밍을 했는지 생각해볼 필요가 있다. HTML을 우리는 단순히 Markup Language로 생각하고 데이터를 표현하는 것만 생각했지 HTML의 속도를 높이기 위해서 어떻게 구성할 것이며 어떻게 구조화 시킬것이고 요청을 어떻게 나눌 것인지에 대해서 깊게 생각하지 않았다는게 현실이다. (물론 기존에도 이런 고민을 깊게하는 웹 개발자가 있었겠지만 그런 웹 개발자는 흔하지 않았다) 하지만 HTML5에서는 다양한 API와 여러가지 성능을 높이는 기법들이 공개되면서 더이상 웹 프로그램을 서버에서만 부하를 담당하고 연산해서 HTML은 단순히 데이터를 표현해주는 것이라는 생각을 완전히 바꾸게 만들었다. 서버 중심의 웹 데이터들이 클라이언트로 쉽게 데이터나 연산을 분산시키고 재활용할 수 있게 만들수 있게 해준 것이다.

HTML5 application cache를 테스트하기 위해서 우선 application cache가 적용되지 않은 코드를 다음과 같이 작성하였다.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Application Cache</title>

</head>

<body>

<h1 id="title">HTML5 Application Cache</h1>

</header>

<h2 id="subject" class="subjects">HTML5 Application Cache example</h2>

<ul>

<li>app.js cached.</li>

</ul>

</article>

</section>

</body>

</html>

서버에 HTML 파일을 저장하고 요청을 해봤다. 아무런 caching 작업 없이 HTML 웹 사이트를 제작했다고 생각하고 웹 페이지를 최초 요청하였을 때이다. 예상대로 모든 요청을 처음하기 때문에 각각 URL 요청이 들어가는 부분은 네트워크 요청 시간이 포함되어서 시간이 길게 나타난다. 특히 jquery를 요청할 때는 google library host를 이용해서 구글서버까지 요청시간을 더해진 것을 확인할 수 있다. 이미지가 70kb 인것도 네트워크 요청에서 시간을 필요한 부분이다.

한번 요청한 페이지를 다시 같은 URL로 재 요청을 해봤다. 최초 HTTP 200 code의 결과와 달리 이번에는 HTTP 304 code의 결과를 반환하면서 최초의 로딩 속도 (669ms) 보다는 189ms로 많이 빨라졌다. 304 code는 이미 요청한 자원을 서버측의 내용과 변경된 것이 없다는 것을 확인한 코드인데 이 요청 때문에 서버의 자원과 비교하는 시간이 소비가 된다. 하지만 원래 브라우저가 동작하는 방식이 한번 읽은 Javascript/css/images 들은 temporary 디렉토리 같은 곳에 자체적으로 저장해서 웹 요청 시간을 단축시키기 때문에 최초의 요청시간보다는 많은 시간이 단축된 것을 확인할 수 있다. 다만 304 code를 계속 확인하는 시간은 포함이 되어 있다.

이제 HTML5의 application cache 를 적용해보자. application cache를 적용하기 위해서는 HTML 문서에 manifest를 지정해야하는데 일종의 캐시설정 규칙을 파일로 저장하는 것이다. appcache.manifest 라는 파일을 html 문서와 동일한 곳에 아래 내용으로 저장하였다. 노란색으로 표시가 되어 있는 부분이 캐시 규칙을 설정하는 부분이다. 가장 상단의 CACHE MANIFEST는 반드시 포함되어야 하는 것이고 CACHE는 한번 요청한 다음에 caching 되어지는 URL 규칙이다. 이와 동일한 URL 이 브라우저에서 요청되어지게 되면 이 설정된 부분을 보고 application cache에 저장된 자원을 재사용하게 된다. NETWORK: 는 말 그대로 이 HTML 페이지가 요청될때 캐싱과 상관없이 매번 네트워크 요청을하는 URL 규칙이 들어가진다. 마지막으로 FALLBACK:은 URL요청을 했을때 실패가 일어나면 대처하는 URL을 정의해서 다른 URL 요청으로 대신하는 규칙을 만들 수 있다.

CACHE MANIFEST

# version 0.1.0

CACHE:

css/style.css

js/app.js

images/1.png

http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

NETWORK:

FALLBACK:

한가지 주의해야할 점은 이 manifest가 서버에서 요청할때 header 정보에 Content-Type이 text/cache-manifest 로 되어야지만 정상적으로 요청을 받고 적용을 할 수 있다는 것이다. 그래서 서버 프로그램에 Content-Type="text/cache-manifest" 등을 지정해줘야한다. (manifest 파일을 php, jsp 로 만들 수 있다.). 아니면 apache 웹 서버를 사용하면 간단하게 .htaccess 파일에 다음과 같이 추가한다.

AddType text/cache-manifest .manifest

이제 이 application cache manifest를 HTML문서가 요청될 때 브라우저가 HTML5 application level에서 이해를 해야하기 때문에 HTML 파일을 다음과 같이 수정한다. HTML5 문서에 manifest의 설정 파일을 지정하고 window가 load 될 때 applicationCache의 업데이트 이벤트를 감지해서 변경된 것이 있으면 applicationCache를 swapCache를 하고 reload를 시켜서 application cache를 업데이하는 코드를 추가했다. 그리고 manifest에서 설정된 URL과 동일한 것이 표시했다. 다시 html 을 재요청해보자.

<!DOCTYPE html>

<head>

<title>HTML5 Application Cache</title>

window.addEventListener('load', function(e) {

window.applicationCache.addEventListener('updateready', function(e) {

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

window.applicationCache.swapCache();

if (confirm('A new version of this site is available. Load it?')) {

window.location.reload();

}

} else {}

},false);

</script>

</head>

<body>

<h1 id="title">HTML5 Application Cache</h1>

</header>

<h2 id="subject" class="subjects">HTML5 Application Cache example</h2>

<ul>

</ul>

</article>

</section>

</body>

</html>

응답속도는 놀라울 만큼 빨라졌다. 최초 로드 속도를 제외하고 304를 요청하던 요청 결과가 189ms 였는데 application cache를 하게 적용하게 되면 manifest를 읽어들여서 CACHE에 정의된 요청은 cache로 부터 불러오기 때문에 모두 200 code 결과가 나오면서 서버와의 통신을 하지 않게 되기 때문에 모든 것이 네트워크 요청없이 cache에서 불러왔기 때문이다.

HTML5 application cache를 사용하면 브라우저에서 resouces가 어떻게 저장되는지 확인할 수 있다. resources 탭을 눌러서 Application Cache 를 확인해보자. 이렇게 manifest에 정의한 cache 정보를 부라우저가 HTML5 문서에 해석해서 application 레벨에서 cache를 관리하게 된다.

캐시를 지우고 싶을 경우에는 크롬 브라우저에서 application cache를 보는 URL로 접근해서 삭제할 수 있다. chrome://appcache-internals/ 을 URL 입력창에 입력하면 다음과 같은 화면이 나타난다. 이것을 보면 manifest 파일에 관련된 캐시 정보를 가지고 있다는 것을 확인할 수 있고 Remove로 삭제할 수 있다.

View Entires를 클릭하면 manifest의 자세한 정보를 확인할 수 있다.

그런데 한가지 주의할 점이 있다. HTML5 application cache를 사용하게 되면 cache를 적용한 html 파일이 자동으로 캐싱이 되어 버린다는 것이다. 그래서 HTML문서를 수정하더라도 cache 되어 있는 html 파일을 로드하기 때문에 적용되지가 않는다. manifest에서 html 문서를 NETWORK: 로 정의해도 html 문서만은 자동으로 캐싱되기 때문에 적용이 되지 않는다. 방법은 manifest를 변경해서 application cache가 업데이트 되어서 window.location.reload()를 해야만 한다는 것이다.

HTML5 application cache 은 훌륭한 cache 기법 application level에서 (서버설정없이) 할 수 있다는 것이 가장 큰 강점이다. 만약에 javascript 파일이 지속적으로 업데이트되는 (원격 업데이트)를 하고 싶으면 NETWORK: 쪽에 정의를 하면 된다. app.js는 수시로 변할 수 있는 파일이라고 가정하고 NETWORK: 아래에 정의를 하고 페이지를 다시 요청을 했다. 나머지는 모두 from cache로 캐시된 것에서 불러오지만 app.js 파일만은 서버에서 다시 요청을 하게된다.

<결론>

웹 서버에서 Cache를 하거나 브라우저에 Cache 정책을 잘 세우게 되면 웹 페이지의 응답속도를 많이 줄일 수 있다. 특히 고정 이미지가 많거나 잘 수정되지 않는 대용량 리소스(javascript, css)파일을 캐싱하게 되면 URL request 요청을 줄이게 되어서 응답속도를 빠르게 만들 수 있다는 것을 위 테스트에서 확인을 하였다. 테스트 파일은 단순하게 javascript, css, image 파일이 하나뿐이지만 실제 한 웹 페이지에서 여러개가 사용되고 있고 브라우저가 이들 요청을 한번에 처리할 수 있는 요청은 한계가 있기 때문에 리소스를 원격 URL 요청으로 다운받아서 HTML 문서를 로드하는데는 많은 시간이 걸린다. HTML5 application cache를 사용하게 되면 URL HTTP request를 최소한으로 만들 수 있다. 그리고 잘 설계하고 이용해서 offline 문서를 만들 수도 있다는 것을 확인하였다. 광고 이미지가 많은 사이트에 HTML5 Application Cache를 적용하면 원격이미지 요청 네트워크 부하를 줄일 수 있다. 하지만 광고는 기간제한이 있다. 즉 광고가 끝나고 다른 광고 이미지로 대처해야하는 문제가 있는데 이것은 manifest파일을 광고가 변할 때 마다 갱신시켜주면 된다. manifest 파일은 확장자에 제한이 없다. 즉, php나 jsp 같은 언어로 manifest 파일을 원격서버에 프로그래밍으로 만들면 된다. manifest 파일이 변경되면 HTML5 문서에서 window.applicationCache.status에서 UPDATEREADY 상태로 변경되기 때문에 새로운 이미지가 갱신이 될 것이다. HTML5는 웹 앱을 만드는 많은 기능을 추가했다지만, 이 말은 웹 서비스의 성능을 높일 수 있는 기능이 많이 추가되었다는 말이기도 하다. 구형 브라우저가 아닌 HTML5 을 해석할 수 있는 브라우저, 모바일 브라우저를 위해서 지금이라도 HTML5 Application Cache 기능을 사용해보길 권유하고 싶다. 특히 모바일 브라우저를 위한 웹을 만든다고 한다면 이 Application Cache 기능이 성능 향상에 크게 도움을 줄 수 있을것으로 예상이된다.

<참고>

1. http://www.html5rocks.com/en/tutorials/appcache/beginner/

2. http://xguru.net/621

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

Sencha Touch의 Ext.require 를 이용해서 비동기로 Javascript (센차클래스) 로딩하기

saltfactory — Thu, 18 Oct 2012 20:22:46 +0900

Sencha Touch는 Javascript Mobile Development Framework 로 현존하는 WebApp UI framework 중에서 가장 기능이 많고 좋은 아키텍처를 가지고 있지 않나 생강이 든다. 하지만 이러한 Sencha Touch를 익히고 자유롭게 사용하기가 그리 만만하지가 않다. 한국어로 번역되거나 Sencha Touch 2에 관한 도서가 이제 조금씩 나오기는 하지만 Sencha Touch 에 관한 자료가 많지 않아서 영어의 장벽이 높아서 쉽게 포기하는 framework 중에 하나로 알려져 있기도 하다. 하지만 정작 문제는 Sencha Touch는 Sencha Touch의 표현식 (물론 Sencha 도 Javascript의 표현을 그대로 따르고 있다)을 이해해야지만 자유롭게 사용할 수 있다는 것이다. 그중에서 Sencha Touch에 클래스를 정의해서 사용하는 방법과 새롭게 생성한 클래스를 Sencha Touch에 사용할 수 있게 로딩하는 방법에 대해서 알아보자.

Sencha Touch에서 Javascript 파일을 추가할 때 application 구조가 아닌 특정 클래스를 만들어서 사용한다고 생각하면 다음과 같이 script를 html 파일 안에서 정의하여 사용할 수 있다.

다음은 Sencha Touch를 사용해서 사용자 정의 클래스 (Custom Class)를 생성해서 사용하는 예제 코드이다. Person.js 라는 클래스를 만들어서 사용한다고 했을 때, Sencha Touch의 Ext.define으로 클래스를 정의하고 Ext.create로 객체를 생성해서 사용할 수 있다.

<!DOCTYPE html>

<html>

<head>

<title>sencha 테스트</title>

Ext.define("Person", {

config:{

name:null,

email:null

constructor:function (options) {

this.initConfig(options);

}

});

document.addEventListener("DOMContentLoaded", function(){

var person = Ext.create("Person", {

name:"saltfactory",

email:"saltfactory@gmail.com"

});

document.getElementById("person-name").innerHTML = person.getName();

document.getElementById("person-email").innerHTML = person.getEmail();

}, false);

</script>

</head>

<body>

<h1>Sencha Ext.require 테스트</h1>

<ul>

<li>email : <strong id="person-email"></strong> </li>

</ul>

<p></p>

</body>

</html>

위 스크립트 코드를 HTML에 삽입하지 않고 Person.js 라는 파일로 관리한다고 하면 다음과 같이 Person.js 파일과 <script src="Person.js"></script>로 변경이 될 것이다.

/**

* filename : Person.js

Ext.define("Person", {

config:{

name:null,

email:null

constructor:function (options) {

this.initConfig(options);

}

});

<!DOCTYPE html>

<html>

<head>

<title>sencha 테스트</title>

document.addEventListener("DOMContentLoaded", function(){

var person = Ext.create("Person", {

name:"saltfactory",

email:"saltfactory@gmail.com"

});

document.getElementById("person-name").innerHTML = person.getName();

document.getElementById("person-email").innerHTML = person.getEmail();

}, false);

</script>

</head>

<body>

<h1>Sencha Ext.require 테스트</h1>

<ul>

<li>email : <strong id="person-email"></strong> </li>

</ul>

<p></p>

</body>

</html>

위 코드로 변경한 다음에 브라우저를 리로딩해도 결과는 동일하다는 것을 확인할 수 있을 것이다. Sencha Touch는 같은 경로에 클래스 이름과 동일한 Javascript 파일이 있으면 이름으로 객체를 구분하기 때문에 동일한 클래스로 생각하고 로드를 자동으로 해준다. 방금 추가한 <script src="Person.js">를 삭제시켜보자.

개발을 위해서 sench touch debug all javascript를 상용하고 있다면 아래와 같은 Warning이 발생하기는 하지만 같은 경로에 있는 Person.js를 로드해서 Person 클래스를 해석하고 객체를 만들 수는 있다는 것을 확인할 수 있다.

Sencha Touch는 클래스 파일을 동기모드와 비동기모드로 로드를 할 수 있는데 기본적으로는 동기모드로 로드를 한다. 만약 비동기모드로 로드를 하고 싶을 경우는 Ext.require를 이용해서 처리할 수 있다. 하지만 다음과 같이 Ext.require 만 사용해서 Sencha 의 클래스 파일을 로드시키면 비동기방식으로 로드를 하기 때문에 document의 로드와 순서적으로 비동기 적으로 로드가 발생해서 Ext.require로 로드가 된 것이 아니라 같은 경로의 Person.js 파일을 먼저 찾게 되어서 WARN 이 발생한 것을 확인할 수 있다.

<!DOCTYPE html>

<html>

<head>

<title>sencha 테스트</title>

Ext.require("Person");

document.addEventListener("DOMContentLoaded", function(){

var person = Ext.create("Person", {

name:"saltfactory",

email:"saltfactory@gmail.com"

});

document.getElementById("person-name").innerHTML = person.getName();

document.getElementById("person-email").innerHTML = person.getEmail();

}, false);

</script>

</head>

<body>

<h1>Sencha Ext.require 테스트</h1>

<ul>

<li>email : <strong id="person-email"></strong> </li>

</ul>

<p></p>

</body>

</html>

정말 Ext.require과 상관없이 Ext.create가 이름을 가지고 Person.js 찾는지 확인하기 위해서 Person.js 파일을 classes라는 폴더로 이동을 하고 다시 실행을 시켜보았다. 그러면 다음과 같은 에러를 보게 될 것이다. 즉, 클래스를 명시적으로 로드하는 것을 찾지도 못했고, 명시된 것이 없어서 클래스 이름과 같은 Person.js 파일을 같은 경로에서 찾아봤지만 찾을 수 없다는 에러이다.

그래서 우리는 Sencha에게 Person이 ./classes/Person.js 라는 파일이라는 힌트를 주기로하자.

<!DOCTYPE html>

<html>

<head>

<title>sencha 테스트</title>

Ext.Loader.setConfig({

paths:{

'Person':'./classes/Person.js'

}

});

Ext.require("Person");

document.addEventListener("DOMContentLoaded", function(){

var person = Ext.create("Person", {

name:"saltfactory",

email:"saltfactory@gmail.com"

});

document.getElementById("person-name").innerHTML = person.getName();

document.getElementById("person-email").innerHTML = person.getEmail();

}, false);

</script>

</head>

<body>

<h1>Sencha Ext.require 테스트</h1>

<ul>

<li>email : <strong id="person-email"></strong> </li>

</ul>

<p></p>

</body>

</html>

다음 코드를 추가한다. 아직 비동기문제로 발생하는 Ext.require의 문제는 해결되지 않았다.

Secnch는 어플리케이션 로드를 담당하는 Ext.application 이라는 객체를 가지고 있는데 이것을 이용해서 Ext.require의 비동기로드 문제를 해결할 수 있다. Ext.application은 센차가 필요한 모든 클래스를 로드하고 난 다음에 launch 라는 메소드를 callback 하기 때문에 Ext.application의 launch 메소드에서 위 코드를 구현하면 된다.

<!DOCTYPE html>

<html>

<head>

<title>sencha 테스트</title>

Ext.Loader.setConfig({

paths:{

'Person':'./classes/Person.js'

}

});

Ext.require("Person");

Ext.application({

name:"SenchaTutorial",

launch:function () {

var person = Ext.create("Person", {

name:"saltfactory",

email:"saltfactory@gmail.com"

});

document.getElementById("person-name").innerHTML = person.getName();

document.getElementById("person-email").innerHTML = person.getEmail();

}

});

// document.addEventListener("DOMContentLoaded", function(){

// var person = Ext.create("Person", {

// name:"saltfactory",

// email:"saltfactory@gmail.com"

// });

// document.getElementById("person-name").innerHTML = person.getName();

// document.getElementById("person-email").innerHTML = person.getEmail();

// }, false);

</script>

</head>

<body>

<h1>Sencha Ext.require 테스트</h1>

<ul>

<li>email : <strong id="person-email"></strong> </li>

</ul>

<p></p>

</body>

</html>

이제 좀더 Sencha 스러운 코드가 완성이 되었다. Ext.application에서는 require라는 속성이 있기 때문에 Ext.require로 외부 클래스 파일을 로드한 것 처럼 Ext.application의 require 속성으로 외부 클래스를 로드해서 Sencha 어플리케이션 적용할 수 있다.

<!DOCTYPE html>

<html>

<head>

<title>sencha 테스트</title>

Ext.Loader.setConfig({

paths:{

'Person':'./classes/Person.js'

}

});

// Ext.require("Person");

Ext.application({

name:"SenchaTutorial",

requires:["Person"],

launch:function () {

var person = Ext.create("Person", {

name:"saltfactory",

email:"saltfactory@gmail.com"

});

document.getElementById("person-name").innerHTML = person.getName();

document.getElementById("person-email").innerHTML = person.getEmail();

}

});

// document.addEventListener("DOMContentLoaded", function(){

// var person = Ext.create("Person", {

// name:"saltfactory",

// email:"saltfactory@gmail.com"

// });

// document.getElementById("person-name").innerHTML = person.getName();

// document.getElementById("person-email").innerHTML = person.getEmail();

// }, false);

</script>

</head>

<body>

<h1>Sencha Ext.require 테스트</h1>

<ul>

<li>email : <strong id="person-email"></strong> </li>

</ul>

<p></p>

</body>

</html>

<참조>

1. http://docs.sencha.com/touch/2-0/#!/api/Ext.Loader

2. 이광호, Interpress, "센차터치 2 입문에서 활용까지", p. 106~p. 126

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실

Javascript 테스트 2. IntelliJ + JSTestDriver을 이용해서 Javascript 단위테스트하기 (Unit Test)

saltfactory — Thu, 18 Oct 2012 15:20:51 +0900

Javascript가 더이상 팝업이나 만들어주는 웹 페이지 embed script code가 아니라 웹 어플리케이션을 만드는 고수준 언어로 인식되면서 기존의 다양한 어플리케이션 개발 방법론으로 Javascript 개발에 적용되고 있다. 이 블로그에서 QUnit을 이용해서 브라우저에서 Javascript를 단위 테스트하는 방법을 소개한적이 있다. Javascript 테스트 1. QUnit을 이용해서 Javascript 단위테스트하기 (Unit Test) 보통 Java 웹 프로그램을 개발하면서 Javascript를 View를 개발하면서 많이 개발할 것으로 예상이 된다. (물론 고급 방법은 MVC를 분업해서 View만 다른 IDE를 통해서 개발하겠지만 작은 연구소나 중소기업에서는 웹 프로그래머들이 Java 웹 프로그램도 개발하고 front-end 개발도 동시에 할 것이다.)

그래서 IntelliJ에서 Javascript를 단위 테스트하는 방법을 소개하려고 한다. IDE는 보통 자신이 가지고 있는 Testing Tool이 포함이 되어 있다. IntelliJ의 JetBrain에서 Javascript Application 개발 툴로 WebStorm이 있는데 이 IDE에는 JSTestDriver라는 Javascript Testing Tool이 포함이 되어 있다. 하지만 IntelliJ는 Java Application 개발 툴로 JSTestDriver가 없기 때문에 Plugins으로 설치를 해야한다.

js-test-driver는 remote javascript testing 툴로 다양한 브라우저에 Javascript가 동작하는 것을 캡처링하여 단위 테스트를 하는 테스팅 툴이다. js-test-driver는 오픈소스 프로젝트로 http://code.google.com/p/js-test-driver/ 에서 보다 자세한 자료를 참고할 수 있다.

js-test-driver는 IntelliJ 뿐만 아니라 eclipse에서도 plugins을 설치해서 Javascript를 테스트 할 수 있다. 연구소에서 IntelliJ를 Java 개발 IDE로 선택해서 개발하고 있기 때문에 이 포스팅에서는 IntelliJ에서 Javascript를 js-test-driver를 이용해서 단위 테스트하는 방법을 소개한다.

IntelliJ에는 800개가 넘는 plugins이 존재하고 있다. IntelliJ에 Plugins을 추가로 설치하고 싶으면 다음과 같이 Preferences의 Plugins 화면을 연다.

plugins 화면에서 Browse repositories 버튼을 선택한다. 그러면 설치 가능한 plugins를 목록들이 나오는데 JSTestDriver를 검색한다.

JSTestDriver를 선택해서 오른쪽 마우스 버튼을 클릭해서 install 메뉴를 선택하면 IntelliJ가 재시작되면서 JSTestDriver plugins이 설치가 된다.

단위 테스트를 위해서 프로젝트를 생성하고 간단한 코드를 만들어보자. src/Person.js 파일을 생성한다.

/**

* filename : Person.js

var Person = function(){

this.name = "saltfactory";

};

Person.prototype.getName = function(){

return this.name;

};

그리고 Person 객체를 테스트하기 위해서 test/PersonTest.js 파일을 생성한다. 테스트는 간단하게 Person 객체의 이름을 가져와서 문자열과 같은지 assertion을 하는 것이다.

/**

* filename : PersonTest.js

PersonTest = TestCase("PersonTest");

PersonTest.prototype.testGetName = function(){

var aPerson = new Person();

assertEquals(aPerson.name, "saltfactory");

};

Javascript Test 파일까지 만들었으면 이제 IntelliJ에서 JSTestDriver를 이용해서 테스트파일을 실행시켜야한다. IntelliJ의 Run/Debug Configurations를 열기 위해서 Run 버튼 옆에 설정 버튼을 선택한다. Run/Debug Configurations 창이 열리면 왼쪽 상단의 + 버튼을 눌러서 TestDriver를 하나 생성한다. 우리가 테스트할 객체 이름이 Person 이기 때문에 PersonTest라고 이름을 정한다. Test는 Javascript test file을 실행시키기 원하기 때문에 Test에서 Javascript test file 항목을 선택한다. 그리고 JS test file에서 위에서 생성한 PersonTest.js 파일을 선택한다.

이제 설정이 마쳤으니 Javascript로 생성한 Person 객체를 테스트해 보자. 그런데 바로 테스트가 진행이 되지 않을 것이다. 이유는 js-test-driver는 브라우저에서 javascript를 동작하는 것을 캡처링하기 때문에 브라우저를 캡처링하기 위한 디버깅 서버가 동작해야하기 때문이다.

그럼 디버깅 서버를 동작하고 브라우저와 연결하자. JS TestDriver Server 탭을 선택한다. Js TestDriver Server가 나타나면 왼쪽의 실행 버튼을 누른다. 그러면 There are no browsers captured 라는 메세지인데 이것은 디버깅 서비가 어떤 브라우저와 연결할지를 정하지 않아서이다. chrome을 선택해보자. 그럼 실제로 chrome 브라우저에서 동작하는 것을 캡처링 하겠다는 의미이고 chrome 과 js-test-driver의 화면은 다음과 같이 보이게 된다.

다시 IntelliJ에 가서 PersonTest.js를 테스팅하기 위해서 PersonTest 로 지정한 Run/Debug를 실행한다. 만약 단위 테스트에서 문제가 발생하지 않으면 초록색이 나타나면서 에 문구가 나타나지 않는다.

만약 단위테스트가 실패로 떨어지게 되면 붉은색으로 나타나면서 원인까지 분석해준다.

이제 Java application 개발에만 사용했던 IntelliJ를 View를 만들면서 Javascript를 개발하는데 사용할 수 있게 되었다.

<결론>

IntelliJ는 매우 강력한 Java IDE 이다. IntelliJ는 수많은 plugins를 가지고 있는데 Javascript Application IDE 에 들어 있는 JSTestDriver를 plugins으로 설치해서 Java를 개발하면서 Javascript 코드를 단위테스트할 수 있다. IntelliJ의 안정성과 빠른성능으로 보다 쾌적하게 Javascript를 개발할 수 있을 뿐만 아니라, JSTestDriver로 단위테스트를 할 수 있어서 Javascript의 코드 품질을 높일 수 있을 것으로 예상된다.

<참조>

1. Javascript 테스트 1. QUnit을 이용해서 Javascript 단위테스트하기 (Unit Test)

2. http://code.google.com/p/js-test-driver/

3. http://code.google.com/p/js-test-driver/

4. http://confluence.jetbrains.net/display/WI/Getting+Started+with+JsTestDriver+IntelliJ+plugin

<연구원>

작성자 : 송성광 개발 연구원

프로필 : http://about.me/saltfactory

이메일 : saltfactory@gmail.com

트위터 : @saltfactory

페이스북 : http://facebook.com/salthub

연구소 : 하이브레인넷 부설연구소

연구실 : 창원대학교 데이터베이스 연구실