본문바로가기

Document

제품 개요

핵심 컨셉 및 특징
HTML5

HTML5가 확산되고 있는 요즘, 과거의 RIA(Rich Internet Application)이나 낡은 방식의 웹 시스템, Client-Server 방식의 애플리케이션은 벤더 종속성, 낮은 처리 성능, 크로스 브라우징/플랫폼 지원에 있어 한계점을 드러내고 있습니다. HTML5기반 웹 시스템으로의 고도화가 운영 관점의 주요 과제로 떠올랐으며, 최신 웹 기술에 대한 역량 확보 없이, 특히 대규모 애플리케이션에서는 이를 달성하기는 쉽지 않은 상황입니다.

Alopex UI는 최소한의 학습으로도, 고품질의 UI/UX를 갖는 HTML5 웹 애플리케이션을 개발할 수 있도록 도와주는 프레임워크입니다.

핵심 컨셉

jQuery
  • jQuery 플러그인 기반: jQuery형태의 친숙한 API를 제공하여 코드 가독성을 향상시킵니다.
  • 마크업 위주: HTML 마크업에 다양한 속성을 제공하여 자바스크립트 코드를 최소화합니다.
  • 메타 기반이 아닌 순수 웹 기술 사용: 컴파일 없이 design-time과 run-time의 코드가 동일하여 디버깅이 편리합니다.
  • 벤더 종속성 최소화: 표준 웹 기술(HTML, Javascript, CSS)만을 사용하여 벤더 종속적인 언어를 제공하지 않습니다.

특징

  • HTML5 지원: 순수 웹(Web) 기반으로 별도의 메타(meta) 언어를 사용하지 않으며 HTML5 기능을 자유롭게 사용할 수 있습니다.
  • 크로스브라우징: 웹 표준을 준수하여 크로스브라우징을 지원합니다.
  • 오픈소스: jQuery기반 프레임워크로서 jQuery플러그인 등 다양한 오픈소스와의 통합이 용이합니다.
  • 생산성: 마크업 위주의 UI 구성을 통해 자바스크립트 코드 최소화와, 자동 데이터바인딩을 통해 화면 개발 생산성을 향상시킵니다.
Alopex UI 구성

Alopex UI 구성도

alopex ui flow

폼 컨트롤과 달력, 레이어 팝업, 탭 등을 포함한 UI 컴포넌트 영역과, 페이지/통신/데이터 처리 등의 자바스크립트 API 영역으로 구성

Alopex UI 구성요소

UI 컴포넌트

날짜 입력 박스나 레이어 팝업(다이얼로그), 아코디언, 탭 페이지 등 웹 애플리케이션 작성에 필수적인 30여종의 컴포넌트를 제공합니다.

<div class="Dateinput">
	<input>
</div>

컴포넌트는 위와 같이 간단한 마크업만으로 사용 가능합니다.

유효성 검증

필수 값, 숫자/문자, 최대길이, 이메일 등의 다양한 기본 룰(rule)을 제공하고, 사용자 룰을 등록하여 사용할 수 있습니다. Validation 역시 마크업만으로 지정하여 사용 가능하므로, 자바스크립트 코드 구현을 최소화할 수 있습니다.

<input class="Textinput" 
	data-validation-rule="{required: true , minlength: 4, maxlength: 8}">

데이터 바인딩

마크업에 데이터 바인딩 키(key) 명시를 통해, 통신 호출 시 요청/응답 데이터의 키(key)값과 매핑하여 자동으로 데이터가 바인딩되는 기능을 제공합니다. 이를 통해 뷰와 데이터간 연결을 처리하는 자바스크립트 코드량을 감소시킬 수 있습니다.

<input data-bind="value: id">
<label>
	<input class="Radio" name="gender" value="male" data-bind="checked:gender">
</label>
<label>
	<input class="Radio" name="gender" value="female" data-bind="checked:gender">
</label>

통신 처리기

통신 어댑터를 사용하여 미리 정의된 어댑터가 백엔드 데이터 포맷 변환과 에러 처리 역할을 수행하며, 화면상의 통신 요청 구현에서는 백엔드 데이터 포맷에 관계없이 순수한 요청/응답 처리에만 집중할 수 있습니다.

자동 데이터바인딩을 통해 필드별로 값을 응답/요청할 필요 없이 상위 태그만으로도 자동 요청/응답 필드 매핑 처리가 가능합니다.

$a.request('tx001', { //URL이 아닌 ID기준으로도 통신 요청 가능
	data: '#form', //자동 데이터바인딩을 통해 form에서 파라미터 추출
	success: '#grid', //자동 데이터바인딩을 통해 grid에 응답 값 바인딩
});

페이지와 화면 이동

페이지(Page)

페이지용 자바스크립트를 작성할 때, $(document).ready와 각종 글로벌 함수들을 혼재하여 사용하는 대신, $a.page라는 컨트롤러를 이용하여 페이지 스크립트를 모듈화합니다.

$a.page(function(){
	this.init = function(){
		//초기화 시 수행될 내용 구현
	};
	this.getUsers = function() {
		//외부에서 접근가능한 getUser 함수 구현
	};
	function updateUser() {
		//외부에서 접근 불가한 updateUser 함수 구현
	},
	...
});
화면 이동(navigate)

일반적으로 클라이언트의 URL변경만으로는 화면 이동 간 파라미터를 전달할 수 없습니다. 그러나, Alopex UI의 $a.navigate API를 사용하면 정적으로 페이지를 이동하고 파라미터를 전달할 수 있습니다.

동작 과정

동작 과정 개념도

alopex ui flow

통신 처리기와 자동 데이터바인딩을 통해 뷰(HTML)에 값을 입/출력하고, 통신 어댑터에서는 백엔드에 대한 다양한 I/O 포맷에 맞게 매핑 처리

동작 과정 상세

Alopex UI의 화면 자바스크립트가 수행되는 과정에 대한 개요입니다. 상세 개발 방법에 대해서는 개발가이드 문서를 참고하세요.

1.페이지 선처리

  • Alopex UI에서는 화면용 자바스크립트를 페이지(page)라는 scope으로 모듈화합니다.
  • 각 페이지에서 공통적으로 먼저 수행되어야 할 선처리 내용은 각 페이지가 아닌 공통의 자바스크립트 파일에서 init함수를 정의하여 모든 페이지에 적용될 수 있도록 합니다.
  • 이를 통해, 각 페이지의 선처리 프로그램들을 개별 javascript 파일의 링크에 의존하지 않고, 가시적인 초기화 과정을 통해 일원화하여 관리할 수 있습니다.

2.페이지 컨트롤러

  • 페이지(page)는 각 화면별로 별도 자바스크립트 파일로 작성합니다.
  • Ajax를 통한 서비스 호출, 이벤트 처리 등의 컨트롤러 구현은 모두 페이지 컨트롤러인 $a.page내에 작성합니다.
  • 페이지의 자세한 설명은 Page을 참고하세요.

3.통신 처리기

  • 통신 처리기는 백엔드 I/O 포맷에 맞게 미리 정의한 통신 어댑터를 통해 구동됩니다.
  • 모든 통신에서 공통적으로 수행될 선/후 처리는 $a.request.setup을 통해 한 번만 설정하면 됩니다.
  • 자동 데이터바인딩을 통해 뷰-파라미터 전환, 응답결과-뷰 전환이 될 수 있습니다.

4.통신 요청

  • $a.request라는 API를 통하여 Ajax 통신을 수행합니다.
  • 통신 요청의 자세한 방법에 대해서는 Request를 확인하세요.

5.뷰

  • 마크업에 명시된 data-bind태그를 통하여 별도의 매핑 과정 없이 응답 결과가 뷰에 렌더링됩니다.