타이타늄 SDK3.0과 Alloy(beta)를 쓰면서 겪었던 문제들

타이타늄 3.0이 정식 릴리즈를 했고, 그동안 베타버전을 쓰면서 나타났던 문제들을 정리해본다.

1. 이유없이 에뮬레이터가 죽는 경우

Alloy를 사용하다보면 빌드하자마자 “Application has exited from Simulator” 라는 메시지를 던지면서 죽는 경우를 꼭 한번씩은 겪게 된다. 대표적인 경우가 console.log를 이용해 Alloy 모델이나 콜랙션을 그대로 출력할때 발생한다. 또 다른 예로 Fugitives 소스코드에서 29번째 라인 부근을 보면 다음과 같은 코드가 있다.

var model = atLargeCollection[i];
var row = Alloy.createController('FugitiveRow', model.toJSON()).getView();
row.model = model;
rows.push(row);

위 코드에서 문제가 되는 코드는 바로 3번 라인에 있는 row.model = model 코드다. 즉, Alloy 모델을 테이블 뷰에 할당할때 발생한다.

이 문제의 정확한 원인은 사실 나도 모른다. 현상만 따지자면 Alloy 모델이나 콜렉션을 자바스크립트 객체에 할당할때 문제가 발생한다는 사실이다. 이런 현상을 미루어 보아 강력하게 추정되는 몇가지가 있다. 타이타늄모듈 컨셉을 보면, 자바스크립트 객체는 네이티브 프록시 객체와 연결되어 있다. 예를 들어 아래 코드를 보자.

var win = Ti.UI.createWindow();
win.title = "이것은 윈도우 타이틀";
win.userData = "이것은 그냥 자바스크립트 변수";

위 코드에서 타이타늄 모듈로 생성한 win 객체는 자바스크립트 객체이지만 네이티브 프록시 객체이기도 하다. 즉, 위에서 title 속성은 네이티브 프록시 객체와 연결되어 윈도우의 타이틀을 변경하지만, userData 속성은 네이티브 프록시 객체와 연결되어 있지않기 때문에 그냥 자바스크립트 변수에 값을 할당한 것에 지나지 않는다.

이렇게 타이타늄에서 사용되는 자바스크립트 객체는 순수 자바스크립트 객체와 네이티브 프록시 객체가 혼합되어 있는데, 프록시 객체에 Alloy 객체의 인스턴스를 직접 할당하면 뭔가 충돌이 발생하는 것 같다. 따라서 Alloy 객체에서 데이터만 뽑아서 할당하도록 한다.

— updated 2012-12-18 종은님 제보로 수정 —

프록시 객체에 값을 할당할때 프리미티브(Primitive) 값이 아닌 참조 값을 넣으면 문제가 발생한다. 문제라기 보다 정확히 그 값을 보장받지 못함. 따라서 프록시 객체에 값을 할당할때는 가급적 문자열이나 숫자등의 값만 할당하고, 객체나 배열 할당은 주의해야함.

—-

여튼 해결책은 Alloy 모델을 toJSON() 메소드를 이용해 순수 자바스크립트 객체로 추출해서 할당하면 문제가 발생하지 않는다. 콘솔에 출력하고 싶은 경우에는 JSON.stringify() 메소드를 이용해 문자열로 변환해서 출력하면 문제가 발생하지 않는다.

2. SDK 3.0 개발자 인증서 인식못하는 버그

이것은 확실히 버그인 것 같다. 타이타늄 정식 버전이 나오자마자 디바이스 디버깅을 해보려고 폰에 포팅을 시도했는데.. 잘 인식되던 인증서가 인식이 안되는 상황이 발생했다.

왜 안되지? 이러면서 기존에 미리 깔았던 beta 버전도 싹다 지우고 타이타늄 정식버전을 다시 깔아봤는데도 마찬가지다. 그래서 SDK 2.x버전으로 바꿔서 디바이스로 포팅을 해봤는데. 2.x버전은 문제없이 인식도 잘되고 포팅도 잘된다. 이미 타이타늄 커뮤니티엔 같은 문제를 겪는 사람도 많다. 따라서 이 문제는 SDK 버그로 결론 지었다. 조만간 패치가 나오길 기대해본다.

3. 발견된 자잘한 버그들

UI와 관련한 자잘한 버그들도 많았다. 내가 발견한 버그들이 이미 신고되어 버그로 등록되어 있는지는 찾아보진 않았지만, 일단 발견한 것만 써보면.

다중 커스텀 픽커 초기화 문제

Alloy를 이용해 뷰.xml에 다중 커스텀 픽커(Picker)를 정의하고 각 픽커의 컬럼을 아래와 같이 자바스크립트로 설정하려고 할 때, 컬럼이 하나만 설정되는 버그가 있다.

$.picker.setSelectedRow(2, 0);
$.picker.setSelectedRow(1, 2, true);
$.picker.setSelectedRow(0, 3);

아마도 알로이에서 뷰를 만들 때, 뷰가 생성되는 시점이 다른것 같다. 그래서 간단히 setTimeout을 이용해 타이밍을 조절했더니 3개의 컬럼이 모두 잘 설정된다.

Alloy 뷰(.xml)파일에 UI를 미리 정의해 숨겨놓고 싶은 경우

Alloy를 쓰다보면 아무래도 Ti.UI.createXXX 형태로 UI를 만드는 것보다 xml과 tss를 이용해 마크업 방식으로 작성하는게 훨씬더 직관적이고, 쉽다는 것을 금방 알게 된다. 그래서 왠만한 UI들은 xml로 정의하고 싶은데… 동적으로 생성되어야하거나 조건에 따라 보일지 말지를 정의해야하는 경우가 종종 있다. 이런 경우 원래 Ti.UI 컴포넌트들이 가지고 있는 visible 속성을 바꿔서 처리하면 간단할텐데.. 그래서 이것을 xml로 정의하니까 visible속성이 제대로 먹질 않는다. 버그로 판단되고, 현재는 이 문제를 해결하려면 아래와 같은 꼼수를 써야한다.

<Window id="window">
   <TableView id="table"></TableView>
   <TableViewRow id="repeatRow">
      <Switch id="repeatSwitch" />
   </TableViewRow>
   <Button id="saveBtn" visible="false" title="완료"/>
   <Button id="cancelBtn" visible="false" title="취소"/>
</Window>

위 코드의 경우 윈도우에 테이블이 전체를 덥기 때문에 TibleViewRow는 윈도우 안에 정의해도 보이지 않는다. 그리고 Button도 마찬가진데, 이 버튼은 Window의 좌우 네비게이션 버튼으로 삽입하기 위해 미리 만들어 둔것이다.

윈도우 좌우 네비게이션의 경우 현재는 지원하지 않고 있는데, 공식적으로 Alloy뷰가 지원할 계획이라고 한다.

— updated 2012-12-21 —

윈도우 타이틀 바에 좌우 네비게이션 버튼을 추가하고 싶은 경우

앞에서와 같이 View.xml 에 미리 정의해둔 녀석을 Controller.js 에 다음과 같은 코드로 추가할 수있다.

if ( Ti.Platform.onsname === 'iphone' ){
   $.window.leftNavButton = $.cancelBtn;
}

그런데, 여기서 주의해야 할 점이 하나 있다. 위와 같이 코드를 작성하고 윈도우 타이틀 바에 버튼을 붙이게 되면, 실제로는 윈도우에 2개의 버튼이 붙게된다. 하나는 View.xml에 정의한대로 visible=false인 숨겨진 버튼이 윈도우 중앙에 배치되고, 또다른 하나는 윈도우 타이틀 바 왼쪽 네비게이션 버튼으로 추가된다. 즉, View.xml에 정의하게 되면 사실상 윈도우에 자동으로 추가되는 코드가 되므로 불필요하게 붙은 버튼은 제거해주는게 좋다.

따라서 위 코드는 아래와 같이 작성한다.

if ( Ti.Platform.onsname === 'iphone' ){
   $.window.remove($.cancelBtn);
   $.window.leftNavButton = $.cancelBtn;
}

—-