클라이언트 측 객체 계층구조

.serialize() - jQuery API : http://api.jquery.com/serialize/

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

오늘 jQuery를 가지고 스크립트를 작성하다가 jQuery를 이용해서 form 객체를 호출해서 jquery.submit() 메서드를 실행했는데 안먹히는 거다. 왜 그런거지!? 하면서 끙끙거리면서 고민하다가 옆에 계신 실장님께 도움을 요청하여 왜그런지 분석하다가 jQuery Document에 있는 걸 그대로 따라한 소스를 보시고서는

이건 센스가 없는거에요. 이 코드가 작동되는 것이 맞지만, 굳이 이렇게 할 필요가 있을까요?
이렇게 하면 될텐데?

라고 하시며 조언을 해주시는데...

document.forms['form'].submit();

이건 된다.

$('#form').submit();

이건 안된다.

$('#form').get(0).submit();

이건 된다. 단, 이렇게 get(0)으로 꺼내게 될 경우에는 jQuery에서 다루는 객체가 아니라 실제 form 객체이기 때문에 submit() 메서드는 jquery에서 다루기가 어려워진다. 즉, 복잡시러워지는거다. 문득 생각난건데.

$($('#form').get(0)).submit(function() {

});

요렇게하면 쓸 수 있지 않을까란 잡생각도 잠시 해봤다.

가만히 보고 있으니, 굳이 form.submit()을 실행하는 이벤트를 가로채서 ajax처리할 필요가 없었다.

var serializeObject = $form.serialize();

로 form에 있는 정보를 문자열로 직렬화해서 ajax로 넘기면 되는 거였다. 흠.

사실 그 앞에서 jQuery를 이용해서 동적으로  document.body에다가 form을 생성하고 거기에 appen로 붙이면서 form객체를 만들고 있었다. 이렇게 만들어진 form 객체를 jQuery를 이용해서 다루려고 했던 것인데, 이 부분에서 내가 생각했던 의도와는 다르게(원래 그렇게 되는 게 맞는 것이었겠지) 동작하고 있었던 것이다. 오류메시지도 나타나질 않으니 당황스러웠기도 하고 황망했다.

난 (개발) 센스가 부족하다. ㅠㅅ-)

센스만점이 되는 그날까지 부지런히 노력하자.

---

오늘의 교훈 : 난 브라우저(클라이언트)에서 다루는 객체의 계층구조나 동작원리를 제대로 이해하지 못하고 있다는 것이다. 그저 jQuery를 이용해서 다루는 정도가 아니라, 충분히 머리 속에서 동작원리를 이해하고 상상해볼 수 있는 수준까지 도달하기 위한 노력을 잊지 말자.