Binding.setValue 의 활용

1. 클라이언트가 아닌 UI 개발자가 활용하는 Binding.setValue

바인딩을 사용하는 방법에 대해서는 많은 설명을 할애한 것 같습니다.

그로 인해 생기는 편리함에 대해서 더 설명하자면 지겨울 정도죠...

하지만 장점은 편리함만이 아닙니다.

이번 포스팅에서는 Binding.setValue API 의 색다른 활용법에 대해서 설명하고자 합니다.

Binding.setValue 는 클라이언트가 UI 측에 게임 데이터를 넣어주는 API 라고 설명했습니다.

클라이언트 개발자가 활용을 한다는 뜻이죠...

하지만 그뿐만이 아닙니다.

UI 개발자도 Binding.setValue 를 다양하게 활용할 수 있습니다.

2. UI 테스트 용도로 활용

일단 UI 개발시의 테스트에 활용할 수 있습니다.

꼭 클라이언트가 값을 넣어줘야 하는 것은 아니잖아요?

UI 개발자와 클라이언트 개발자가 어떠한 신규 시스템에 대해 똑같이 개발을 시작했다면, 클라이언트 개발자는 아직 해당 시스템을 구현 못했을 수도 있습니다. (개발 속도를 생각하면 당연한 일입니다.)

이럴때 클라이언트가 적당한 값을 넣어줄 때까지 기다리실 껀가요?

어차피 다른 시스템의 개발을 위해 Binding.setValue API 자체의 동작여부 자체는 테스트가 되어져 있을 겁니다.

UI 개발자가 직접 api를 활용해서 값을 넣어보면 어떨까요?

해당 API를 클라이언트가 활용하건 UI 개발자가 활용하건 당연히 동작은 똑같습니다.

3. 시간 갱신 용도로 활용

시간과 관련된 UI 는 굉장히 많습니다.

현재 시간을 표시해야 하거나...

경매장의 남은 시간을 표시해야 할 수도 있습니다.

쿨타임도 마찬가지지요...

전부 시간과 관련된 것입니다.

서버와의 데이터 동기를 생각해보면 서버 시간을 가져와서 클라이언트가 값을 넣어줘야할 수도 있을 겁니다.

Binding.setValue("date", 서버시간);

클라이언트가 뭐 이런 식으로 넣어주면 될겁니다. 데이터의 형태야 문자열로 하건 어떻게 하건 서로 약속하면 되겠죠.

디아블로3 경매장을 해보셨을 거라고 생각합니다. (안해보셨어도 상관 없습니다.)

묘하게 시간의 오차가 있지요...마치 로컬 시스템의 시간을 활용하는 것 처럼 말입니다.(제가 소스를 까본게 아니니 아닐 수도 있습니다.)

아마도 서버 부하를 줄이기 위해서 그렇게 짜여졌을 가능성이 있습니다.

이런건 어떻게 처리해야 할까요?

꼭 클라이언트가 넣어줘야 할까요?

4. 직접 로컬 시간 갱신하기

UI 에서 직접 시스템 시간을 가져올 수 있습니다. 자, 코드를 보시죠...

Binding.setValue("date", new Date);

setInterval(function(){
		Binding.setValue("date", new Date);
}, 1000);
		
Binding.addBind("date", f);

function f($date:Date):void{
	trace("현재시간 : " + $date);
}

setInterval 이 마음에 안드시면, Timer 로 하셔도 상관 없습니다.

몇 줄 되지도 않는 너무나 간단한 코드입니다. 1초 주기로(플래시의 시간단위는 ms입니다.) 시스템 시간을 갱신해줍니다.(잦은 값 갱신이 부담스럽다면 갱신 시간이야 마음대로 조절하시면 됩니다)

너무 짧아서 딱히 설명할 것도 없네요...

이렇게 시스템 시간을 직접 갱신해서 UI 개발에 활용할 수 있습니다.

5. 경과 시간만 활용하기

모바일에서는 시간 오차가 생기는 일이 적긴 하지만(시스템이 기지국 시간을 가져오기 때문에), 데스크탑의 경우는 데이터의 정확도가 많이 틀릴 수 있습니다.

사용자의 시스템 시간은 자유롭게 변경 가능하기 때문입니다.

그래서 이번에는 경과 시간만을 활용해보도록 하겠습니다.

코드를 보시죠

Binding.setValue("date", new Date);

setInterval(function(){
		Binding.setValue("date", new Date);
}, 1000);

var startDate:Date = Binding.getValue("date");

Binding.addBind("date", f);

function f($date:Date):void{
	trace("경과시간 : " + ($date.getTime() - startDate.getTime()) + "ms");
}

이번에도 매우 간단하네요... 경과 시간을 알 수 있게 되었습니다.

사실 getTimer 나 Timer 를 활용할 수도 있겠으나, 이 녀석들은 시스템 상황에 따라 오차가 많이 발생하는 경우가 있습니다.

시작 시간만 서버쪽 데이터를 가져오고(정확한 서버데이터는 구분을 위해 바인딩 키값을 다른 이름으로 하면 되겠죠), 그 다음부터는 이 코드를 사용한다면 서버에 부하를 주지 않으면서도 더 정확한 시간을 알 수 있겠죠?

자, 다양한 활용법은 널려 있습니다.