웹표준 프레임워크 메타웍스3의 적용 사례와 생산성

제2회 유엔진 오픈-아키텍트 데이 - 2012

웹표준 프레임워크
– 메타웍스3의 적용 사례와 생산성
Presenter: 조진원 선임커미터
2012. 06. 07

- 메타웍스3 기반의 프레임워크 이해

- 메타웍스3를 이용한 개발 실전

- 메타웍스3 기반의 프로세스 코디 구현방안 공유

고난이 요구사항

• 순수웹
• 페이지 비전환
• Lazy Loading
• 키/마우스 바인딩
• 모바일 동시지원
• NIO기반 채팅 시장의 요구
수준

품질 생산성
• 서버/클라이언트 개발
• 트랜잭셔널 자 그리고 디자이너 역
• 요소간 간섭최소화 할구분어려워 –
• 일관성 있는 사용자 CSS/JS/Java/AJAX
경험과 예측성 • 다양한 언어를 넘나드
• UI기반의 테스트 는 과정의 커뮤니케이
자동화 션 비용
• 순수자바개발자만
있다.

POJO 프레임워크 – 메타웍스3

1. 웹 / 모바일 어플리케이션을 다양한 언어 및 기술적 디테
일의 이해없이 구현함

1. 순수한 자바언어의 문법과 동작구조를 기반으로 어플리
케이션을 만들 수 있어 초보 언어 학습자에게 적합

1. 학습자가 적은 노력으로 빠른 결과물을 확인할 수 있어
동기 유발 / 유지 효과가 높음

1. 객체지향 개념을 철저하게 이해시킬 수 있는 기반 구조가
마련됨

1. 내장된 웹 기반 개발도구 (클라우드 IDE) 를 통하여 컴파
일, 오류확인, 디버그 등을 할 수 있으며,

1. LMS와의 연계를 통하면 문제출제, 시험 등을 온라인 상
에서 바로 할 수 있다.

– 흩어진 메타데이터를 자동으로 관리하는 메타웍스3

General Approach: Using Metaworks3:
Spring MVC, JSON, jQuery, Hibernate

meta
data Controlle
r
Domain class
Controlle (java version)
r
View DAO

You have to
meta Synchronize the gap meta
Metaworks Metaworks
View data DAO data
Synchronizes the Proxy
meta
Synchronizes the Proxy
data
Domain class
Domain class Domain
(Hibernate ver
(JS version)
sion) Class
(Java)

< 선언형 프로그래밍 모델과 추상성 극대화를 통한 생산성>
• 프로그래밍 모델 추상화
• 자바-자바스크립트 간 통신 추상화
• 자바-자바스크립트 간 메타데이터 자동 동기화
• 자바스크립트 인터랙션 (버튼, 키보드/마우스) 추상화
• 네비게이션 추상화
• 롱-폴링 기반 콜백 추상화
• 데이터베이스 접근 추상화
• JPA어노테이션 기반 ORMapping
• 데이터베이스 캐시 / 동기화
• 트랜잭션 자동화 (스프링없이 동작가능)

<테스트 자동화와 품질 향상>
• 매우 짧은 코드 – 품질에 직결
• 설계가 곧 구현 – 모델중심의 생산성과 품질
• 아규먼트 없는 서비스메서드 – 객체의 응집도를 유지
• 웹 기반 테스팅 자동화
• Guided Tour 기능 자동화

기존 프로그래밍 모델 (이벤트 드리
븐)과 약간 차이가 있는 “선언형 프로
그래밍 모델”
– MDA, 메타데이터와 리플랙션을 계
승함

1. 모델 중심 아키텍처의 장점은 적은 코드량과
도메인 중심의 비즈니스 목적 중심의 코드로
품질과 생산성을 동시에 높힘
2. 메타웍스3의 독특한 POJO선언은 웹의 입력
값과 버튼을 객체의 „필드‟와 „메서드‟로 기본
매핑하여 „모델 기반 기본 앱‟을 자동으로 구
현해주어 „선-프로토타이핑‟ 이 가능하다.
3. 이후 객체에 특화된 디자인과 인터랙션을 공
통모듈 디자이너와 개발자가 분산되어 작업
할수 있으며, 그 사이에도 도메인 개발자는
작업을 지속할 수 있다.
4. 컴포넌트가 쌓이면 쌓일수록 개발의 추상성
과 생산성은 배가된다.

www.metaworks3.org website Social CMS

ProcessCodi Enterprise 2.0 Platform

Steps:

1. 무엇이 „객체‟인지 파악하기
2. 객체를 잘 (응집도 높게) 모델링하기
3. 객체에 화장시키기
4. 객체들을 데리고 앱을 만들기

Step 1. 분석
무엇이 “객체”인가?
그리고..무엇이 “컨텍스트”인가?

1. Recognizing Objects in facebook - Login.java

UserId
Password

Login

Login.java

userId property Password property Login method

1. Recognizing Objects in facebook - Main.java

Menu object Selection object Contents object Person object

Login.java Main.java

UserId
Password
return Menu.java Content.java
new Main()
Login
return
Selection.java new AContent() AContent.java

return
new BContent() Bcontent.java

1. Recognizing Objects in facebook - Person objects in different „Context‟

Where: NORMAL Where: MINIMISED Where: MEDIUM

Step 2. 모델링
객체와 화면요소를 최대한
단순하게 매핑하라!


UserId
Password
new Main()
Login

Selection.java

login() 이 실행되면 Main
을 리턴하므로
Main을 화면에 그려라!


UserId
Password
new Main()
Login
return
Selection.java new AContent() AContent.java

return
new BContent() Bcontent.java

(화면에 여러 객체가 이미 존재하
는 경우) 리턴된 객체는 자신이 가
장 부합되는 응집력을 가진 화면
요소에 가서 그려짐

모델링이 곧 구현!

# 객체의 응집도를 따라 서버에서 리턴된 객체가 표시될 위치를 잡는다
 타겟을 정의하지 않아도 위치를 찾기 때문에 UI 컨트롤 코드가 배제됨

# 도메인 객체 이외의 UI와 관련된 컨트롤은 가능한 대표 모델 몇가지만을 사용
하고 가능한 어노테이션에 옵션을 준다 (e.g. Face)
 일괄적 UI 표준을 적용하기 용이함

# 데이터를 접근하는 „databaseMe()‟를 통해 데이터와 웹입력 값의 비교 및 처리
를 추상화한다
 데이터 접근에 대한 구체적인 코드가 줄어들고 모델레벨이 유지됨

Step 3. UX 일관성기반 디자인
디자이너는 매핑된 모델별로 디자인 작업을,

그리고 자바스크립트 개발자는 유저 인터랙션이
높은 것들을

최대한 “컴포넌트” 단위로 작성한다.

* 요구사항 별로 작성하지 않고, 요구사항을
수집하여 공통사항을 일반화 하여 컴포넌트
단위로 UI와, 스크립트를 „한번만‟ 만든다.

메타웍스3 컴포넌트 래핑 예시 – 구글 챠트 컴포넌트

자바 = 모델 HTML = Face 자바스크립트 = FaceHelper

메타웍스3 컴포넌트 래핑 예시 – 챠트 컴포넌트

자바 = 모델


HTML = Face


자바스크립트 = FaceHelper

Step 4. 추상성 높은 앱 개발
1. 자바스크립트와 CSS, 심지어 JSP, 서블릿도
모르는 일반 자바만을 다루는 개발자로 구성된 팀

2. 적당한 도메인 지식을 갖고 있고,

3. 고객과 협의를 할 수 있는 커뮤니케이션 스킬을
가졌다고 가정.

컴포넌트 조합 – 화이트박스 사용

자바 개발자는 UI요소들을
자바의 관점으로만 통합하
여 불러쓴다

Cloud IDE

• Pure Web based
IDE
 No SDK, IDE download and
Installation Required
• Java Compilation
on the fly
• Execution and
Debugging
• Code Assistance
• System Access & Bad
Code Prohibition
(e.g. Infinite Loop)

 Now, your whole developers don’t require high-end development devices and PCs, just give them a ‘netbook’ or even an iPad since your developer now
requires internet connection only.

Cloud IDE – Mobile Simulation for Web App Development

• Phonegap Simulation
• Exportation to phonegap
app project targeted to
multiple mobile OS
• Accerlometer, Location
Service, Camera, Vibration

Developed app from this platform can be celebrated through their public/private
social network to enable peer-review, getting feedback, or triggering others to branch
from the source code.

Metaworks3 IDE eXo IDE Cloud9 IDE Orion
(UClipse)

License MIT/LGPL Commercial Commercial EPL
/SaaS (Free) /SaaS (Free)

Online Coding O O O O

Compilation O O O (Node.js) X

Run O ? (need PaaS) O (Node.js) X

Debugging O (LGPL) X O (Node.js) X

SCM SVN/Git Git Git Git

Process Modeling O (LGPL) X X X

Entity Modeling O (LGPL) X X X

Rule Modeling O (LGPL) X X X

Layout Editor O (LGPL) X X X

Security O ? (need PaaS) O X

Social Coding Chatting/FB X Chatting X

ALM Code Review / Code Review / Code Review X
CI / Scrum CI (need PaaS)

[진입 장벽 최소화]
•프로그래밍 초보자도 쉽게 이해가능한 구현 모델
•객체 지향 언어의 이해를 강력하게 유도 (응집도, 다형성)
•개발에 필요한 장비, 환경 세팅의 최소화
•교수와 학습자간의 실시간 학습진도 체크 및 지도(채팅, 제어 등) 가능
•온라인 현장지도의 한계극복 (설치문제 등)

[숙제 및 평가에 활용]
•시험시간이 오버되면 자동으로 IDE 사용이 차단
•과제제출물의 테스트 자동화로 많은 수강자의 평가 용이
•Copy&Paste의 기능을 차단하여 커닝 방지

[학습자 성향 분석 및 소셜네트워크 형성]
•학습자의 코딩 실수의 패턴을 파악하여 힌트부여
•학습자 수준별 클러스터링 통하여 학급 편성
•나중엔 SNS상에서 과외선생이 나올 수 도…. 수익모델로의 연결…

1. 서버 관련 FAQ - 1

질문) 필드명과 메서드명을 동일하게 작성했더니 실행이 되지 않습니다.
int indent = 0;
@ServiceMethod
public void indent(){
indent += 10;
}

답변)
서비스 메서드와 필드명이 동일한 경우 메타웍스3에서는 정상적으로 필드와 메서
드를 구분하지 못해 오류를 발생시킵니다. 위의 코드는 다음과 같이 서로 다른 이
름으로 사용하세요.
int indentDepth = 0;
@ServiceMethod
indentDepth += 10;
}


질문) 다음과 같이 서비스 메서드가 매개변수를 가질 수 있나요?
@ServiceMethod
public void indent(int x){
indentDepth += x;
}

답변)
메타웍스3에서는 아키텍처 상에서 서비스 메서드를 호출할 때에는 매개변수를 전
달할 수 없도록 하여 응집도 높은 객체설계를 유도합니다. 이는 개발 생산성과 품
질에 직결됩니다. 만약 특정 값을 사용하고자 할 경우에는 아래 예시처럼 멤버 필
드를 선언하거나 @AutowiredFromClient를 사용하세요.
int getX() { … }
void setX(int x) { … }

@ServiceMethod
indentDepth += getX();
}


질문) 다음과 같이 코드를 하였는데 화면이 멈추어 버립니다.
class Node {
Node[] child;
}

답변)
메타웍스3에서는 자신과 동일한 객체를 직접 가지면 재귀호출이 발생하게 됩니다.
따라서 자신과 동일한 객체를 소유하려면 ArrayList와 같은 Collection 등을 이용하
여 우회적으로 사용하여야 합니다.
class Node {
ArrayList<Node> child;
}


질문) 다음과 같이 서버에서 Annotation을 사용하여 Client 객체를 얻으려고 하는
데 정상동작 하지 않습니다.
class MainPage {
@AutowiredFromClient
ClientSession session;
}

답변)
메타웍스3에서는 클라이언트를 가져오는 객체에 대해서는 public 접근제한자에
국한해서 지원합니다.
class MainPage {
@AutowiredFromClient
public ClientSession session;
}


질문) ServiceMethod Annotation을 사용했음에도 불구하고 has no method
‘myMethod' 라는 오류가 발생합니다.
class MainPage implements IMainPage {
@ServiceMethod
public void myMethod() { … }
}

답변)
메타웍스3에서는 인터페이스를 상속하는 클래스에 대해서는 해당 인터페이스 메
서드를 주 참조 클래스로 인식합니다. 따라서 구현되는 서비스 메서드의 원형을
인터페이스에서도 넣어 주어야 합니다.
Interface IMainPage {
@ServiceMethod
public void myMethod();
}
class MainPage implements IMainPage{
public void myMethod() { … }
}


질문) 자바 클래스를 정상적으로 생성했음에도 불구하고 No Converter for
‘yourClass’ 라는 오류가 발생합니다.
package my.one.two;
class yourClass { … }

답변)
메타웍스3에서는 사용하려는 패키지에 대해서는 dwr.xml 파일에 선언해 주어야
합니다. 이는 화면에서 참조하는 클래스를 인식하기 위함입니다.
dwr.xml

<convert converter="metaworks" match=“my.one.two.*"/>


질문) ORMapping Annotation이 인식되지 않는것 같습니다.
@Table(name=“Login”)
interface ILogin extends IDAO {
@Id
@ORMapping(databaseFields={“id”}, objectFields={“num”})
public int getNum();
….
@ORMapping(databaseFields={“name”}, objectFields={“name”})
public String getName();
….
}

답변)
ORMapping은 DB Table의 필드명과 자바 클래스의 필드명이 다를 경우에 인식이
됩니다. 따라서 동일한 이름으로 되어 있을 경우에는 ORMapping을 사용할 필요
가 없습니다. 만약 사용하게 되면 어떤 공간을 저장 영역으로 써야 할 지에 대한 혼
돈이 발생하게 됩니다.

2. 클라이언트 관련 FAQ - 1

질문) ejs를 만들었는데 반영이 되지 않습니다. 이유가 무엇인가요?

답변)
ejs는 자바클래스와 동일한 폴더에 작성할 수도 있고, webapps 이하의 contents
영역에 자바클래스의 패키지와 똑같은 이름의 path 상에 작성할 수도 있습니다. 그
러나 만약 두 군데 모두 ejs가 존재할 경우 자바클래스와 동일한 폴더 내에 작성된
ejs가 우선 적용됩니다.
만약 자바클래스에서 @Face Annotation을 통해 특정 ejs를 지정한 경우에는
@Face를 통해 지정된 ejs가 최우선 적용됩니다.

질문) ejs가 변경되었을 때 반영되는 속도가 느립니다. 빠르게 할 수 있나요?

답변)
ejs의 경로 URL을 웹 브라우저로 하나 열어 두고 변경 시 그곳을 refresh 시키면
ejs의 반영이 빨라 집니다.


질문) 자바클래스로 일부의 값이 전달되어 오지 않습니다. 이유가 무엇인가요?

myEjs.ejs

ID : <%= fields.userId.here() %><br/>
PW : <%= fields.password.here() %><br/>

답변)
fields 객체를 사용할 경우 동일명의 필드를 호출하게 되면 가장 마지막에 입력된
값을 가져오게 됩니다. 위 예시와 같이 fields의 id 를 잘못하여 두번 사용하게 되면
실제 자바클래스에서는 id 값으로 pw 값이 들어오게 됩니다.

myEjs.ejs

ID : <%= fields.userId.here() %><br/>
PW : <%= fields.password.here() %><br/>

질문) 화면이 뜨지 않고 깨집니다. 이유가 무엇인가요?

myEjs.ejs

Hello!!!

답변)
자바클래스와 연동된 객체를 호출하는 것은 ejs의 코멘트에 의해 실행을 막을 수
없습니다. 결론적으로 ejs Template 엔진이 계속하여 코멘트 영역에 html을 넣게
되므로 화면이 깨지게 됩니다.

3. 클라이언트 관련 스크립트 FAQ - 1

질문) ejs.js 생성자에서 자바클래스 객체를 얻어오지 못합니다. 이유는?

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) {
var obj = mw3.getObject(objectId);
}

답변)
ejs.js 내의 생성자와 getValue메서드 내에서는 mw3.getObject(objectId) 대신
mw3.object[objectId] 를 사용해야 합니다.

myEjs.ejs.js

var obj = mw3.object[objectId];
}


질문) ejs.js 에서 자바클래스 객체의 필드를 얻고자 합니다.
myEjs.ejs.js

this.objectId = objectId;
this.className = className;
alert(this.userId); //  가능한가요?
}

답변)
ejs.js 내의 this는 FaceHelper 클래스입니다. 따라서 자바클래스 객체를 획득 후
해당 필드를 얻으셔야 합니다.
myEjs.ejs.js

….
var obj = mw3.objects[this.objectId];
alert(obj.userId);
}


질문) 다음과 같은 오류는 왜 발생하나요?
Error marshalling data. See the logs for more details.

답변)
ejs.js 의 package_className.prototype.getValue 에서 값을 type 에 맞지 않게 넣
을때 발생하므로 type 확인 및 넘겨주는 값(value) 확인하셔야 합니다.

질문) ejs.js 파일이 반영이 되지 않습니다. 이유가 무엇인가요?

답변)
ejs.js는 기본적으로 ejs 파일이 존재해야 그 경로를 통해 ejs.js를 찾아내어 실행하
게 됩니다. 따라서 ejs 파일이 존재하는지 확인하세요.

웹표준 프레임워크 메타웍스3의 적용 사례와 생산성

웹표준 프레임워크 메타웍스3의 적용 사례와 생산성

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to 웹표준 프레임워크 메타웍스3의 적용 사례와 생산성

Similar to 웹표준 프레임워크 메타웍스3의 적용 사례와 생산성 (20)

More from 영재 김

More from 영재 김 (7)

웹표준 프레임워크 메타웍스3의 적용 사례와 생산성