'Adobe'에 해당되는 글 40건
2008.06.23 09:30
AIR라는 이름이 붙지 않았던 시절, Apollo 라는 이름을 가지고 있을때
[Apollo] 아폴로 프로젝트를 투명하게 띄워보자.
라는 포스트를 작성했던 적이 있습니다. 뭔가 특별해 보인다고 할까요? 좀 있어보이기도 하고. ;)
뭐, 요즘도 마찬가지입니다. 기본 윈도우는 영~ 해보인다고 할까요... 그래서 기본 지원 Window를 사용하지 않는 AIR 예제를 만들어보았습니다. 기본 지원 윈도우를 벗어나기 위해서는 설정해줘야 할 값이 3가지가 있습니다.

1. 어플이름-app.xml 의 initialWindow 안에 systemChrome의 값을 none, transparent 값을 true 로 아래와 같이 변경하여 주세요.
(수정전에는 해당 값은 주석처리 되어있습니다.)
<initialWindow>
        <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
        <systemChrome>none</systemChrome>

        <!-- Whether the window is transparent. Only applicable when systemChrome is false. Optional. Default false. -->
        <transparent>true</transparent>
..
</initialWindow>
2. 어플이름.mxml의 WindowedApplication 태그에 showFlexChrome 값을 false 로 바꾸어주세요.
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showFlexChrome="false" >
변경한 값에 대해서는 [AIR] 사용자 Native Window 만들기 1. ( for Flex )의 설명을 참고하시면 되겠습니다.

이렇게 하면 기본 윈도우가 사라집니다! 하지만! 기본 윈도우가 사라지니 큰일입니다. 최소화, 최대화, 닫기 등의 기본 윈도우의 컨트롤이 없어졌으니 직접 구현해야 합니다.

사용자 삽입 이미지
그래서 만들었습니다! 지금 보시는 이미지가 예제로 만든 AIR 어플의 캡쳐화면입니다. 아래의 예제 코드에 보이시는대로 Canvas를 윈도우로 삼아서 그 위에 Button을 이용하여 최대화, 최소화, 닫기,윈도우 움직이기, 윈도우 리사이즈를 구현하였습니다. (버튼 이미지는 SuperPanel 에 것을 썼습니다)

다행이 AIR에서 잘 지원해줍니다. ;) 코드 몇 줄 밖에 안써도 쉽게 구현했습니다. (살 짝 문제들도 있습니다. 바탕이 되는 Canvas가 실제 어플의 상하좌우10씩 margin이 있어서 최대화 하면 margin 값은 반영이 안됩니다.- 실제 어플의 크기과 동일하게 하면 원래의 좌우 하단의 리사이즈 핸들러로 어플 크기 조정이 되어서 margin을 주었습니다)

그러고 보니 기본 윈도우를 없에놔도 없어보이기는 마찬가지군요.... 이 허접한 디자인 실력; ㅜ_ㅜ


 

예제를 설치하시려면 하단의 install now를 클릭하여주세요.
설치하신 다음 실행되면 마우스 오른쪽 버튼으로 view Source 하셔서 소스를 보실 수 있습니다. 좋은 정보 되셨길 바래요 ;)

Adobe AIR Application Installer Page
신고
Favicon of http://lostsin.tistory.com BlogIcon 시난 | 2008.06.23 15:12 신고 | PERMALINK | EDIT/DEL | REPLY
커스텀 윈도우군요 잘 보았습니다 :)
p.s. 스타플 이벤트로 받은 NDSL 은 재밌게 하시나요? ㅠㅠ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.23 17:08 신고 | PERMALINK | EDIT/DEL
전 NDSL은 초기 판매때부터 있었고요, 여친님도 같이 받아서 제가 받은 NDSL로 여친님 게임팩 사줬습니다. ㅋ
박스농사 | 2008.06.26 11:36 신고 | PERMALINK | EDIT/DEL | REPLY
NDSL재밌나요?
NDSL재밌나요?
NDSL재밌나요?
NDSL재밌나요?
NDSL재밌나요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.26 13:15 신고 | PERMALINK | EDIT/DEL
박스 농사의 어텍?
방어를 어떻게 해야되나.. 음..
Favicon of http://raungi.tistory.com BlogIcon raungi | 2008.06.27 19:41 신고 | PERMALINK | EDIT/DEL | REPLY
원하던거네요 ㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.01 13:25 신고 | PERMALINK | EDIT/DEL
좋은 프로그램 만드시길 ;)
Favicon of http://lovedev.tistory.com BlogIcon lovedev | 2008.07.01 19:15 신고 | PERMALINK | EDIT/DEL | REPLY
헛...NDSL받으셨어요? 와...ㅋㅋㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.01 23:39 신고 | PERMALINK | EDIT/DEL
Wii 받으셨으면서 ㅎㅎㅎ
박스농사 | 2008.07.17 14:00 신고 | PERMALINK | EDIT/DEL | REPLY
아직도 살아계시는군요?...
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.17 15:18 신고 | PERMALINK | EDIT/DEL
언제 한번 얼굴 봐야죠!
헤드락을 걸어줄테다!
전영재 | 2009.06.15 15:47 신고 | PERMALINK | EDIT/DEL | REPLY
참 좋은 소스네요. 잘 보고 갑니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.15 18:31 신고 | PERMALINK | EDIT/DEL
종종 들러주세요~
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.06.21 09:57
Flex에서 팝업용도로 많이 쓰는 TitleWindow이라는 클래스가 있습니다.
TitleWindow 의 구현코드를 보신 분은 아시겠지만 TitleWindow 에는 그렇게 많은 코드가 있지는 않습니다. (오히려 뭐가 이렇게 없어! 할 정도) 저도 상당히 의아했습니다. 주석을 빼면 정말 몇줄 안되는 코드였기 떄문이죠.

그 이유는 TitleWindow는 Panel을 상속해서 만들었는데 실제 TitleWindow에서 필요한 닫기버튼은 이미 Panel에서 구현되어 있고 단지 보이지만 않는 상태이기 때문입니다. TitleWindow에서는 showCloseButton 라는 get/set 메소드로 닫기 버튼의 보여지는 유무만 설정하면 됩니다.

그런데 여기서 좀 재미있는 부분이 있습니다. Panel에서 닫기 버튼이 구현되어 있다면 Panel을 상속받으면 그 닫기버튼도 사용할 수 있을까요? 그냥은 안됩니다. 왜냐하면 닫기버튼이 보이거나 안보이도록 설정하는 변수인 _showCloseButton이 mx_internal 로 선언되어 있기 때문입니다.



그럼 이걸 어떻게 사용하면 될까요? TitleWindow의 showCloseButton 라는 get/set 메소드 를 보면 해답을 찾을 수 있습니다.



showCloseButton 속성의 코드가 좀 특이하죠?
TitleWindow 의 코드 상단에
use namespace mx_internal;
이라고 작성되어 있습니다. mx_internal 이라는 namespace를 사용하겠다는 것이지요. 이렇게 설정되면 showColoseButton 속성과 같이 mx_internal로 선언된 _showCloseButtion 변수에 접근하시면 됩니다.
return mx_internal::_showCloseButton;      //이렇게 해도 되고 또는,
return _showCloseButton;                       //이렇게만 해도 되긴 합니다
그렇다면 TitleWindow 는 Panel을 상속받았으니 그렇다 치고, 외부에서 Panel 객체의 _showCloseButton 변수를 바로 접근할 수는 없을까요? 안된다고요? 그럼 안되는데요! 안되면 제가 이 글을 쓸 이유가 없어집니다. ;) 바로 아래와 같이 가능합니다.


그래도 화면에 보이는 예제가 하나 필요하겠죠? 이번에는 TextArea로 예제를 하나 만들어보겠습니다.
(loveDev 블로그에서 아이디어 얻었습니다)
Flex에서 한글을 입력시에는 버벅이는 문제(천천히 타이핑 되는 문제)가 있었습니다. 이 문제를 해결하기 위해서 frame rate 를 올린다던가 하는 방법을 사용했었는데, Adobe Flex 공식사이트에 블로그에 올라온 글에서 어이없게도(?) TextField 의 alwaysShowSelection 속성을 true로 바꾸어주면 해결된다는 것이었습니다. 왜 그런지는 저도 정확하게는 잘 모르겠고... ^^;

아 무튼 Flex에서 한글 입력을 받는 TextInput, TextArea 등도 내부적으로 TextField를 상속한 UITextField 를 사용하고 있습니다. 그렇다면 이 UITextField 를 받아와야겠습니다만, 이게 또 골치아픕니다. TextArea나 TextInput 은 이 UITextField가 protected로 선언되어 있기때문에 외부에서 접근하는 것이 불가능합니다. 그래서 상속을 받아서 접근하던지, 아니면 여기와 같이 해결을 해야됩니다.

그러나 다행이도 이 TextField를 반환해주는 getTextField()라는 메소드가 존재합니다.


그렇다면 UITextField에 직접 접근하여 텍스트를 입력하려면 getTextField() 메소드를 사용하여야 할텐데요, 위의 코드에서 보셨다시피 mx_internal 로 선언되어있습니다. 이럴때는 위에서 설명드린데로 하면 되겠죠?

이 getTextField를 이용하여 TextArea에 한글입력을 개선한 예제입니다.
아래에 있는 TextArea에만 alwaysShowSelection의 값을  true로 설정을 해주었습니다. 위 아래 TextArea에 한글을 입력해보세요. ;)





유용한 정보 되셨길 바랍니다. ;) (오창훈님 감사합니다. ㅎ)


--- 파폭3에서 예제에 한글 입력이 안되네요.. ㅡㅡ; 왜 이러지;; 티스토리에 swf 업로드 하면 object 태그는 생성되는데 embed 태그가 없네요. 이래서 한글 입력이 안되었군요. ㅡㅡ; wmode 속성이 window 일때는 한글 입력이 됩니다. opaque나 transparent 속성은 한글 입력이 안됨..;
신고
Favicon of http://lovedev.tistory.com BlogIcon lovedev | 2008.06.21 00:30 신고 | PERMALINK | EDIT/DEL | REPLY
TextArea.alwaysShowSelection = true를 주기 위해서 ^^;;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.21 08:50 신고 | PERMALINK | EDIT/DEL
아.. 생각해보니 그렇네요. ㅎㅎㅎ 예제를 바꿀까나... ㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.21 09:55 신고 | PERMALINK | EDIT/DEL
예제를 바꿨습니다 ㅋ
박스농사 | 2008.06.24 13:27 신고 | PERMALINK | EDIT/DEL | REPLY
센스있는글 감사합니다~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.24 15:29 신고 | PERMALINK | EDIT/DEL
ㅡㅡa
박스농사 | 2008.06.26 11:37 신고 | PERMALINK | EDIT/DEL | REPLY
좋아해줘도 반응이 시큰둥하네염?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.26 13:14 신고 | PERMALINK | EDIT/DEL
ㅡㅡa
Favicon of http://singah.tistory.com BlogIcon 싱아 | 2008.07.02 10:53 신고 | PERMALINK | EDIT/DEL | REPLY
와 이포스트 소스코드 부분 어떻게 한거야?? 난 캡쳐 한건줄 알았더니 블럭지정 되는거 보니까 그게 또 아니네..

옆에 라인넘버도 나오고...
알려주삼 ~ ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.02 17:33 신고 | PERMALINK | EDIT/DEL
열이아빠님 블로그 http://koko8829.tistory.com/305 참고하셈 ㅋ
| 2008.08.21 14:25 | PERMALINK | EDIT/DEL | REPLY
비밀댓글입니다
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.08.21 23:37 신고 | PERMALINK | EDIT/DEL
아.. 그러네요 ^^;
여태 아무도 몰랐던;;
바로 수정했습니다. ㅎ
Favicon of http://orochi77.egloos.com BlogIcon 꼬출든남자 | 2009.04.08 17:51 신고 | PERMALINK | EDIT/DEL | REPLY
SDK 3.2덩가요?
파폭에서 한글 입력이 안되더라구요.. -ㅅ-
왜그런지좀 알려주세연~ ㅎㅎ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.08 18:29 신고 | PERMALINK | EDIT/DEL
파폭에서 wmode 가 transparent 일 경우 한글입력 안되는 버그가 있습니다. -ㅁ-;;

관련 버그 보고도 했는데,
다음 업그레이드때 고쳐주마.. 라고만 하네요.
https://bugs.adobe.com/jira/browse/FP-1627
Favicon of http://blog.daum.net/joshuajh BlogIcon 죠쉬 | 2009.04.17 15:45 신고 | PERMALINK | EDIT/DEL | REPLY
필요했던 내용이네욥
살이되고 피가 됩니다욧
(__)
꾸바닥!
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.04.18 22:00 신고 | PERMALINK | EDIT/DEL
도움이 되셨다니 다행입니다. ;)
핫산 | 2010.05.20 18:33 신고 | PERMALINK | EDIT/DEL | REPLY
아 항상 mx_internal게 먼가 하고 넘어갔었는데 덕분에 알게되었네요
감사합니다^^
| 2011.12.08 13:35 신고 | PERMALINK | EDIT/DEL | REPLY
어도비에서는 만들때 왜 mx_internal로 선언해서 만든건가요?
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.06.18 17:22
이 AIR App 는 Lee Brimelow 라는 분이 TheFlashBlog 에 올려 놓으신 NativeWindower AIR Application 포스트를 보고 만들었습니다.

유럽에서 AIR 투어할때에 보여줬던 demo 라는군요. 주 내용은 NativeWindow를 어떻게 생성하는지에 대한 것입니다. Flash 로 만들어 놓으신 것을 소스와 함께 올려놓으셨네요. 소스 그대로 Flex용으로 만들어보았습니다.

Adobe AIR Application Installer Page

설치하시려면 인스톨 클릭해주시면 되겠습니다. ;)
제가 만든 AIR 의 소스는 실행중에 컨텍스트 메뉴의 'view source'를 선택하시면 보실 수 있습니다. ;)
view source를 사용했더니 AIR 파일이 너무 커지네요 ^^;
하단의 코드를 참고하시고 소스는 를 클릭하셔서 다운받으시면 되겠습니다.
영구기 님이 만드신
Apollocation Badge Studio 를 이용했습니다. ;) 영구기님 짱 ㅋ

신고
<a style="" href="http://skql.tistory.com" onclick="return openL | 2008.06.18 21:35 신고 | PERMALINK | EDIT/DEL | REPLY
머찝니다ㅠ.ㅠ 좋은 강좌 맨날 맨날 잘보구 있습니다. ㅠ.ㅠ 브라보 브라보~~~
AIR가 이런거였다뉘 ㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.18 22:46 신고 | PERMALINK | EDIT/DEL
뭐 원본 만드신 분이 실력자라서.. ㅎㅎ
저야 그냥 컨버팅 한 수준밖에. ^^;

방문 감사드려요 ㅎ
시드 | 2008.06.19 13:18 신고 | PERMALINK | EDIT/DEL | REPLY
타이틀 윈도우만 되는거였음.. Textinput 에 editable = false;로 해주지 ㅡㅡ 혼자 쑈했자노 ~ ㅎㅎ 패널은 왜 안돼지 ㅎㅎ
암튼형 멋찌삼~~!! ㅎㅎ 간단해 보이는데 생각보다 쫌 복잡하네요~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.19 15:42 신고 | PERMALINK | EDIT/DEL
NativeWindow 거든? ㅡㅡ;
<a style="" href="http://lovedev.tistory.com" onclick="return op | 2008.06.19 19:35 신고 | PERMALINK | EDIT/DEL | REPLY
잘보고 가요 ^^
"NativeWindow 거든? ㅡㅡ; " &lt;--이말이 왤케 머릿속에 남는지..
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.19 20:13 신고 | PERMALINK | EDIT/DEL
ㅎㅎ 방문 감사합니다. ;)
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.06.09 20:22
ActionScript 3.0 에 명령문(statement)중에 with 를 아십니까?

사용법 
with (object:Object) {
  // 명령문(statement)
}

출처 : flexdocs.kr


아래의 코드는 dataXML의 XML 데이터를 읽어 해당 컴포넌트를 화면에 동적 추가하는 예제입니다.
 


위의 코드에서 addComponent() 메소드에 보면 각종 값들을 할당하는 구문이 있습니다.
target.속성 = 값;
이런 식인데, with를 쓰면 target이라고 계속 할당하지 않아도 됩니다. 아래는 with를 사용하여 addComponent() 메소드를 수정한 예제입니다.


가장 큰 목적은 작성해야 하는 코드의 양을 줄여준다는 겁니다. (확실히 테스트 해보지는 않았지만, with를 쓰면 극소량의 용량이 늘어나는 듯도 하네요.) 위의 수정된 addComponent() 메소드를 반영한 결과물입니다. 결론은 잘 된다는 거죠. ;)  코드의 양만 줄여줄뿐 헷갈리고 퍼포먼스도 떨어진다고 합니다. 그냥 이런 것이 있다는 것만 알아두시면 되겠네요.





참고 : ActionSctipt 3.0 의 Label 에 대해서 알아봅시다.
신고
고은혁 | 2008.06.10 12:40 신고 | PERMALINK | EDIT/DEL | REPLY
삭제시에는 무엇을 적용해야 되나요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.10 13:00 신고 | PERMALINK | EDIT/DEL
삭제시 라면, 삭제하기 버튼을 말씀하시는 것 같네요.
자식객체중에 canvas 만 모조리 지우는 형식으로 작업해놨습니다.
Favicon of http://lovedev.tistory.com BlogIcon ActionDev | 2008.06.11 13:34 신고 | PERMALINK | EDIT/DEL | REPLY
AS2.0때에 나왔던 이야기인데요 ^^ with문은 코드의 혼란을 야기할 소지가 많다는 단점이 있어서 사용을 권고하지 않는다라고 들었던 기억이 있네요 ^^;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.11 16:36 신고 | PERMALINK | EDIT/DEL
아하~ 그렇군요. ㅎㅎ
브라이언님이 속도도 느리다고 하시더라구요. ㅎㅎ
전 AS3 을 첨 써봐서 신기해서 포스트 해봤습니다. ㅎㅎ
Favicon of http://www.apollo9.net/blog BlogIcon 나야나 | 2008.06.13 16:24 신고 | PERMALINK | EDIT/DEL | REPLY
AS 도움말에 with를 사용하면 퍼포먼스가 안좋아서 엥간하면 쓰지말라고 문구가 있었던걸로 기억이 살짝 나네요 ㅎㅎ;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.13 18:23 신고 | PERMALINK | EDIT/DEL
왜 안좋은걸 만들었을까요... ㅎㅎ
무명소녀 | 2008.06.17 16:20 신고 | PERMALINK | EDIT/DEL | REPLY
with 문 있다는 거만 알고 뭔지는 잘 몰랐는데, 저런거였고나...
ㅎㅎㅎ 좀 많이 늦었지만, 잠시 놀러왔어요.
대문 사진에 있는 사람이 본인인거임?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.18 13:54 신고 | PERMALINK | EDIT/DEL
오... 방문 감사합니다 ;)
본인인데, 얼굴이 안보이니 좀 낫죠? ㅋㅋㅋ
Favicon of http://lostsin.tistory.com BlogIcon 시난 | 2008.06.20 08:44 신고 | PERMALINK | EDIT/DEL | REPLY
퍼포먼스가 떨어져도.. form 같은데 유효성 체크할 땐 ..자바스크립트로 많이 썼었는데..
어딘가 쓸만하지 않을까용? ^^;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.20 09:51 신고 | PERMALINK | EDIT/DEL
쓸만한 곳을 찾으면 다시 글을 올리겠습니다 ^^;
방문 감사합니다 ;)
연월태생 | 2008.10.09 17:02 신고 | PERMALINK | EDIT/DEL | REPLY
편하게 쓸수 있어 좋죠...
그런데 그냥 코딩할때 속성 일일이 치기가 귀찬아 그냥 사용하고 말죠..
델파이에서도 저 넘 있는데 잘 안쓰니...
그냥 묻어 버리죠.. ㅎㅎ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.10.13 10:01 신고 | PERMALINK | EDIT/DEL
아하. 그렇군요 ㅎㅎ
저도 좀 써볼랬더니 퍼포먼스 저하가 있다고 하시더라고요 ㅎㅎ
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.06.08 00:42

4월에 인터뷰했던 내용입니다. ;) 혼자서 막 떠들었던 것 같은데, 정리 참 잘해주셨어요 ㅎ 감사합니다 ;)
아직 초보 개발자라 부족한 점이 많은데 하나씩 많은 것을 경험하고 배우고 있습니다. 매번 저를 위해 신경 써 주시는 모든 분들 감사드립니다.
인터뷰에서 자격증을 따겠다고 했는데, 아직 실행에 옮기질 못했습니다. ㅜㅜ 빨리 도전해야겠어요;
(사진과 동영상은 제거했습니다.)

원본 글 : Adobe Flex 공식사이트 개발자 인터뷰

'IT개발의 즐거움을 찾다.'


'검쉰'이란 필명으로 온라인상에서 종횡무진 활약하는 김학영씨


온라인상에서 본명보다 '검쉰'이란 필명으로 더욱 알려져있는 김학영씨를 만나보았다.
IT개발자로서 즐거움을 찾는 그의 흔적에서 긍정적인 마인드가 느껴졌다.
입문자를 위한 기술문서, 한글화 레퍼런스 필요성을 강조하는 등 Flex입문자에 대한 애뜻한 관심도 엿볼 수 있었다.
Flex는 개발자에게 무한한 상상력을 펼칠 수 있게 한다는 그의 생각을 들어보자.



Flex에 관심을 갖게 된 배경은 무엇인가?

대학시절 HCI LAB에서 웹 UI에 흥미를 느껴 HCI에 대해 학습한 것이 Flex에 대한 관심을 갖게 된 배경이 된 것 같다. 업무상으로 처음 Flex를 접하면서 UI 개발에 있어 HCI에 대한 학습이 많은 도움이 되고 있다.


Flex에서 UI 개발 시 힘든 점은 무엇인가? 언뜻 개발자의 역할 영역이 사용자 경험을 고려한 UI 설계 영역까지 확장되어야 한다는 말인가?

UI 개발 시 가장 신경 써야 할 부분은 사용자 경험(UX)이다. 아무런 배려 없이 만들다간 아무도 쓰지 않는 결과물이 나오기 십상이기 때문이다. 어떤 언어든지 UI 개발에서 사용자 경험을 고려해야 되는 것은 마찬가지이겠지만, Flex는 기존 웹에서 보여주지 못한 것들을 보여줄 수 있다는 것 때문에 오히려 고려해야 할 사항들이 많다. 특히나 기존의 것을 Flex로 바꾸는 일에서는 기존의 프로세스 플로우를 지키는 선에서 그간 불편 했던 점을 해소하는 것이 사용자에게 혼동을 주지 않을 것이다. Flex 개발자가 가장 갖추어야 할 덕목은 '사용자 경험의 배려'가 아닐까 생각한다.


Flex가 개발자에게 주는 고민 그리고 즐거움은 무엇인가?

문법 자체는 어렵지 않지만, UI 컴포넌트들이 서로 맞물려가면서 어떻게 표현될 것인가, 화면에 어떻게 보여줘야 효과적인가를 반드시 고민해야 한다. 예전 옥상훈님께서 HTML로 동그라미를 표현할 수 있느냐라는 질문을 했다. 가능할까? HTML로 만들지 못했던 것을 Flex로는 쉽게 구현이 가능하다. 이것이 약이 될 수도, 독이 될 수도 있겠지만 개발자가 원하는 것을 만들 수 있다는 점에서 무한한 상상력을 발휘할 수 있는 기회를 제공해준다. 기존 책상을 만드는 것은 쉽지만, 기발한 책상을 만드는 것은 어렵지 않은가.


블로그를 통해 Flex에 대한 정보를 꾸준히 업데이트하는 것으로 알고 있다. 그 힘은 어디서 나오는 건가?

즐거움 속에서 힘이 나오는 것 같다. IT 개발자로서 즐겁게 개발하려고 노력하며, 그 중 개발과 관련된 정보의 교환이란 즐거움을 블로그를 통해 느끼는 것 같다. 대다수의 사람들에게 정보를 퍼블리싱하면서 즐거움을 얻는다고 할까. 내가 이야기하고 싶었던 주제에 대해 이해하고, 트랙백이나 댓글을 통해 반론을 듣는 것에도 매력을 느낀다. 특히 블로그를 통해 기술 이해에 많은 도움을 받고 있으며, 나 역시 Flex를 처음 접하는 분들께 도움이 되고자 사소한 팁이라도 블로그에 업데이트 하고 있다.(http://warkyman.tistory.com/)


댓글 대마왕이란 별명까지 얻은 것으로 아는데, 댓글 달기에 부담도 될 것 같다.

질문 글에 답변 댓글을 달기 위해 나의 개인적 의견부터 기술적 설명까지 해당 지식이 100% 내 것이어야 한다. 바로 답변을 달기 위해서 내가 알고 있는 지식이라도 직접 실습을 해보면서 확인하고 정보를 전달해야 하는 셈이다. 그렇기에 댓글만으로도 엄청난 학습효과를 가지고 있다고 본다. 블로그도 학습의 장이 될 수 있다고 본다.


개발자 학습에 대한 개인의 철학이 있는가?

열심히 할 수 있는 힘이 어디서 얻어지는가를 아는 것이 중요해 보인다.
'사랑하지 않으면 떠나라'란 책을 보면 재즈 뮤지션으로 활동하는 저자의 친구 이야기가 나온다. 그 친구는 유명한 재즈 연주가들과 힘이 닿는 한 친분을 쌓기 위해 노력을 하는데, 그 이유가 궁금해 저자가 친구에게 물으니 "잘하는 사람들과 같이 어울리다 보면 자기도 잘 할 수 있게 된다"는 답변을 듣는다. 나 역시 그 말에 동감한다. 마라톤을 뛸 때 선두그룹에 포함되어 달리다보면 자기 역량의 최대치를 발휘하게 되지 않을까? 아직 Flex를 능숙하게 다루는 개발자가 아니라 배우고 경험할 것이 많다. 블로그 활동을 통해 IT선배의 노하우를 배우게 되고, 나도 모르게 더욱 열심히 하고자 채찍질을 하게 된다.


자주 방문하는 블로그가 있다면?

Flex 주제로 RSS 구독을 하고 있고, 열이아빠님, 지돌스타님, 영구기님의 airDev 블로그를 자주 방문하고 있다. 또한 Flex 컴포넌트 카페에 올라온 질문에 답변을 달면서 기본지식도 쌓고 있다. 그리고 Adobeflex 공식사이트에 올라온 기술문서를 통해 프로젝트 경험과 노하우를 간접적으로나마 경험할 수 있어 많이
참고하고 있다. 해외 사이트로는 일본의 FXUG 사이트를 자주 들리고 있다.


Flex로 해보고 싶은 프로젝트, 업무가 있는가?

Flex의 강점은 쉽고 편리한 UI 구성이 가능하다는 점이다. 기존 웹 페이지에서는 여러 단계로 구성되어 있어 온라인에 능숙한 사용자라도 불편한 점이 많다. 예를 들어 일명 'KTX 카풀'이라고 불리는 열차 동반석 예약 시스템이 그렇다. 열차 예약할 때 함께 예약을 할 경우 동반 할인이 되고 있다. 하지만 여러 정보를 입력해야 하기 때문에 번거롭고 복잡해서 이용을 하지 않게 된다. 이런 시스템을 Flex로 구성한다면 좀 더 많은 사람들이 이용하지 않을까.

또 유용한 라이브러리를 공유하는 프로젝트를 하고 싶다. 얼마 전에 디지털 카메라 정보를 읽어오는 기능을 구현하기 위해 고민했다. 알고 보니 이미 라이브러리로 구현되어 있었다. 아직 한글화 되어 있는 라이브러리 공유사이트는 보지 못했다. 이미 구현되어있는 라이브러리를 빨리 검색해 나만의 기능을 더하는 것이 기술발전에 도움이 될 것 같다.


요즘 AIR에 많은 개발자들이 관심을 보이는 것 같다. 개발자 입장에서 AIR가 갖는 매력이라면 무엇일까?

역시 개발 편의성 측면이 가장 큰 매력이라고 생각한다. 데스크탑 어플리케이션을 만들기 위해서는 수많은 코드를 짜야 했다. MFC로 윈도우 어플리케이션을 구현하고자 하면 고려해야 할 사항이 너무 많았다. 그런 점이 웹 개발자들이 데스크탑으로 진입하기 어려운 장벽이었다. AIR의 등장으로 플래시 어플리케이션도 데스크탑에서 사용할 수 있다는 것이 편리해졌다. 기존에도 변환해주는 프로그램이 있긴 했지만, 제한적이라 사용이 어려웠다. 또한 AJAX 개발자도 데스크탑 개발을 쉽게 할 수 있게 되었다.


AIR로 적용하고 싶은 부분을 예를 들어 설명한다면?

내가 사진을 찍는데 시중에 나와 있는 솔루션과 기술로는 사진 관리에 어려움이 많다. 출사를 한번 나가면 사진을 많이 찍는데, 이 사진을 관리하고 다른 사람들과 공유하는 것이 항상 골치이다. 물론 몇 장 안 되는 사진이라면 상관없겠으나, 1년에 몇 천장씩 찍는다고 생각해보면 이해할 수 있을 것이다.
이러한 문제들을 한방에 해결해주는 것이 AIR이다. 로컬 컴퓨터에 자신의 사진을 태그 기반으로 분류해서 데이터베이스화 하는 것이다. view 화면 또한 멋지게 구현할 수 있을 것이다. 게다가 기존의 웹 갤러리에 내 사진을 공유하는 기능도 추가할 수 있을 것이다.


Flex 자격증을 준비 중이라 들었다. 계기가 무엇인가?

"저 Flex 할 수 있어요"라고 말하는 것 보다 단적인 증명이겠지만 Flex 자격증을 가지고 있는 게 좀 더 나를 보여줄 수 있는 도구가 될 것 같아서다. 아직 Flex 자격증이 보편화가 되지 않은 점도 획득해야 하는 하나의 이유이다. 도전정신이랄까.


Adobeflex 사이트를 통해 서비스가 되었으면 하는 점, 그리고 Flex에 대해 바라는 점이 있다면?

레퍼런스 한글화가 되었으면 한다. 현재 2.0은 한글화가 되어 있지만, 3.0도 조속히 한글화가 되었으면 좋겠다. 개발자가 점점 늘어나야 기술의 진보가 되지 않겠는가. 또한 Flex를 처음 접하는 사람들에게 도움이 되는 입맛에 맞는 기술문서도 필요하다고 생각된다.

신고
Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 | 2008.06.08 22:40 신고 | PERMALINK | EDIT/DEL | REPLY
지난번에는 못본것 같은데..동영상도 있군요.
부럽당.~~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.08 23:10 신고 | PERMALINK | EDIT/DEL
왜 열이아빠 같으신 챔피언은 인터뷰 안하시는걸까요?
제가 꼭 물어보겠습니다. ㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.23 09:37 신고 | PERMALINK | EDIT/DEL
뒤늦게 덧글 달지만, 하셨잖아요! ^^;
동영상이 부러우신 것이라면 비추 하겠습니다. 너무 어리버리하게 나와요. ;-)
Favicon of http://lovedev.tistory.com BlogIcon ActionDev | 2008.06.11 13:36 신고 | PERMALINK | EDIT/DEL | REPLY
와~..
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.11 16:38 신고 | PERMALINK | EDIT/DEL
;)
Favicon of http://shallaazm.tistory.com BlogIcon shallaa | 2008.06.13 10:56 신고 | PERMALINK | EDIT/DEL | REPLY
즐거움 속에서 힘이 나온다-
멋집니다. ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.13 11:54 신고 | PERMALINK | EDIT/DEL
감사합니다 ;)
Favicon of http://skql.tistory.com BlogIcon 나비춉춉 | 2008.06.23 09:05 신고 | PERMALINK | EDIT/DEL | REPLY
ㅋ 검쉰님 짱 ㅋ
RSS로 구독도 하고 있습니다 ㅋㅋ 좋은글 매번 감사 감사 ㅋㅋㅋ
제 블로그는 불펌 블러그 ㅡㅡㅋ ㅌㅌㅌㅌㅌ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.23 09:38 신고 | PERMALINK | EDIT/DEL
저도 많은 분들의 블로그를 위자드닷컴으로 구독중입니다 ;)
박스농사 | 2008.06.24 13:31 신고 | PERMALINK | EDIT/DEL | REPLY
ㅋㅋㅋㅋ 아저씨처럼 나왔넹
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.24 15:30 신고 | PERMALINK | EDIT/DEL
당신도 그닥.....
Favicon of http://mckdh.net BlogIcon 산골소년 | 2008.07.10 16:45 신고 | PERMALINK | EDIT/DEL | REPLY
플렉스 전문가하면 열이아빠님만 알고 있었는데..
검쉰님 인터뷰까지 하시고..저도 한분야(저는 자바..)에
전문가가 되어야 겠습니다. ^ ^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.10 17:14 신고 | PERMALINK | EDIT/DEL
많이 부족합니다. ㅎㅎ 전문가는 당치도.. ㅎㅎ
Favicon of http://mckdh.net BlogIcon 산골소년 | 2008.07.10 16:46 신고 | PERMALINK | EDIT/DEL | REPLY
근데 동영상 보니 메인 사진 하고 틀려보여요..
메인 사진은 덩치있어 보이시는데..동영상은 호리호리하시네요~ @@;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.10 17:15 신고 | PERMALINK | EDIT/DEL
산만합니다.. 동영상에 얼굴 똥그랗게 나오지 않았나요? ㅋㅋㅋ
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.06.05 14:40
 이 글은 http://kuwamoto.org/ 에 올라온 Avoid ints in ActionScript의 번역 포스팅입니다.
에이레네님이 올리신 글을 보고 알게 된 포스트인데 상당히 좋은 내용이라서 번역하여 올려봅니다.
엉터리로 번역되었을 가능성 다분함.. 태클환영..;

2009. 8. 19. 내용 추가

이 글은 작성시 부터 여러 많은 개발자 분들이 내용에 오류가 있다고 지적해주셨습니다. 글의 내용에 대해서 지적해주시고 하는 것은 정말 감사드립니다. 제가 부족한 점이 많아 이해를 제대로 못하였거나, 글 작성에 문제가 있을 수 있기때문에 여러분의 덧글 하나하나가 정말 도움이 많이 되고 있습니다.

제가 본문을 수정하거나 혹은 이 글을 삭제하려고 했으나, 혹시 필요하신 분들이 있을 것 같아 본문을 수정하거나 삭제하지는 않겠습니다. 글을 다 읽으신 후 밑에 다른 분들의 덧글도 읽어보시면 더욱 좋은 것들을 배우실 수 있다고 생각합니다.

ActionScript 에서 int는 피하자구요!
Flex에 대해 알아갈수록, int에 대해서 알게 될수록, int를 사용하지 않게 되었습니다.
int가 정말 필요하지 않는 이상 int는 더 이상 사용하지 않을 것입니다.

이유 1 : Number가 int보다 실제적으로 더 빠릅니다.

놀랍게도, 사실입니다. ECMAScript Edition 4는 ECMAScript 이전 버전과 호환이 가능하게 설계되었습니다.
그래서 수학적으로 완전 무결하게 옳다라는 것을 보장하기가 어렵습니다.



어떤 방법이 더 빠를 것 같은가요? 제가 사용하는 컴퓨터에서는 int 를 사용하여 331ms 걸렸고, Number 는 291ms 걸렸습니다.



▲ 실제로 이 글을 읽는 분이 걸린 시간.

왜 그럴까요? 다음의 표현식을 보시죠.


만약 여러분이 j = 2^23 - 1 로 값을 시작했으면 어떠할 것 같습니까? 일부 프로그래밍 언어에서는 15번 더하자 마자 오버플로우 문제가 나타날 것입니다. 그러나 ECMAScript는 수의 개념이 좀 느슨합니다. 시스템에서 필요시 int에서 double로 변환되는 것을 지원하고 있습니다. 이 때문에 실질적으로 모든 수학적 계산은 내부적으로 int가 아니라 Number로 합니다.

Number로 모든 것이 완료되는 것을 감안해보면 int를 Number로 변환하는 비용과 그 만큼의 시간이 왜 int 를 사용하면 시간이 더 걸리는지에 대한 이유입니다.

다음은 Number는 실제로 int 보다 정확하게 정수 값을 저장시키기 때문에, int보다 Number 를 써야 되는 이유입니다.  

이유 2 : Number는 더 많은 bit를 가집니다.

이 이유는 후에 확실하게 할게된 Number에 대한 놀라운 사실입니다. 어떻게 알게된 것인지 설명해보겠습니다.

Date 객체에는 1970년 1월 1일 자정 부터의 시간을 milliseconds 단위의 숫자로 반환하는 time 이라는 속성이 있습다. 그 값은 정수형 값이고 ActionScript에는 long 타입이 없기 때문에, 반환 타입이 진짜 int (아니면 아마도 uint) 라고 가정했습니다.



왜 버그가 나는 걸까요?
 back of the envelope calculation 에서 1970년 1월 1일부터 2^32 milisecond 보다 더 값을 가지기 때문에 결과가 오버플로우 난다는 것을 알려주고 있습니다. 바보같은 실수죠.

int로 받으면 2,129,587,200, Number로 받으면 1,209,015,397,376. (2008년 4월 24일 기준)
위의 값으로 Date() 객체에 다시 넣어보면 각각 1970년 1월 26일, 2008년 4월 24일 이 출력됨. - 검쉰


그렇다면 int의 bit보다 더 큰 수를 써야할 때, ActionScript는 Long 타입이 없는 상태에서 어떻게 오버플로우나 이런 부정확한 값을 해결할 수 있을까요?



속을 살펴보면, Number는 아래에 있는 숫자형을 포함하고 있습니다.

  • int
  • uint
  • IEEE double

저는 항상 정수의 계산를 위해 double 형태를 사용하는 것을 피했습니다. 왜냐하면 모든 자리수가 보존될 것이라고 전혀 확신할 수 없었기 때문입니다. 왜냐하면, 개인적인 견해로는 정확성 측면에서 보자면 double은 int 보다 더 큰 범위의 수를 저장하기 때문입니다.

결국엔 ActionScript 의 경우에, Number는 더 큰 수의 범위를 저장할 수 있습니다. 그리고 어떤 정수형보다 정확합니다. 그건 아마도 ActionScript 는 64bit 의 정수형 타입이 없기 때문인 것 같습니다.

IEEE double 포멧은 다음과 같이 구현되어 있습니다.


부호를 위한 1 bit, 지수를 위한 11 bit, 숫자부분을 위한 52 bit. 따라서, 정밀도의 손실 없이 int보다 더 큰 bit의 수를 확실히 저장할 수 있습니다.

언제 int를 사용해야 될까요?

다음은 int의 적당한 사용방법입니다.

  1. 메모리를 절약하고 싶을 때 (비록 아주아주 많은 양의 저장공간이 있다 하더라도 결국에는 좋지 않은 영향을 줄 것입니다)
  2. 정수 값으로 강제변환 시 (예를 들어 var i: int = j / 2)
  3. 클라이언트에서 서버쪽으로 정수값을 보낼 때 버그를 줄이기 위해서 (값 전달용 객체안에 int 필드가 있을 때).

이제 다 설명했으니, 저는 이제 제 코드의 대부분의 Number를 확인해 볼 것입니다.


 4. loop 시에 카운터로 사용 - 예를 들어 for(var i:int = 0; i < X.length; i++)


--- 2008년 6월 16일에 추가

참고 : 제가 추가로 좀 더 서술하자면, 위에서 int보다 Number가 더 빠르다는 것은 특정 상황에 대해서 그렇다는 것입니다.

 int로 어떤 연산을 진행하는 것이 int보다 더 큰 Number로 연산을 진행하는 것 보다 더 빠른 것이 당연합니다. int가 Number보다 처리해야할 bit가 적으니까요. (var i:int = 0; i++; 이런경우) 다만, int형으로 연산중에 int형의 크기보다 더 큰 수를 처리해야하는 경우에 다른 언어에서는 잘못된 값이 출력이 됩니다만(이유 2에서 이런 문제를 지적하고 있습니다), AS3는 자동으로 Number 로 변환하여 연산을 진행합니다.
 이런 이유에서 "int가 내부적으로 Number로 변환되는(int의 크기를 넘어서는 연산) 경우에는 Number로 진행하는 것이 더 빠르다." 라는 것이 이 포스트의 속도 문제에서의 핵심입니다.

원저자가 약간 int에 대한 매우 안좋은 감정이 있긴 한 모양입니다만, 이 글을 보신 분들은 때에 따라서 잘 사용하시면 좋겠죠?


신고
Favicon of http://sunyoungheo.tistory.com BlogIcon 다롱냥 | 2008.04.24 15:04 신고 | PERMALINK | EDIT/DEL | REPLY
요호... 유용한 정보네염 꺅, 검쉰님은 머쨍이 히히
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 11:17 신고 | PERMALINK | EDIT/DEL
감사감사
Favicon of http://lovedev.tistory.com BlogIcon lovedev | 2008.04.25 11:46 신고 | PERMALINK | EDIT/DEL | REPLY
저도 느낌만으로 int는 절약할 때
Number는 정확한 숫자결과를 찾고 싶을때(나눗셈이나 좌표에 대한 controll을 할 때등) 사용하고 있었는데
이 글에서 명확하게 설명해 주셨네요.
좋은 정보 감사드립니다 : )
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 15:27 신고 | PERMALINK | EDIT/DEL
어설픈 번역으로 잘못된 정보를 접하신건 아닌지 더 걱정이. ^^;
방문해주셔서 감사합니다.
CyD707 | 2008.05.07 19:37 신고 | PERMALINK | EDIT/DEL | REPLY
저는 몇번을 테스트해봐도 number보다 int가 2배정도 더 빠른데요..;;;;
제 컴퓨터가 이상한건가요=_=;;;;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.07 23:02 신고 | PERMALINK | EDIT/DEL
회사컴이나 제 노트북, 기타 등등 에서 본 페이지 열어서 해봐도 Number 가 빠른 걸로 나오긴 합니다만.. ^^;

컴퓨터 사양이 어떤가요?
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.05.10 14:21 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 정보입니다. 적절하게 잘 사용하면 될거라 생각해요.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.10 22:34 신고 | PERMALINK | EDIT/DEL
이 포스트 번역하고 깨달은 사실인데,
레퍼런스에는 항상 루프 카운터는 int 로 쓰더군요 ㅎ
Favicon of http://blog.naver.com/kieat_seo BlogIcon 남남남 | 2008.05.12 12:25 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요... actionscript를 사용하면서 오래전에 생겼던 의문이 하나 있는데요... 늘 해답을 찾지 못하고 있는데 좀 도와주시겠어요?
http://blog.naver.com/kieat_seo 에 와보시면 제가 포스팅해놓은게 있습니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.12 17:40 신고 | PERMALINK | EDIT/DEL
AS3 의 버그인 것으로 사료됩니다.
저도 예전에 비슷한 문제를 겪었는데, 난감하더군요.
제가 겪었던 문제는 소수점 아래의 값들이 제대로 계산이 안되는...;;;
공룡 | 2008.05.14 00:43 신고 | PERMALINK | EDIT/DEL | REPLY
소수 부분이 2진수의 배수로 처리되서 나오는 어쩔수 없는 오차 입니다.
컴퓨터 자체의 처리 오차 죠...

2진수 :1 1 1 1 1 1 1 1 1 1 1 1 1
자릿수:4 3 2 1 0 -1 -2 -3 -4 -5 -6 -7 -8
값 :16 8 4 2 1 0.5 0.25 0.125 0.0625 0.03125 0.015625 0.0078125
비교해 보시면, 실제 0.4을 만들기 위해서는 0.25 + 0.0.... 이런 식으로 2진수의 1/2승수로 밖에 갈수 없어 가장 유사한 수를 가지고 계산 하게됩니다.

그래서 0.5는 2진수 0.1 로 나오나 특정의 수는 완전 일치 하는 수가 나올수 없는, 즉 최악의 경우 1/2^52의 오차가 생기게됩니다.
이를 근본적으로 해결하면, 실수가 아닌, (문자열) Decimal 처리 식이 있으나, 속도및 메모리의 문제로 인하여, 아주 정밀한 연산에서만 설계되어 사용됩니다.
<span class="name" | 2008.05.14 01:43 신고 | PERMALINK | EDIT/DEL
아하.. 그런 이유가 있었군요 ;)
좋은 정보 감사합니다.

그렇다면 정밀한 연산을 플렉스에서 한다는 자체가 부담이겠네요.... 음..
<span class="name" | 2008.05.14 11:41 신고 | PERMALINK | EDIT/DEL
String(mynum)대신에 mynum.toFixed(2)를 사용하니까 오차가 안 생기고 결과값이 딱 0.05씩 증가하더군요... ^^제 블로그에 수정한 swf파일을 업로드 했습니다....
박스농사 | 2008.05.21 15:07 신고 | PERMALINK | EDIT/DEL | REPLY
닌텐도 파는날 모이는건가요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.21 15:08 신고 | PERMALINK | EDIT/DEL
벌써 팔았답니다?
dongland | 2008.05.30 18:06 신고 | PERMALINK | EDIT/DEL | REPLY
j 랑 m 에 연산 부분에서 "/" 나누기 등 연산땜에 느려지는 듯 싶습니당
걍 단순히 연산을 ++ 증감 해두고 계산해 보면... Number 가 더 느립니다.
int 가 더 빠르더군요. 즉.. 속도가 int 가 더 느리다는 아닌듯 싶네요~


var intTime : Number;
var numberTime : Number;

var i : int;
var j : int = 0;

intTime = (new Date()).time;
for (i=0; i&lt;10000000; i++)
j++;

intTime = (new Date()).time - intTime;

var n : Number;
var m : Number = 0;

numberTime = (new Date()).time;
for (n=0; n&lt;10000000; n++)
m++;

numberTime = (new Date()).time - numberTime;

var message : String = "int version: " + intTime + "ms\n" +
"Number version: " + numberTime + "ms";

trace(message);
-------------
결과
-------------
int version: 63ms
Number version: 78ms
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.30 18:56 신고 | PERMALINK | EDIT/DEL
나누기 연산이 키 포인트입니다. ;)
증감 같은 경우는 당연히 크기가 작은 int가 더 빠릅니다. 하지만, 나누기 같은 경우는 내부적으로 int도 Number로
변환해서 작업을 하기때문에 그냥 Number로 하는 것 보다 더 시간이 오래 걸리는 것이지요. (이유1에 마지막에 서술)

들어주신 예처럼 j++ 경우는 int가 더 빠르기때문에 for문의 카운터로 이용하면 좋다. 라고 제가 글의 마지막 부분에 추가 서술해놓았습니다.

상황에 맞게 선택해서 사용하면 좋겠습니다. ;)
의견 감사합니다. ;)
Favicon of http://hangunsworld.com BlogIcon Han Sanghun | 2008.06.09 08:53 신고 | PERMALINK | EDIT/DEL | REPLY
이게 CPU에 따라서 다른 결과가 나오는 것인지???
어떤 컴퓨터에서는 int가 어떤 컴퓨터에서는 Number가 더 빠르네요.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.09 09:48 신고 | PERMALINK | EDIT/DEL
대부분의 컴퓨터에서는 Number 가 빠르게 나옵니다만,
몇몇 분들이 int가 더 빠르다고 하시네요 ^^;
약간 의심 가는 상황이 있습니다만, 정확하진 않네요 ^^;
혹시 알게되면 좀 가르켜주세요 ^^;;;
Favicon of http://wooyaggo.tistory.com BlogIcon wooyaggo | 2008.06.16 11:48 신고 | PERMALINK | EDIT/DEL | REPLY
아 제가 이 부분을 만나는 분들마다 설득하느라 가끔 고생하는데
검쉰님도 이부분을 오해하고 계신거 같습니다.

예전 Flash 9 알파때 해외 블로거의 포스트에서 발발된 내용인데
물론 아직도 갑론을박하는 분들도 계시는거 같은데
결론은 "쓰임새에 맞게 사용하면 int 가 더 빠른것이 맞다." 입니다.

즉 굳이 Number 타입을 int 에 넣는 행위를 반복하는 테스트로
int 가 느리다라는 결론은 옳지 않다는 것입니다.
AVM 은 Number 타입을 int 에 대입할때는
소숫점을 버리고 int 형으로 계산하는 과정을 거치게 되므로 당연히 그만큼의 시간이 더 걸리게 되죠.

int 에 정수값을 넣고 테스트하고
Number 에도 정수값을 넣고 테스트해야지만 올바른 테스트가 아닐까 합니다.

즉 이 테스트의 오류가 시작된 부분은 Number 에 유리한 숫자로 테스트를 진행했다라는 것입니다.

이상 제 의견이었습니다^0^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.16 14:19 신고 | PERMALINK | EDIT/DEL
덧글 달아주신 내용은 충분히 이해하고 있습니다 ;)

이 포스트는 제가 작성한 것이 아니고 번역한 거라서.. ㅎㅎ 원본 포스트에서 제가 이해한 것은 지적하신 것과 같이 Number에 유리한 숫자로 진행한 경우에 int보다 Number가 더 빠르다... 라는 것입니다.
물론 int에 유리한 숫자(예를 들어 i++) 같은 경우는 int가 빠른게 당연하겠죠 ;)

상황에 따라 알맞게 사용하는게 가장 중요한 것 같습니다. ;)
drawtree | 2009.03.03 00:06 신고 | PERMALINK | EDIT/DEL | REPLY
http://www.onflex.org/ACDS/AS3TuningInsideAVM2JIT.pdf

25페이지를 참조하기 바랍니다.

ECMA스크립트 사양에서 일부 수치 연산시 int에서 Number로의 암시적 형변환이 일어나며, 이 식을 int를 요구하는 연산으로 바로 전달하면 다시 int로의 암시적 형변환이 일어납니다. 이 두번의 암시적 형변환 때문에 성능이 저하되는 것이며, 부동소수 형식에 내재된 오류를 보정해야 한다는 것을 생각하며, 실제로는 int가 훨씬 더 빠릅니다.

int가 유리한 상황이나 Number가 유리한 상황이 따로 존재하기는 하지만 위에 올려진 포스트는 그것과는 무관하며, 암시적 형변환을 생각하지 못했기 때문에 도출된 결론입니다.

또한 Number는 부동소수 형식이며, 연산오류가 누적되기 때문에, 특히 for문의 인덱서로는 거의 사용할 수 없습니다. 굳이 사용해야 한다면 매 회마다 정수로 보정해야 하기 때문에 성능이 좋을 수 없습니다. (int형이 없고 인덱싱 오류가 발생해도 좋은 상황에서만 사용됩니다. double연산이 int와 속도가 같다 해도, 이러한 이유들 때문에 Number는 for문에서 좋은 성능을 보일 수 없습니다. 본문에서 for문의 인덱서로 부동소수를 사용하면서 오류 보정을 하지 않고 있는데, 그것 자체가 버그입니다.

하지만, ECMA스크립트 명세상 Number로 암시적 형변환이 일어날 수 밖에 없는 상황이라도 결과식을 다시 int로 강제 형변환을 수행해주면 컴파일러가 전체 식을 int연산으로 추론할 수 있으므로 최적화할 수 있다고 위 문서에서 밝히고 있습니다.

주의할 것은, 일반적인 언어에서는 오버플로우를 무시나 예외로 해결하지만, ECMA스크립트에서는 더 큰 용량의 수로 암시적인 형변환을 통해 이를 해결합니다. 일반적인 C 계열 언어에서 i+1 과 같은 코드는 절대적으로 결과가 int일 것이 보장되지만, AS는 Number로 형변환합니다. 이러한 암시적 형변환에 대해 잘 알지 못하면 위와 같이 int가 느리다는 결론을 얻을 수도 있습니다.

또한 본문 중에 실제적으로 모든 수를 Number로 수행한다고 언급한 부분이 있는데, 위와 같이 형식을 강제해주면 컴파일러가 형변화을 피하도록 최적화할수 있으므로 그렇지는 않습니다.

그리고, Number가 가장 정확하다는 언급이 있는데, 이는 보는 관점에 따라 달라집니다. 단순히 실제 수치와 일치를 말한다면 Number는 정확하지 않습니다. 하지만 수치 표현 범위를 기준으로 비교한다면 좀 더 정확하다고 말할 수도 있습니다. 하지만 일반적으로 정확하다는 표현은 수치의 일치를 가리키고, 수치 표현 범위를 가리킬 때는 좀 더 '정밀하다'는 표현을 사용합니다. 원문에서 precise라는 단어를 사용해 혼란을 주고 있는데 accurate라고 하는 것이 일반적입니다.

int가 필요한 상황은 한가지밖에 없습니다. 수치적으로 정확한 고성능 정수 연산이 필요한 경우입니다. 하지만 대부분의 성능 문제는 for문이나 배열 엑세스같은 카운트나 인덱스에서 발생하고, 이런 곳에는 int 외에는 답이 없습니다.

제생각에 이 포스트의 제목은 잘못되었습니다. 성능 때문이라면 위와 같은 for문에서는 int를 더욱 적극적으로 사용해야 합니다. 위에서 언급된 성능 문제는 Number로의 형변환 때문에 생기는 것이지 int의 문제가 아닙니다.

제가 뭐라할 부분은 아니지만, 구글 광고를 게시하는 블로그에서 자극적인 제목의 잘못된 정보를 게시하는 것은 사실 좋게는 안보이지요.
태클환영이라 태클 좀 달아봤습니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.03.04 20:58 신고 | PERMALINK | EDIT/DEL
긴 글 쓰시느냐 고생많으셨겠습니다. 지적 감사합니다.

그리고 폼으로 달아놨던 구글광고는 삭제했습니다. 내용적인 부분에서 태클은 항상 환영합니다.
뭐라할 부분이 아닌데 뭐라해주셔서 기분이 썩 좋지는 않군요.

당분간 글을 쓰지 않을 생각입니다만, 앞으로도 글 내용에 문제가 있으면 태클걸어주시면 감사하겠습니다.
Favicon of http://www.iruis.net BlogIcon ☆~ | 2009.08.17 12:26 신고 | PERMALINK | EDIT/DEL | REPLY
글 내용은 좋지만 int, uint는 이제 버려라. 라는 내용으로 와닿는 것에 대한건 어쩔 수 없네요. drawtree님의 지적이 그렇기 때문인듯합니다.
(아마 직접 작성한 글 내용이 아니라 번역 한 글인데 저렇게까지 지적당한것에 불쾌하신게 아닐까 생각되네요. 이젠 번역하기에 앞서 문제점부터 알아봐야 할듯하네요.)

본론으로 들어가자면 위의 댓글 중 남남남님의 소숫점 버그란것은 엑션스크립트의 버그가 아닙니다. IEEE표준에 의해 처리 되는 모든 소숫점 처리에 공통으로 가지고있는 문제입니다(참고: http://msdn.microsoft.com/ko-kr/library/c151dt3s.aspx).
남남남님의 댓글에서 해당 문제에 대해 포스팅 해보겠다는 내용을 보았는데 포스팅이 되어 있지 않아서 혹시나 아직도 AS의 버그로 아시는건 아닐까... 하는 생각에 오래 지난 글이지만 이렇게 댓글을 답니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.08.19 10:36 신고 | PERMALINK | EDIT/DEL
오해의 여지가 있어 글 자체를 삭제하려다가 그냥 두었습니다. 번역한 글 자체를 지적하는 것은 상관없습니다만(제 글에 대해 내용적으로 반박하는 것도 환영입니다), 그외의 것인 제 블로그에 이래라저래라 하는 것이 불쾌한 것이죠.

보다 건설적인 방법으로는 위의 drawtree님처럼 저렇게 글 하나를 쓸 정도의 덧글을 쓰는 것 보다는 자신의 블로그에 해당 글을 올려서 공유한다면 더 유익하지 않을까요? 트랙백이라는 유용한 기능이 있으니까요.
제가 심심해서 번역한 것이 아니라 유익하다 판단하여 공유하고자 올린 글이기때문에 더더욱 제 블로그에 대해서 지적한 것이 불쾌합니다.
앞으로는 왠만하면 외국 블로거의 글을 번역하지는 않겠습니다. 해서 좋은 소리 못듣겠군요.

그리고 소숫점 버그에 대한 의견은 감사합니다. 공통적으로 가지고 있는 문제라면, 해당 문제에 대해 API 에서 공지하던지, 아니면 해결했어야 된다고 생각합니다. 저 같이 경험이 일천한 개발자로써는 해당 내용을 잘 몰랐으니까요.
관련 내용에 대해 글을 쓰셔서 다른 개발자들을 위해 공개해주시는 것은 어떨까요?
공명 | 2009.09.18 10:36 신고 | PERMALINK | EDIT/DEL | REPLY
이상하네요!!
왜 저는 int가 number 보다 빠르게 나올까요??
제 컴이 이상한걸까요??
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.09.20 02:01 신고 | PERMALINK | EDIT/DEL
이번에 새로 산 (Intel Q9550) 컴퓨터에서 테스트해보니, 저도 int 형이 더 빠르게 나오네요.
FP 는 10,0,32,18 입니다.

뭔가 바뀐 것이 있는 모양입니다.
그냥 적절하게 사용하여야 된다. 라고 이해해주시면 좋겠네요.
Favicon of http://blog.chanik.com BlogIcon 찬익 | 2009.10.01 18:26 신고 | PERMALINK | EDIT/DEL | REPLY
둘다 1ms 1ms 나와서 성능 비교 불가 (...)
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.10.03 18:25 신고 | PERMALINK | EDIT/DEL
대충 짜자. -ㅁ-;;;
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.05.09 13:39
사용자 삽입 이미지
머드초보님의 블로그 포스트에서 알게된 책중에 자바 성능을 결정짓는 코딩 습관과 튜닝 이야기란 책이 있습니다. 제목이 너무 맘에 들어 바로 사서 요즘 출퇴근 길에 열독 하고 있습니다.  

잠 시 책 소개를 하자면, 초보 개발자 '나초보' 씨가 실력있는 선배 '김경험', '이튜닝' 같은 분들에게 하나씩 배워가는 스토리로 쓰여 있습니다. 참 읽기 편하네요. 저 역시 '나초보' 와 그닥 다를 바 없는 실력 형편없는 개발자인지라 공감도 많이 되고, 많이 읽으면서 배우고 있습니다. 저자이신 '이상민'님 정말 감사합니다. ;)

참 유용하니 꼭 읽어보시길 권해드립니다.

아무튼, 상당히 유용한 이야기들로 가득차 있는데요, 책 내용 중 간단하게 언급된 for문 관련 이야기중 ActionScript를 쓰는 개발자들에게도 유용할 것 같은 Tip 이라 포스팅해봅니다. (사실 저 같은 어리버리 개발자한테만 유용할지도?)
 
for문은 상당히 많이 쓰는 loop 중에 하나입니다.
하지만 프로그래머들이 흔히 간과할 수 있는 부분이 있습니다.
우선 for문에 대해서 알아봅시다.
for 루프를 사용하면, 특정의 범위의 값에 대한 변수의 반복 처리를 실행할 수가 있습니다.
for 명령문(statement)에는, 3 개의 식을 지정할 필요가 있습니다.
해당 식은,
1. 초기치로 설정하는 변수
2. 루프가 언제 종료하는지를 지정하는 조건문(conditional statement )
3. 각 루프로 변수의 값을 변경하는 식 입니다.
예를 들어, 다음의 코드는 5 회 루프 합니다. 변수 i 는 0 으로 시작되어, 4 로 끝납니다.
출력은 0 ~ 4 의 수치가 되어, 각 수치는 개별의 행에 출력됩니다.
 
출처 : flexdocs.kr


여기서 눈여겨 봐야할 것은 2번째 조건문 입니다.
만약 Array 에 값을 for 루프를 돌아 처리한다고 할 때, 흔히 아래와 같이 쓰게 됩니다.  



이 때 2번째 조건 명령문에 들어있는 dataArray.length 가 문제가 됩니다. 루프를 도는 도중에 계속 호출되어 배열의 길이를 알아오기 때문입니다.
이 것은 다음과 같이 변경하여 좀 더 빠르게 바꿀 수 가 있습니다.


변수 dataArrayLength에 배열의 길이를 담은 후에 조건문에 대입하므로서 불필요하게 dataArray.length 를 매번 호출하지 않아도 되죠.

이와 비슷한 경우가 종종 있을 경우가 있습니다.
예를 들어  Canvas에 있는 자식 객체들의 수를 구하기 위해 Container 클래스에 정의된 numChildren 속성을 호출한다던지 말이죠.
아래의 코드는 클릭 이벤트가 발생하면 클릭된 Canvas의 자식 객체에 대해서 어떤 동작을 하는 코드입니다.



이제 실제 테스트를 해보겠습니다.
테스트해본 코드는 다음과 같고요, 그 아래 실제 결과물로 이 포스트를 읽는 분들이 테스트를 해보세요!


(참고 : creationComplete 시에 init() 을 실행시켜 dataArray 에는 10,000,000개의 데이터를 넣었습니다.)

저는 length 사용시: 953ms, length 미사용시: 187ms  걸렸습니다. ;)



▲ 실제로 이 글을 읽는 분이 걸린 시간.

알고도 그냥 지나칠 수 있는 부분이니까 습관을 들이도록 합시다. ;)
긴 글 읽으신다고 고생하셨습니다.
신고
시드 | 2008.05.09 15:16 신고 | PERMALINK | EDIT/DEL | REPLY
오~~ 맨날 length로만 해결했다는 1人 -_ㅠ 속도차이가 심하게 나네요~~
좋은 정보 감사합니다~~!! 형~~ 닌텐도 팔고 밥사줘요~ ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.09 16:02 신고 | PERMALINK | EDIT/DEL
닌텐도 팔아서 뭐 남는다고..... ㅋ
남남남 | 2008.05.09 18:12 신고 | PERMALINK | EDIT/DEL | REPLY
저는 결과가 578ms,203ms 이렇게 나왔습니다.
컨디션 부분은 반복될때마다 다시 값을 계산하는군요...
오늘 처음 알았네요... 좋은 정보 감사합니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.09 18:32 신고 | PERMALINK | EDIT/DEL
방문해주셔서 감사합니다. ;)
레이 | 2008.05.10 10:26 신고 | PERMALINK | EDIT/DEL | REPLY
length 사용시: 295ms
length 미사용시: 135ms
2배이상 차이나는군요... 좋은정보 감사합니다
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.10 10:39 신고 | PERMALINK | EDIT/DEL
제 회사 컴에서는 엄청난 차이를 보이던데, 레이님 컴에서는 2배정도의 차이가 아는군요 ;)
컴이 좋으신듯? ㅎㅎ
방문해 주셔서 감사합니다.
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.05.10 14:19 신고 | PERMALINK | EDIT/DEL | REPLY
좋은글 감사해요. 저도 이것때문에 많이 애먹은적이 있어서요. ^^;
for 문뿐 아니라 XML node 참조할때도 마찬가지 입니다.

var myXML:XML =
&lt;customers&gt;
&lt;customer&gt;
&lt;name&gt;jidolstar&lt;/name&gt;
&lt;product&gt;
&lt;item id="1"&gt;&lt;name&gt;a&lt;/name&gt;&lt;/item&gt;
&lt;item id="2"&gt;&lt;name&gt;b&lt;/name&gt;&lt;/item&gt;
&lt;item id="3"&gt;&lt;name&gt;c&lt;/name&gt;&lt;/item&gt;
&lt;item id="4"&gt;&lt;name&gt;d&lt;/name&gt;&lt;/item&gt;
&lt;/product&gt;
&lt;/customer&gt;
&lt;customer&gt;
......
&lt;/customers&gt;

for each(var item:XML in myXML.customer.(name=="jidolstar").item )
{
trace("id="+item.@id + ", name" + item.name );
}

이런식보다.

var items:XML = myXML.customer.(name=="jidolstar").item;
for each( var item:XML in items )
{
trace("id="+item.@id + ", name" + item.name );
}

이 훨씬 빠르다는거~ ^^

반복하면서 하여튼 dom 형식으로 많이 접근하는 것보다는 참조변수를 만들어서 사용하는 방법이 훨씬 좋은 방법입니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.10 22:32 신고 | PERMALINK | EDIT/DEL
좋은 예제 감사합니다.
루프시에 항상 조건을 따지는 것 같아요.
다른 루프문들도 한번 테스트 해봐야겠습니다.
후니 | 2008.05.13 11:25 신고 | PERMALINK | EDIT/DEL | REPLY
ㅋㅋ 재미있는 시험 마니 하는 구나 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.13 13:05 신고 | PERMALINK | EDIT/DEL
부러워요? ㅋㅋㅋ
공상 | 2008.05.13 13:20 신고 | PERMALINK | EDIT/DEL | REPLY
위에 코드출력하는 플러그인은 어떻게 하는거에요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.13 13:33 신고 | PERMALINK | EDIT/DEL
열이아빠님 블로그 http://koko8829.tistory.com/305
여기 참고하시면 되겠습니다 ;)
후니 | 2008.05.13 17:11 신고 | PERMALINK | EDIT/DEL | REPLY
NDSL 팔아서 맛난거 사죠 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.13 17:56 신고 | PERMALINK | EDIT/DEL
왜 이러셈. =_+
박스농사 | 2008.05.21 14:58 신고 | PERMALINK | EDIT/DEL | REPLY
난 왜 9배차이가 나는거지?..
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.21 15:02 신고 | PERMALINK | EDIT/DEL
컴이 구려서? ㅋ
Favicon of http://singah.tistory.com BlogIcon 싱아 | 2008.06.21 04:02 신고 | PERMALINK | EDIT/DEL | REPLY
250ms , 98ms 나오는구먼
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.21 08:51 신고 | PERMALINK | EDIT/DEL
오.. 컴 좋은가봐? ㅎ
Favicon of http://butterguy.tistory.com BlogIcon 버터백통 | 2008.06.25 11:13 신고 | PERMALINK | EDIT/DEL | REPLY
아하 그렇군요~~ 전혀 생각지도 못했던 곳이였는데 좋은 정보 감사합니다~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.25 11:40 신고 | PERMALINK | EDIT/DEL
방문 감사합니다 ;)
Favicon of http://2rang.tistory.com BlogIcon 꽃녀 | 2008.07.24 22:06 신고 | PERMALINK | EDIT/DEL | REPLY
아주 멋진 정보입니다.
많이 알고 갑니다 ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.24 22:28 신고 | PERMALINK | EDIT/DEL
방문해주셔서 감사합니다. ;)
건찌 | 2009.11.25 15:10 신고 | PERMALINK | EDIT/DEL | REPLY
오오 좋은정보 감사요^^
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.04.22 14:21
Flex 의 DataGrid 는 상당히 유용한 컴포넌트입니다. 표 형태의 데이터를 출력하기 참 좋거든요.
이때 출력된 데이터중에 어떤 한 데이터를 출력하여 그 데이터에 대해서 작업을 해야할 때가 있습니다.
예를 들어 게시판의 글을 클릭하여 그 글을 보고자 하는 App를 작성한다고 합시다.

이때 보통 아래의 소스와 같이 DataGrid의 click 이벤트를 이용합니다.



click="clickEventHandler(event)" 라고 정의하여 해당 DataGrid 가 클릭되었을때 clickEventHandler() 메소드를 호출하게 됩니다.
이 해당 메소드는 다음과 같이 정의하였습니다.


하지만 위의 처리방식에는 문제가 있습니다.
clickEventHandler() 메소드에서 DataGrid의 selectedItem 속성을 이용하여 선택된 아이템에 접근하게 되는데, 만약 아무런 값이 없는 곳을 클릭한다면 어떻게 될까요? 이 때도 click 이벤트는 발생하게 되어 clickEventHandler() 메소드가 호출되겠지만, 선택된 아이템이 없으니 selectedItem 은 null 이 되게 됩니다. 그렇기에 위의 소스 6번째 줄의 selectedItem.url에서 에러가 발생하게 됩니다.
(헤더를 클릭해도 에러가 납니다. -- 추가)

물론 try catch 문을 이용하여 에러처리를 하면 됩니다만, 발생할 것이 예상되는 에러를 예외처리한다는 것은 그리 권장할 만한 방법이 아닙니다.

에러가 발생하지 않으면 Alert 창이 떠야하지만, 에러가 발생해서 Alert 창이 뜨지 않습니다. debug 용 flash player 를 설치하신 분은 다음의 에러메세지를 보실 수 있습니다.
TypeError: Error #1009: null 객체 참조의 속성이나 메서드에 액세스할 수 없습니다.
 at ClickTest/clickEventHandler()
 at ClickTest/__myDG_click()
 

이런 경우 실제 필요한건 아이템을 선택하는 것이지 DataGrid를 선택하는 것이 아닙니다.
이럴때 사용하기 좋은 이벤트가 바로 itemClick 이벤트 입니다.

itemClick event 
유저가 컨트롤내의 아이템을 클릭했을 때에 dispatch됩니다.
ListEvent.ITEM_CLICK 정수는,itemClick 이벤트에 관한 ListEvent object의 type property의 값을 정의합니다. 이 이벤트는, 컨트롤내의 가시 아이템 위에서 유저가 마우스를 클릭한 것을 나타냅니다.
출처 : flexdocs.kr

click 이벤트 대신 itemClick 이벤트를 이용하여 동일한 어플을 만든다면 위와 같은 문제는 해결되게 됩니다.
(Flex 3는 아닙니다만, Flex 2 에서는 DataGrid의 Header를 클릭해도 itemClick 이벤트가 발생됩니다. 완전히 해결은 안되는군요. 의견주신 유영상님 감사드립니다. - 추가) 
아래는 최종 샘플코드입니다.





더블클릭시 사용할 수 있는 itemDoubleClick 이벤트도 있으니 참고하시길 바랍니다.

ps. 쓰다보니 또 길어졌네요.. 별 내용 아닌데.. ㅜㅜ
신고
시드 | 2008.04.22 15:27 신고 | PERMALINK | EDIT/DEL | REPLY
('' ) 모른척 ~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.22 17:15 신고 | PERMALINK | EDIT/DEL
ㅋㅋㅋㅋ
Favicon of http://sunyoungheo.tistory.com BlogIcon 다롱냥 | 2008.04.24 15:50 신고 | PERMALINK | EDIT/DEL | REPLY
오오.. 오킹
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 11:18 신고 | PERMALINK | EDIT/DEL
이제 itemClick 사용해보셈~
상후 | 2008.05.24 10:21 신고 | PERMALINK | EDIT/DEL | REPLY
제가찾던건데 감사합니다 잘쓰겟습니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.26 12:56 신고 | PERMALINK | EDIT/DEL
네~ 찾아와주셔서 감사합니다. ;)
지나가다 | 2009.02.04 10:56 신고 | PERMALINK | EDIT/DEL | REPLY
아이템이 클릭되면 한줄이 선택되잖아요..

그 선택되는 거 자체를 막아버리고 싶을 땐 어떻게 해야 하나요.

clickEndalbed 이런거도 없고 ㅠㅠ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.02.04 14:39 신고 | PERMALINK | EDIT/DEL
선택 못하도록 할때에는 selectable 속성을 false 로 주시면 됩니다. ;)
arang | 2009.09.16 21:09 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요.

이제 막 플렉스 입문한 초보입니다. 즐겨찾기 해놓고 자주 들러 참고하고 있습니다.

다름이 아니라 한가지 질문이 있어서 그러는데요...

DG에서 컬럼 하나만 선택하는 방법은 없나요?

예를 들면 위의 예제에서 제목(title 란)컬럼을 누르면 내용이 보이게 하고, 이름컬럼을 누르면 회원 정보가 뜨듯이 각 컬럼마다 클릭 이벤트를 따로 주고 싶은 경우가 있어서요 ^^)
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.09.17 13:51 신고 | PERMALINK | EDIT/DEL
DataGrid에 itemClik 이벤트에서 rowIndex와 columnIndex 가 있습니다. columnIndex가 실제 클릭된 컬럼의 인덱스를 의미하거든요.
DataGrid의 column 속성을 읽어 보시면 컬럼들이 눈에 보이는 순서대로 인덱싱 되어있으므로 이용해보시는 것도 좋겠네요.
Favicon of http://singblog.net BlogIcon sing | 2009.10.08 23:35 신고 | PERMALINK | EDIT/DEL | REPLY
플렉스로 메뉴를 만들려고 하는데 너무 안되서 이렇게 검색검색 하다가
님 블러그까지 왔는데 잠깐보시구요 도움좀 부탁드립니다..
2틀동안 참 많이 해맸습니다..

플렉스로 이쁜 메뉴를 만들려고 합니다..

http://www.nosmoke.or.kr/

여기 사이트처럼요..

플렉스 빌더를 설치하고 메뉴 모양만 비슷하게...
http://expertfo.cafe24.com/4nonsmokers/menu/menu_Pro.html

이렇게 간단하게 만들었는데요

궁금한것이 위 제가 만든페이지에서 보조메뉴를 클릭했을때

새로운 페이지로 링크를 걸고 싶은데 그게 안됩니다...
님처럼 어떤 항목을 클릭햇을때 새창으로 다른페이지가 떠야하는데
저도 함수를 써서 했는데 안되네요...흑

아래 보죠메뉴 클릭했을때 링크를 할수 있는 방법 좀 부탁드립니다...
혹여나 http://www.nosmoke.or.kr/

여기사이트의 메뉴는 플래쉬로 만든것이겠죠???
플렉스로도 만들수있을것 같은데 도움좀 부탁드립니다..


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="15" cornerRadius="20" height="149" x="173" y="57">
<mx:Script>
<![CDATA[
import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

public function link2():void{
var urlRQ:URLRequest = new URLRequest();

urlRQ.url= "http://naver.com";
navigateToURL(urlRQ, "_new");
}

private function menuHandler(event:MenuEvent):void{
//Alert.show("Label: " + event.item. @label + "\n" +
// "Data: " + event.item. @data, "Clicked menu item");
var urlRQ:URLRequest = new URLRequest();

urlRQ.url= "http://naver.com";
navigateToURL(urlRQ, "_new");
}
]]>
</mx:Script>
<mx:MenuBar y="10" id="myMenuBar" labelField="@label" width="468" height="43" horizontalCenter="-10" fontSize="15" cornerRadius="5" textAlign="center">
<mx:XMLList>
<menuitem label="NonSmokers">
<button label="테스트" click="link2();"/>
<menuitem label="소개" itemClick="link2();"></menuitem>
<menuitem label="업데이트" click="menuHandler(event);"></menuitem>
</menuitem>

<menuitem label="금연정보">
<menuitem label="새소식"/>
<menuitem label="금연의 필요성"/>
<menuitem label="금연보건소"/>
</menuitem>

<menuitem label="정보교환">
<menuitem label="금연일기"/>
<menuitem label="금연 성공사례"/>
<menuitem label="금연 상담"/>
</menuitem>

<menuitem label="추천제품">
<menuitem label="쇼핑몰"/>
</menuitem>

<menuitem label="커뮤니티">
<menuitem label="사는이야기"/>
<menuitem label="의견좀"/>
</menuitem>
</mx:XMLList>
</mx:MenuBar>
</mx:Application>
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.10.09 01:18 신고 | PERMALINK | EDIT/DEL
새로운 창을 띄우는 것은 navigateToURL 를 이용하시면 되겠고, 서브메뉴에 클릭시에 navigateToURL 를 이용하도록 구현하면 됩니다. 단, navigateToURL 에 두번째 파라미터로 어떻게 띄울지 설정할 수 있으니 Livedocs 를 참고하시기 바랍니다.
참고로, 메뉴 같은 것은 Flex 보다는 flash 로 만들어서 사용하시는 것이 더 깔끔합니다. 저도 프로젝트 수행시에 위와 같은 메뉴는 Flash 로 제작하여 SWFLoader를 이용해 불러서 사용했습니다.

그리고 덧글을 너무 길게 달아주시면 곤란하니, 덧글의 소스는 지워주시면 감사하겠습니다. 이메일로 보내주시면 답변드리고 있으니 다음 부터는 장문의 질문의 경우 이메일로 보내주세요 ;)
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.04.15 15:14

이번 포스트에서는 드림위버에서 AIR application을 개발할 때 AIR 관련 설정에 관해서 알아보고 간단한 예제를 한번 만들어보도록 하겠습니다. 자세한 내용은 드림위버 extension 문서 중에서 'Using the AIR Extension for Dreamweaver' 를 참고하세요.

(드림위버용 AIR extension 설치 관련은 [AIR] 드림위버에서 AIR application을 개발해보자. #1 을 참고하세요)

1. Site를 설정한다.
우선 AIR App 용 패키징할 폴더를 만들어야됩니다. Site > New Site 하시면 다음과 같은 창이 뜹니다.

사용자 삽입 이미지
우선 간단하게 Local Info 에서 Site nameLocal root folder 만 설정합니다. 저는 AirDemo 라고 정했습니다. OK 누르세요.

2. 사용할 html 파일을 만든다.

아래의 소스처럼 main.html 을 만들겠습니다.
 


3. Site를 AIR App 로 세팅한다.

Site > AIR Application Settings 를 선택하시면 아래와 같은 창이 뜨게됩니다.

사용자 삽입 이미지

* 표가 붙어 있는 곳은 무조건 채워넣어야됩니다.
*File name : 실행파일 이름입니다.
Name : 설치된 App의 이름입니다.
ID : App ID 입니다.
*Version : 현재 App의 버전입니다. 이 버전정보로 추후에 업데이트 기능이 활성화되죠.
*Initial content : 처음 시작되는 페이지를 설정해주시면 됩니다. 위에서 만든 main.html 을 지정하시면 되겠죠.
Description : 설명 적어주시고요. (인스톨시에 출력됨)
Copyright : 저작권 관련 적어주시고.
Window style : 윈도우 스타일 지정합니다. 운영체제의 윈도우 스타일이나 자체적인 스타일 지정하시면 되겠네요.
Window size : 초기 App의 윈도우 크기 설정해주시면 됩니다.
Icon : 아이콘 설정해주세요.
Associated file type : App에서 사용할 파일 타입 정의해주시고요.
Application Updates : 버전업시에 업데이트 여부.
Included files : 추가로 가지고 있어야 할 파일 추가해주세요.
*Digital signature : Digital signature를 선택합니다.  추가 설명은 아래에 계속됩니다.
Program menu folder : 윈도우 시작메뉴에서 아이콘의 위치 설정입니다. (매킨토시는 필요없음)
*Destination : AIR 파일 만들때 위치입니다.

※ Digital signature 추가 설명
Digital signature(전자서명)는 AIR App가 위변조 되지 않았다고 인증해주기 위해서 필요합니다.  모든 AIR App에서 필요한데요, 없으면 설치가 되지 않습니다. 만약에 Digital signature가 없으면 직접 만들수 있습니다.

1. 위의 창에서 Set 버튼을 누릅니다.
2. Digital signature가 있다면 Browse 버튼을 눌러 선택하시고 아니면 Create 버튼을 눌러 생성합니다.
3. Create 버튼을 누르면 다음과 같은 창이 뜹니다.
사용자 삽입 이미지

4. 배포자 이름, 부서, 조직이름, 국가, 비밀번호, 저장할 장소, RSA 타입을 설정하시고 OK누르세요.
5. OK 누르면 저장되었다는 메세지가 뜹니다.
6. 방금 만든 Digital signature가 설정되어 있는 것을 보실 수 있습니다. 패스워드를 입력하세요.
 (주의 : Remember password for this session 을 선택하지 않으시면 AIR 생성시 인증서 패스워드를 매번 입력해야됩니다.)  
OK 누르시면 Digital signature 설정 완료.
  
 

세팅이 완료되면 application.xml 파일이 생긴 것을 확인 할 수 있습니다.


Flex 에서 AIR 생성시와 마찬가지로 여러가지 정보들이 들어있는 것을 확인할 수 있습니다.

4. 만든 AIR App 를 미리보기

File > Preview in Browser > Preview in Adobe AIR 선택하시거나 단축키 Ctrl + Shift + F12 누르시면 다음과 같은 AIR App 가 실행되는 것을 보실 수 있습니다.

사용자 삽입 이미지


5. AIR 배포하기
Site > Create AIR File 선택하시거나 단축키 Ctrl + Shift + B 누르시면 AIR 파일이 생성됩니다.
(인증서 패스워드를 다시 입력해야 되는 경우가 있으니 당황하지는 마세요)
생성완료 후에 다음과 같은 창이 뜹니다.

사용자 삽입 이미지

생성된 AIR 파일을 더블클릭하면 설치가 진행됩니다.

이상으로 허접하게 드림위버에서 AIR App 를 만들려면 어떻게 해야되는지 간단하게 알아보았습니다.
문의 사항이 있으시면 덧글로 남겨주시면 감사하겠습니다. ;)

신고
정형재 | 2010.02.01 13:50 신고 | PERMALINK | EDIT/DEL | REPLY
만나서 반갑습니다.
오오 이것 유용한 정보입니다!

기존에 만들어둔 자바스크립트 가득한 페이지가 AIR 로 뚝딱 나오기도 할까요??
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.02.05 22:28 신고 | PERMALINK | EDIT/DEL
바로 뚝딱 나올리는 없습니다만(보안적인 이슈 등 컨버팅에 이슈는 있을 것입니다), AIR 로 인터넷 브라우저와 독립적으로 실행 될 수는 있을 것입니다 ;)
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.04.15 10:07
사용자 삽입 이미지
국내 최초 플렉스 서적이었던 '예제로 배우는 Adobe 플렉스'가 개정판이 나오는군요! 오늘 강컴 뉴스레터에서 보고 알았네요 ;) 지금 예약판매 중입니다. 2008년 4월 23일에 출고예정이네요.

책 쓰실 당시와 지금 바뀐 여러가지들 (빌더의 버전업, FDS가 LCDS로, AIR 정식 런칭 등등)의 대한 것들이 보강되어서 'UX와 성능이 향상된 RIA 제작의 첫걸음: 플렉스 3 & 어도비 에어' 라는 부제를 달고 나온다는군요.

워낙 초판이 내용이 좋아서 개정판은 무조건 사도 되겠습니다. ;)
(회사에서 2권 샀던 기억이. ㅎ)

구매하실 분은 여기 를 클릭하셔서 강컴에서 예약하시면 되겠습니다.

-- 덧붙임
옥상훈님 블로그에 예제로 배우는 플렉스3 개정판이 나오기까지 라는 포스트가 올라와 있네요 ^^; 방금 봤습니다. 한번 참고하시면 되겠네요 ㅎ

사용자 삽입 이미지

다른 한글 Flex 서적 한권 추천드립니다.
(주) 바닐라로이에서 만드신 'Flex3 Knowhow Bible' 입니다.

지난 2008년 3월 18일에 있었던 Adobe RIA World 2008 행사에서 온라인 판매전에 선을 보였는데요, 위에 소개해드린 '예제로 배우는 Adobe 플렉스'가 입문서로 참 좋은 반면에 'Flex3 Knowhow Bible'은 제목 그대로 노하우를 담고 있는 책입니다.
개발자들이 흔히 겪을 수 있는 문제에 대한 해결 노하우나 실제 개발에서 유용할 팁들을 소개하고 있습니다.

처음 플렉스를 접하시는 분들은 위의 '예제로 배우는 Adobe 플렉스' 보시고, 이 책 보시면 참 좋겠네요. ;)

이미지 출처 : 강컴

신고
Favicon of http://xacdo.net BlogIcon xacdo | 2008.05.31 11:40 신고 | PERMALINK | EDIT/DEL | REPLY
저도 저 두 책 봤습니다. 개정판이 나왔군요 ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.01 01:19 신고 | PERMALINK | EDIT/DEL
네~ 얼마전에 나왔습니다. ;)
서점에서 봤는데 두툼하니 묵직해졌더군요 ㅎㅎ
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret

티스토리 툴바