지금까지 본 Ajax 강의에서 소개한 주제를 크게 나열해 보면 다음과 같을 것이다.
1. Ajax 소개 및 구현(~4장)
2. HTML 코드 검사(5장)
3. 자바스크립트 테스팅 툴(6장)
이번 7장에서는 자바스크립트에 대한 디버깅 툴을 소개하려고 한다. Ajax 강의라고 해 놓고선 계속 자바스크립트 프레임웍과 툴만 소개한다고 불평할 사람도 있을 수 있다. 하지만 Ajax 는 4장까지 읽어본 사람이면 그것만으로도 구현은 충분하다. 되풀이 되는 이야기 이지만 나머지는 모두 자바스크립트 코드이기 때문에 한단계 위로 올라서기 위해서는 정말 많은 것을 알 필요가 있다.
Ajax 의 가장 큰 특징은 서버와 비동기로 통신한다는 것이다. 비동기로 통신한다는 것은 결국 백그라운드로 실행된다는 의미이므로 웹 사용자 뿐만 아니라 개발자에게도 디버깅을 하려면 결코 쉽지 않을 것이다. 브라우저의 요청을 서버가 제대로 받고 있는지, 서버가 요청을 적절하게 처리하는지, 브라우저에서 서버의 데이터를 받고 제대로 처리하고 있는건지 등등 명확히 알기 위해서는 일일히 로깅을 남겨서 눈으로 확인하기 전까지는 쉬운일을 아닐 것이다. 따라서 이번 7-1장에서는 브라우저단에서 Ajax 와 관련된 XMLHttpRequest Debugging 라는 아주 놀랄만한 디버깅 툴을 소개하고자 한다.
XMLHttpRequest Debugging 툴은 Julien Couvreur 가 자바스크립트를 이용하여 구현하였다. 이 툴을 이용하기 위해서는 아래 2가지를 설치해야 한다.
첫째, 파이어폭스의 확장기능을 이용해서 GreaseMonkey 를 설치한다. GreaseMonkey 는 user script 라고 하는 자바스크립트를 추가해서 해당 웹페이지를 수정할 수 있도록 해준다. 설치방법은 AJAX 강의 5-2장 - FireFox 확장기능을 이용한 HTML 코드검사 을 참고하면 도움을 얻을 수 있을 것이다.
<GreaseMonkey 확장기능이 설치된 화면>
둘째, 파이어폭스 브라우저를 열고 다음 url 을 입력한다.
http://blog.monstuff.com/archives/images/XMLHttpRequestDebugging.v1.2.user.js
위 url 은 XMLHttpRequest debugging 툴을 생성해주는 자바스크립트 파일이다. 브라우저 화면의 Install 버튼을 클릭하거나 파이어 폭스의 도구-> Install This User Script 메뉴를 선택하면 등록된다. 파이어 폭스의 도구 -> Manager User Script 메뉴를 선택하면 아래와 같이 디버거가 설치되어 있는 것을 확인 할 수 있다.
<XMLHttpRequest Debugging v1.2 가 설치된 화면>
디버거를 설치한 후에 테스트 하려는 Ajax url 혹은 도메인을 아래와 같이 반드시 등록해 주어야 디버거를 사용할 수 있다.
<Include pages 에 ajax url 을 등록한 화면>
여기까지 정상적으로 설치를 한 후에 파이어폭스를 띄워보면 오른쪽 하단에 아래와 같은 GreaseMonkey 아이콘이 형성되었을 것이다.
Include pages 에 해당하는 url 이 호출되면 항상 XHMHttpRequest Debugging 툴이 실행되므로 필요에 따라서 이 툴이 실행되는 것을 막기 위해서는 GreaseMonkey 아이콘을 한번 더 클릭해서 비활성화 시키자.
XMLHttpRequest debbugging 툴은 GreaseMonkey 의 지원없이는 실행이 안 된다.
이제 디버깅 툴에 대해서 살펴보자. 파이어폭스에 Ajax 를 테스트 해 볼 수 있는 url 을 입력한다. 4-9장에서 소개한 자동완성 기능 예제를 실행해 보면 아래와 같이 디버깅 툴이 브라우저와 같이 뜰 것이다.
XMLHttpRequest debugging 툴은 Ajax 통신이 이루어져야 결과를 표시해 준다. 디버깅 툴은 Ajax 통신 1건당 요청/응답 정보를 하나의 박스형식으로 표시한다. 위 그림의 경우, 박스 정보가 4개이므로 Ajax 통신이 4번 이루어진 것이다. 툴 헤더부분에는 capture 라는 메뉴가 있을 것이다. 이 메뉴를 선택해야만 디버깅 정보가 툴에 보이게 되므로 항상 capture 를 클릭해 두자. 나머지 메뉴들은 그리 어렵지 않으니 help 메뉴를 통해서 익혀보자. help 에서 다시 Ajax 요청/응답 박스 정보를 보고 싶으면 help 를 한번 더 클릭한다. 토글 스위치라고 보면 된다.
다음은 디버깅 툴의 박스 정보를 자세히 살펴보자.
위 그림을 보면 POST 방식으로 AutoCompleteServlet 의 서버쪽 프로그램을 호출했으며 응답결과는 200 OK 로 정상적으로 받았음을 알 수 있다. headers를 클릭해보자.
위 그림은 XMLHttpRequest 의 요청정보 중에서 헤더의 정보를 보여주고 있다. headers 옆에 있는 body 를 클릭해 보자.
위 그림은 XMLHttpRequest 의 요청정보 중에서 body 의 정보를 보여주고 있다. POST 방식이므로 name=value 쌍은 요청정보의 body 에 저장되어 서버로 전달된다. name 은 names 이고 value 은 한글로 "스타"를 입력했으므로 encodeURI 자바스크립트 메소드에 의해서 UTF-8 방식으로 인코딩 되었음을 알 수 있다. body 옆에 있는 edit&replay 를 클릭해 보자.
위 그림을 보면 디버깅 툴은 메소드 타입(POST/GET) 과 서버쪽 호출 프로그램명, 파라미터의 name=value 쌍의 정보를 수정해서 다시 서버로 요청을 보낼 수는 기능도 갖추고 있음을 알 수 있다. 이제는 응답정보의 headers 를 클릭해 보자.
위 그림은 서버에서 전달된 응답정보의 헤더부분을 보여주고 있다. 그 옆에 있는 response 를 클릭해보자.
위 그림은 서버에서 전달된 응답정보의 데이터를 보여주고 있다. 그 옆에 있는 callback 을 클릭해보자.
위 그림은 XHR 객체의 비동기 메소드 중에서 콜백메소드의 코드를 보여주고 있다. 콜백메소드는 XHR 객체의 onreadystatechange 속성에 할당되는 메소드로 XHR 객체가 서버와 비동기 통신을 할때 각 단계별 상태값의 변화에 따라 응답을 처리해 주는 메소드로 개발자가 정확하게 구현을 해주어야 하는 부분이다. 그 옆에 있는 replay 을 클릭해 보자.
replay 를 클릭하면 위 그림과 같은 영역의 박스가 추가된다. 위 박스를 클릭하면 해당 콜백 메소드가 다시 호출된다.
Simple is the best 라는 어느 광고 문구처럼 XMLHttpRequest debugging 툴이 어떠냐고 묻는다면 그대로 대답해 주고 싶다. 툴 사용법도 그리 어렵지 않으니 Ajax 개발에 좀 더 자신감을 가져보자.
