JavaScript Common Mistakes (1) - Async! Async! Async!

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