내 스스로와의 약속(하루에 한개씩 블로그를 쓰겠다는)을 지키면서, 또 다른 약속(지난 번 dW Live!의 페차쿠차 발표에 대한 보충 수업을 하겠다는)을 지키기 위해 여러 번에 나눠 쓰기로 했다 :p
천덕꾸러기 취급 받던 자바스크립트가 다시 각광을 받게된 것은 웹2.0 열풍에 실려 날아온 AJAX 때문이다. AJAX의 A가 Asynchronous라는 것은 자바스크립트 개발자라면 누구나 아는 사실임에 종종 이를 망각하는 경우가 있다.
가장 쉬운 예를 보자:
function get_result() {
var result1, result2;
$.ajax({ ..., success: function(data) { result1 = data; });
$.ajax({ ..., success: function(data) { result2 = data; });
return result1 + result2;
}
이게 뭐가 문제냐~고 하시면 대략 난감~ 정말 곤란~하시다.
설마 저렇게야 하겠어라고 생각하신다면, 좀 더 그럴듯한 예를 들어보자:
function get_image_size(image_src) {
var img = new Image();
img.src = image_src;
return { w: img.width, h: img.height; };
}
이미지를 자바스크립트로 동적으로 이미지를 로딩하고 크기를 구해서 어떤 짓을 하려나 본데...
뭐가 문제냐고? 없으면 말고~=3=3=33
좀 더 고급스런(?) 예제로 마무리하자:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
$(document).ready(function() { ... });
</script>
좀 더 나은(정답은 없다) 방법은... 스스로 생각해 보시길...=3=3=33
 |
| i'll be back~ |
'hacking > web' 카테고리의 다른 글
| JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수 (0) | 2009/12/10 |
|---|---|
| JavaScript Common Mistakes(2) - This "this" is not the "this" (3) | 2009/12/09 |
| JavaScript Common Mistakes (1) - Async! Async! Async! (9) | 2009/12/08 |
| dwLive! 웹개발 다반사 - 발표 자료(JavaScript Common Mistakes) + 후기 (4) | 2009/12/05 |
| dW Live! 세미나 ‘웹 개발 다반사’ (2) | 2009/12/03 |
| 웹 기반 스펠 체커 API + 다음 오픈 에디터 플러그인 (4) | 2009/11/19 |
댓글을 달아 주세요
형 너무 어려워요..
2009/12/08 17:47 [ ADDR : EDIT/ DEL : REPLY ]니는 자바스크립트 개발자가 아니자나~~
2009/12/08 23:01 [ ADDR : EDIT/ DEL ]후후후... 다들 중간에 Busy waiting 하는 코드를 넣음 되겠네요 ㅋㅋ
2009/12/08 17:50 [ ADDR : EDIT/ DEL : REPLY ]그것도 좋네~
2009/12/08 23:03 [ ADDR : EDIT/ DEL ]근데... 그렇게 할꺼면 차라리 async:false (또는 sync: true)하는게 낫지 않냐? ㅋㅋ
콜백함수에서 모두를 처리하면 되겠네요. 어차피 클로져 되니까요.
2009/12/09 10:21 [ ADDR : EDIT/ DEL : REPLY ]결국은 그런거지만... 그게 생각처럼 쉽지 않으니까요... 위의 예제에서도 비동기 호출의 결과를 리턴해야 한다면 어떻게 해야할까요? 예제에서 function으로 만든건도 일부러 그 상황을 고민해보자고 한거죠^^
2009/12/09 16:27 [ ADDR : EDIT/ DEL ]한 3분 깊게 생각 해 봤는데, 역시 callback 말고는 떠오르는 게 없네요 @@
2009/12/10 15:19 [ ADDR : EDIT/ DEL : REPLY ]1 function get_image_size(image_src, fn_callback) {
2 var img = new Image();
3 img.src = image_src;
4 img.onload = function () {
5 fn_callback({ w: img.width, h: img.height });
6 }
7 }
윗 댓글에 말씀 하신대로 이 방법은 아래와 같은 형식으로는 사용하지 못 하겠지요.
var a = get_image_size('a.jpg');
그냥 javascript의 성질에 순응 하면서 인터페이스를 설계하는 것이-_-;;;
아무튼 지난 토요일 좋은 발표 잘 들었습니다. 이상한 타임로그 발표한 사람입니다 ㅎㅎㅎ
deferred라는 것도 있답니다. 뭐 결국 callback이랑 같은 건데...^^ 주도권이 호출한 쪽에 있다는 정도...
2009/12/10 18:42 [ ADDR : EDIT/ DEL ]예를 들면:
get_images().addCallback(function(data) {
data.w; data.h;...
});
아... 그 타임로그... 한 번 해봤는데...ㅎㄷㄷ
2009/12/10 18:43 [ ADDR : EDIT/ DEL ]완전 페인되던데요-.-;;;;