불친절한자수씨

다중 프로젝트의 디펜던시 버전 관리

다중 프로젝트를 사용할 경우 디펜던시의 버전 번호를 각각의 pom.xml 파일에 정의하여 설정하여, 새로운 버전으로 업그레이드가 이루어질 경우 모든 pom.xml 을 변경해야 합니다.

메이븐에서는 <dependencyManagement> 엘리먼트를 통하여 디펜던시 버전 번호를 병합할 수 있는 방안을 제공합니다.

부모 POM 에서 <dependencyManagement> 정의를 통해 자식 POM 에서 버전을 명기하지 않아도 디펜던시를 참조할 수 있습니다.

예제

부모 POM의 종송성 버전 정의

<project> <modelVersion>4.0.0</modelVersion> <groupId>kr.co.vicki</groupId> <artifactId>a-parent</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>pom</packaging> <properties> <spring.data.version>[1.1.0, ]</spring.data.version> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-jpa</artifactId> <version>${spring.data.version}</version> </dependency> </dependencies> ... </dependencyManagement> ... </project>

자식 프로젝트 POM

<project> <modelVersion>4.0.0</modelVersion> <parent> <groupId>kr.co.vicki</groupId> <artifactId>project-a</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <version>${parent.version}</version> <packaging>jar</packaging> ... <dependencies> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-jpa</artifactId> </dependency> </dependencies> ... </project>


위와같이 자식 프로젝트에 버전을 명시하지 않아도 부모 POM <dependencyManagement> 엘리먼트에서 정의되었기 때문에, 자식 프로젝트의 spring-data-jpa 디펜던시의 버전 번호가 전달됩니다.


결론적으로 <dependencyManagement> 엘리먼트는 버전 번호를 지정하지 않아도 어느 하위 프로젝트라도 디펜던시를 정의할 수 있도록 해주는 환경변수와 같습니다.

모든 프로젝트에서 사용하는 디펜던시라면 부모 POM 에서 정의하여 사용하는 것이 훨씬 관리에 용이합니다.

참고자료

Maven, Sonatype이 만든 Maven 핵심 가이드 (팀 오브라이언 지음 / 장선진 옮김)

자바스크립트 환경변수를 js 파일에 글로벌 변수로 선언한 것을 DB화 시키기 위해 마이그레이션 툴을 만들다가 자바에서 기본으로 제공해주는 스크립트 엔진을 이용하여 파싱을 해보았습니다.

Parser 만들기

javax.script.* 클래스들을 이용하여 자바스크립트 글로벌 변수를 파싱하는 클래스 입니다.

JsGlobalVariableParser.java

package kr.co.vicki.common.parser.js; import java.io.File; import java.io.FileNotFoundException; import java.io.FileReader; import java.io.InputStream; import java.io.InputStreamReader; import java.io.Reader; import java.util.Arrays; import java.util.Collections; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.script.Bindings; import javax.script.ScriptContext; import javax.script.ScriptEngine; import javax.script.ScriptEngineManager; import javax.script.ScriptException; import org.springframework.stereotype.Component; import sun.org.mozilla.javascript.internal.NativeObject; import kr.co.vicki.common.VickiCommonException; @Component("jsGlobalVariableParser") public class JsGlobalVariableParser { ScriptEngineManager scriptEngineManager; private List availableClasses; public GwConfigJsParser() { initialize(); } private void initialize() { scriptEngineManager = new ScriptEngineManager(); availableClasses = Arrays.asList(String.class, Boolean.class, Double.class, NativeObject.class); } private ScriptEngine createNewSciprtEngine() { ScriptEngine scriptEngine = new ScriptEngineManager().getEngineByName("js"); try { scriptEngine.eval(new InputStreamReader(GwConfigJsParser.class.getResourceAsStream("/json.js"))); } catch (ScriptException e) { throw new VickiCommonException("json.js 파일을 읽는 중에 오류가 발생하였습니다.", e); } return scriptEngine; } public Map<String, String> parseJsGlobalVariables(Reader jsReader) { Map<String, String> jsGlobalVariables = Collections.synchronizedMap(new HashMap<String, String>()); ScriptEngine scriptEngine = createNewSciprtEngine(); Bindings bindings = scriptEngine.getBindings(ScriptContext.ENGINE_SCOPE); try { scriptEngine.eval(jsReader); } catch (ScriptException e) { throw new VickiCommonException("json.js 를 로드 하는 중에 오류가 발생하였습니다. ", e); } for (String key : bindings.keySet()) { Object value = scriptEngine.get(key); if (!availableClasses.contains(value.getClass())) { continue; } if (value instanceof Double) { double d = (Double) value; int n = (int) d; value = new Integer(n); } else if (value instanceof NativeObject) { try { value = scriptEngine.eval("JSON.stringify(" + key + ")"); } catch (ScriptException e) { throw new VickiCommonException("자바스크립트 오브젝트를 처리하는 중에 오류가 발생하였습니다.", e); } } else if (value instanceof String) { value = "'" + value.toString() + "'"; } jsGlobalVariables.put(key, value.toString()); } return jsGlobalVariables; } public Map<String, String> parseJsGlobalVariables(File jsFile) { Reader reader = null; try { reader = new FileReader(jsFile); } catch (FileNotFoundException e) { throw new VickiCommonException("자바스크립트 파일을 읽는 중에 오류가 발생하였습니다. " + jsFile.getAbsolutePath(), e); } return parseJsGlobalVariables(reader); } public Map<String, String> parseJsGlobalVariables(InputStream jsInputStream) { Reader reader = new InputStreamReader(jsInputStream); return parseJsGlobalVariables(reader); } }

간략하게 설명을 하자면, 문자열형 (String), 실수형 (Double), 부울린 형 (Boolean), 자바스크립트 오브젝트 형 (NativeObject) 을 추출하여 Map 으로 반환하는 로직을 가지고 있습니다. 문자열의 경우에는 single quotation 으로 감싸는 작업을 했으며, 실수형의 경우에는 정수로 변환하는 작업을 처리하였습니다. JavaScript Object 의 경우에는 json.js 의 stringify 함수를 이용하여 Object 그대로를 문자열로 치환하였습니다.

javax.script 패키지의 클래스들은 Rhino 가 자바 표준으로 포함되면서 별도의 라이브러리 추가 없이 사용할 수 있게 되었습니다.

테스트

글로벌 변수를 가지고 있는 실험용 스크립트를 통하여 테스트를 진행해 보겠습니다.

test.js

var str_var = 'abc'; var int_var = 5; var bool_var = true; var obj_var = { name: 'vicki', email: 'vicki[at]vicki.co.kr' };

JsGlobalVariableParserTest.java

public void testParseJsGlobalVariables() { JsGlobalVariableParser parser = new JsGlobalVariableParser(); Map<String, String> globalVariables = parser.parseJsGlobalVariables(getClass().getResourceAsStream("/test.js")); assertNotNull(globalVariables); assertEquals(globalVariables.get("str_var"), "'abc'"); assertEquals(globalVariables.get("int_var"), "5"); assertEquals(globalVariables.get("bool_var"), "true"); assertEquals(globalVariables.get("obj_var"), "{name:'vicki',email:'vicki[at]vicki.co.kr'}"); }


녹색바가 정상적으로 뜨는 것을 확인하였습니다.

조금 더 정비할 사항이 있긴 하지만 현재 처리되어야 하는 상황은 충분히 처리가 가능합니다.

VMware 로는 설치가 안되어 후배의 권유로 VirtualBox 로 Windows 8 (Windows Developer Preview) 설치를 해 보았습니다.

설치

설치 초기 화면입니다. 설치 언어는 영어 밖에 없으나 시간/통화 포맷과 키보드 설정은 가능합니다.
















순조롭게 설치가 완료되었습니다.

초기 설정

컴퓨터 이름을 지정하는 화면입니다. 별다른 디자인 없는 녹색바탕에 하얀 글씨들... 테블릿을 노린듯한 밋밋한 디자인??

체험

너의 PC 를 준비 중이랍니다. 긴장되는 순간...


이건 몽미;;; 인터넷 익스플로러를 눌러도 아무런 동작을 하지 않습니다. 그냥 드래그만 될 뿐...










아래 쪽에 Desktop 을 누르니 친숙한 바탕화면이 나옵니다.


오피스를 보는 듯한 탐색기의 리본메뉴들...


업그레이드 된 작업표시줄~

그 외...

로그 오프 화면


Lock 화면


접근성???


윈도우+스페이스 키로 키보드 전환이 가능합니다. (Windows 7 에서는 다른 기능이지요 ㅎㅎㅎ)

마치며...

아직 완성본이 아니라 그런지 초기 화면에 동작하지 않는 것들이 많습니다. 그리고 바탕화면 형식에 익숙하다보니 초기화면은 조금 낯설음이 있습니다. 큼직한 화면에 저런 구조라면 쫌 아닌듯한 생각도 들고... 게다가 가장 중요한 시작버튼이 저런식으로 되어버리면... 난감 그 자체!!! 시작버튼이 개선되지 않는다면 사용할 확률은 0%...

이상 휴가기념 Windows 8 체험기를 마칩니다.

Windows Developer Preview 가 나왔다길래 VMware 에 설치를 시도 해보았습니다.

Windows Developer Preview with developer tools English, 64-bit (x64)

부푼 꿈을 안고 첫 설치 시도...



VMware 에서 문제가 발생하여 실패... 영어 압박으로 바로 포기...

Windows Developer Preview English, 32-bit (x86)

혹시 64비트가 지원이 안되나 해서 32비트로 설치하였으나 HAL_INITIALIZATION_FAILED 오류로 실패...






회사에 남는 노트북에 한번 설치를 해봐야겠네요 =ㅅ=...

잘 알려지지 않았지만 마크업 개발에서는 무쟈게 많이 쓰이는 HTML 태그들을 정리해보았습니다.

HTML <dl> Tag

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

HTML <ol>, <ul> Tag

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

참고자료

http://www.w3schools.com/tags/default.asp




이정도 익혀두면 태그를 분석하는데는 무리가 없을 듯 합니다.

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (4)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (5)

모델의 데이터 저장하기

지금까지 만든 그리드를 더블 클릭하여 보여지는 수정 창은 실제로 저장이되지 않습니다. 이번에는 저장버튼 클릭에 대한 처리를 진행합니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { ... init: function() { this.control({ 'userlist': { itemdblclick: this.editUser }, 'useredit button[action=save]': { click: this.updateUser } }); }, ... updateUser: function(button) { console.log('저장버튼을 클릭하였습니다.'); } });

'useredit button[action=save]' 라는 ComponentQuery selector 에 의해 저장 버튼 클릭에 대한 이벤트 핸들러를 추가하였습니다.

'useredit button[action=save]' 는 아래의 의미로 해석됩니다.


아래와 같이 정상적으로 핸들러에서 처리가 되는지를 확인한 후 다음단계로 진행합니다.



[수정] app/controller/Users.js
updateUser: function(button) { var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); }

 updateUser() 함수에서 up, down 함수를 이용하여 그리드의 레코드의 값을 변경하는 작업을 통해 아래와 같이 레코드가 변경된 것을 확인할 수 있습니다.

서버에 저장하기

지금까지는 Users 스토어에 하드코딩된 두개의 레코드를 사용하였습니다. AJAX 를 이용하여 손쉽게 데이터를 로드해보도록 하겠습니다.

[추가] data/users.json
{ success: true, users: [ {id: 1, name: 'Vicki', email: 'vicki[at]netsgo.com'}, {id: 2, name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] }

스토어에서 하드코딩된 레코드를 제거하고 proxy 를 추가하여 서버에서 데이터를 주고 받을 수 있도록 수정합니다.

[수정] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', model: 'Vicki.model.User', proxy: { type: 'ajax', url: 'data/users.json', reader: { type: 'json', root: 'users', successProperty: 'success' } } });


proxy api 를 통해 손쉽게 read, update 에 대한 처리를 할 수 있습니다.
[수정] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', model: 'Vicki.model.User', proxy: { type: 'ajax', url: 'data/users.json', reader: { type: 'json', root: 'users', successProperty: 'success' } } });

[수정] app/controller/Users.js::updateUser()
updateUser: function(button) { var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); this.getUsersStore().sync(); }


스토어의 sync() 함수를 통해 proxy api 의 update 처리를 하였습니다.




이상으로 Ext JS 4 - MVC 구조를 이용한 시작하기를 완료하였습니다. Ext JS 3 보다는 확실히 구조화되어 그들의 뜻만 이해한다면... 자바만큼의 개발 퍼포먼스를 낼 것 같습니다. 개발툴만 지원된다면... 좋을테지만...

파일구조

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (4)

Store 만들기

지금까지 'Vicki.view.user.List' 컴포넌트는 내부에서 스토어를 생성했었습니다. 이번 작업은 다른 곳에서 스토어를 참조하여 수정이 가능한 구조를 만들 예정입니다.

[추가] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', fields: ['name', 'email'], data: [ {name: 'Vicki', email: 'vicki[at]netsgo.com'}, {name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] });

컨트롤러에서 새로 추가한 스토어를 로드하도록 변경합니다.
[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', stores: [ 'Users' ], ... });

그리드 리스트에서도 내부 스토어를 생성하는 대신에 참조하는 로직으로 변경합니다.
[수정] app/view/user/List.js
Ext.define('Vicki.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', store: 'Users', ... });

Model 만들기

위에서 만든 스토어도 내부에서 필드를 정의하고 있습니다. Ext JS 4 에서는 강력한 기능을 가지고 있는 Ext.data.Model 클래스를 통해 모델을 정의할 수 있습니다.

[추가] app/model/User.js
Ext.define('Vicki.model.User', { extend: 'Ext.data.Model', fields: ['name', 'email'] });

컨트롤러에 모델을 등록합니다.
[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', stores: [ 'Users' ], models: [ 'User' ], ... });

스토어에서 생성한 모델을 사용하도록 수정합니다.
[수정] app/store/Users.js
Ext.define('Vicki.store.Users', { extend: 'Ext.data.Store', model: 'Vicki.model.User', data: [ {name: 'Vicki', email: 'vicki[at]netsgo.com'}, {name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] });


컴포넌트 내부에 스토어를 정의하는 것과 다양한 기능을 제공하는 스토어와 모델을 정의하여 사용한 결과물이 아래와 같이 동일하게 나오는 것 까지 확인하였습니다.

파일구조

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (3)

그리드 제어하기

'Vicki.view.user.List' 클래스만 컨트롤 하도록 컨트롤러를 수정합니다.
[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List' ], init: function() { this.control({ 'userlist': { itemdblclick: this.editUser } }); }, editUser: function(grid, record) { console.log(record.get('name') + '이(가) 더블클릭 되었습니다.'); } });

컴포넌트 셀렉터의 'userlist' 는 alias 가 'userlist' 정의된 클래스의 인스턴스들을 처리하게 됩니다.

수정 윈도우 추가하기

그리드 데이터를 수정할 수 있는 윈도우 클래스를 생성합니다.

[추가] app/view/user/Edit.js
Ext.define('Vicki.view.user.Edit', { extend: 'Ext.window.Window', alias : 'widget.useredit', title : 'Edit User', layout: 'fit', autoShow: true, initComponent: function() { this.items = [ { xtype: 'form', items: [ { xtype: 'textfield', name : 'name', fieldLabel: 'Name' }, { xtype: 'textfield', name : 'email', fieldLabel: 'Email' } ] } ]; this.buttons = [ { text: 'Save', action: 'save' }, { text: 'Cancel', scope: this, handler: this.close } ]; this.callParent(arguments); } });

윈도우 내부에는 이름과 이메일 필드가 포함된 'form' 으로 구성되었습니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List', 'user.Edit' ], init: ... editUser: function(grid, record) { var view = Ext.widget('useredit'); view.down('form').loadRecord(record); }, });

views 에 'user.Edit' 를 추가하고 editUser 함수를 수정합니다.
Ext.widget('useredit') 라는 함수를 이용하여 'Vicki.view.user.Edit' 인스턴스를 생성할 수 있습니다.
윈도우 내부 form 패널에 그리드에서 선택된 레코드 정보를 채워주게 됩니다.

파일구조

지금까지 작업에 대한 파일구조는 아래와 같습니다.

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)
2011/09/13 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (2)

뷰 정의하기

현재까지 app.js 와 app/controller/Users.js 를 이용하여 애플리케이션을 구성하였습니다.
이제 그리드를 이용하여 사용자를 표시할 수 있는 뷰 영역을 구성해보도록 하겠습니다.

[추가] app/view/user/List.js
Ext.define('Vicki.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', title : 'All Users', initComponent: function() { this.store = { fields: ['name', 'email'], data : [ {name: 'Vicki', email: 'vicki[at]netsgo.com'}, {name: '자수씨', email: 'vicki[at]vicki.co.kr'} ] }; this.columns = [ {header: 'Name', dataIndex: 'name', flex: 1}, {header: 'Email', dataIndex: 'email', flex: 1} ]; this.callParent(arguments); } });



뷰를 정의했으면 컨트롤러에 관련된 뷰를 추가합니다.
views 에 네임스페이스와 view 패키지를 제외한 나머지 이름으로 추가합니다. 'Vicki.view.user.List' 뷰를 추가하는 것이므로 'user.List' 를 컨트롤러의 views 속성에 정의합니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { ... views: [ 'user.List' ], ... });

[수정] app..js
Ext.application({ ... launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'userlist' } ] }); } });

'Vicki.view.user.List' 의 alias 를 'widget.userlist' 로 정의하여 등록이 되었으므로, xtype 은 'userlist' 로 사용이 가능합니다.  

파일구조

지금까지 작성한 애플리케이션의 파일 구조는 아래와 같습니다.

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

2011/09/12 - [JavaScript/ExtJS] - Ext JS 4 시작하기 (1)

컨트롤러 정의하기

서버사이드의 MVC 모델 처럼 각종 이벤트와 처리를 담당하는 컨트롤러를 정의할 수 있습니다.
Ext.application 생성 시에 정의했던 appFolder 밑에 컨트롤러 파일을 생성합니다. (app/controller/Users.js)




[추가] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('사용자 컨트롤러를 초기화합니다. Application 의 launch 함수가 불려지기 전에 호출됩니다.'); } });

[수정] app.js
Ext.application({ ... controllers: ['Users'], ... });

생성한 컨트롤러를 애플리케이션에 추가하게 되면 자동으로 해당 자바스크립트 파일을 로드하게 됩니다. 컨트롤러의 init 함수는 Application 이 launch 되기 전에 호출이 되게 됩니다.





컨트롤러의 init 함수는 뷰에 대한 처리를 할 수 있으며, 다른 컨트롤러와의 연결에 사용하기도 합니다.
쉽게 예를 들어 패널이 렌더링 될 때 제어하기 위해서 control 함수를 이용할 수 있습니다.

[수정] app/controller/Users.js
Ext.define('Vicki.controller.Users', { extend: 'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render: this.onPanelRendered } }); }, onPanelRendered: function() { console.log('패널이 렌더링되었습니다.'); } });

Ext JS 4 에 추가된 것 중 하나가 ComponentQuery 입니다. 'viewport > panel' 은 "Viewport 의 직계 자손 컴포넌트 중 모든 Panel 을 찾아라" 라는 뜻입니다. ComponentQuery 의 자세한 내용은 기회가 되면 다시...

control 함수에 추가된 render 이벤트 핸들러에 의해 패널이 렌더링될 때 메시지에 콘솔 창에 출력되게 됩니다.






지금까지 작성된 프로젝트의 파일구조는 아래와 같습니다.

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture