티스토리 뷰

내 스스로와의 약속(하루에 한개씩 블로그를 쓰겠다는)을 지키면서, 또 다른 약속(지난 번 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~

i'll be back~



댓글
  • 프로필사진 Favicon of http://cetauri.tistory.com BlogIcon cetauri 형 너무 어려워요.. 2009.12.08 17:47 신고
  • 프로필사진 Favicon of https://iolothebard.tistory.com BlogIcon Ho Eyo He Hum! iolo 니는 자바스크립트 개발자가 아니자나~~ 2009.12.08 23:01 신고
  • 프로필사진 Favicon of http://blog.sangpire.pe.kr BlogIcon sangpire 후후후... 다들 중간에 Busy waiting 하는 코드를 넣음 되겠네요 ㅋㅋ 2009.12.08 17:50 신고
  • 프로필사진 Favicon of https://iolothebard.tistory.com BlogIcon Ho Eyo He Hum! iolo 그것도 좋네~
    근데... 그렇게 할꺼면 차라리 async:false (또는 sync: true)하는게 낫지 않냐? ㅋㅋ
    2009.12.08 23:03 신고
  • 프로필사진 Favicon of http://mytears.org BlogIcon 정태영 제가 예전에 비슷한 짓 하면서 그냥 간단히 해결하려고 busy waiting을 넣어봤는데, 안되더라구요. ㅋㅋ 스크립트가 얼어버리는 효과가 나요. 2010.11.19 11:01 신고
  • 프로필사진 Favicon of http://me2day.net/quisa137 BlogIcon SGcom 콜백함수에서 모두를 처리하면 되겠네요. 어차피 클로져 되니까요. 2009.12.09 10:21 신고
  • 프로필사진 Favicon of https://iolothebard.tistory.com BlogIcon Ho Eyo He Hum! iolo 결국은 그런거지만... 그게 생각처럼 쉽지 않으니까요... 위의 예제에서도 비동기 호출의 결과를 리턴해야 한다면 어떻게 해야할까요? 예제에서 function으로 만든건도 일부러 그 상황을 고민해보자고 한거죠^^ 2009.12.09 16:27 신고
  • 프로필사진 Favicon of http://me2day.net/songsl BlogIcon songsl 한 3분 깊게 생각 해 봤는데, 역시 callback 말고는 떠오르는 게 없네요 @@
    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의 성질에 순응 하면서 인터페이스를 설계하는 것이-_-;;;
    아무튼 지난 토요일 좋은 발표 잘 들었습니다. 이상한 타임로그 발표한 사람입니다 ㅎㅎㅎ
    2009.12.10 15:19 신고
  • 프로필사진 Favicon of https://iolothebard.tistory.com BlogIcon Ho Eyo He Hum! iolo deferred라는 것도 있답니다. 뭐 결국 callback이랑 같은 건데...^^ 주도권이 호출한 쪽에 있다는 정도...
    예를 들면:
    get_images().addCallback(function(data) {
    data.w; data.h;...
    });
    2009.12.10 18:42 신고
  • 프로필사진 Favicon of https://iolothebard.tistory.com BlogIcon Ho Eyo He Hum! iolo 아... 그 타임로그... 한 번 해봤는데...ㅎㄷㄷ
    완전 페인되던데요-.-;;;;
    2009.12.10 18:43 신고
댓글쓰기 폼