오늘 희한한 버그를 마주했다. ajax로 정보를 불러와서 레이어팝업으로 띄워 주는 프로그램이었는데, 희한하게 IE6,7에서만 안 돌아가는 것이었다.(IE8,9에서는 테스트해 보지 않았다.)
한 시간 반을 헤맸다.
문제는 HTML이었다.
ajax로 불러온 data를 jQuery로 append해서 넣는 로직이었다. data도 제대로 들고 온다. 그런데 append하는 순간 데이터가 날아갔다.
IE7이어서 IE9의 IE7 브라우저 모드에서 테스트할 수 있었기에 망정이지 그렇지 않았으면 IE6용 디버그 툴바를 설치하고 난리를 쳤어야 간신히 문제가 뭔지 발견할 수 있었을 거다.
하긴 IE7 모드로 테스트하는 것도 한참 지나서야 떠올렸다.
여하튼, DOM에 DATA가 붙지 않는다는 것을 알고 나서야, HTML에 문제가 있는 것은 아닐까 하는 생각을 하게 됐다.
그래서 압타나로 빈 HTML 파일을 생성하고 ajax로 받아 온 데이터를 복사해서 집어 넣어 봤다. 왠 걸, 두 가지 문제가 있었다.
- 목록에 닫는 ul이 없었다.
- 닫는 div가 하나 더 있었다.
이게 왠 개망신이냐. HTML 문법이 틀여서 이런 꼴이 나다니. 완전 퍼블리셔 인생을 돌아 보게 만드는 일이었다.
PHP의 echo 함수로 HTML을 뿌리다 보니 발생한 실수기는 했지만, 역시 피곤할 때 코딩하면 오류가 속출이라는 점을 알 수 있었다.
교훈
두 가지 교훈을 얻었다.
디버깅 툴을 사용하는 게 귀찮더라도 반드시 사용해야 한다.
코드 고치고 테스트하고를 한 번만 하면 문제를 잡아낼 수 있을 것처럼 느껴질 수 있다. 코드 한 번 고치는 것으로 버그를 잡을 수 있다면 디버깅 툴을 설치하고 켜서 원인을 파악하고 버그를 잡는 것보다 속도가 빠를 수도 있다. 하지만 그렇게 운 좋은 경우는 많지 않다.
이번에 나도 디버깅 툴을 설치할 때까지 대략 30분~한 시간을 삽질했다. 그리고 그 후에야 디버깅 툴을 사용했고, 디버깅 툴을 사용하자마자 거의 순식간에 버그를 잡았다. 좀 귀찮아도 반드시 디버깅 툴을 사용하자. 특히, 디버깅 툴이 익숙치 않은 IE의 경우 반드시! 반드시 디버깅 툴을 사용하자. 이제 IE9에 기본 장착돼 있으니까 손쉽게 사용할 수 있지 않나.
피곤할 때 하는 코딩은 오류가 속출한다. 피곤하면 쉬자.
이번에 문제가 된 코드는 지난 번에 피곤할 때 짠 코드였다. 그 때 짠 코드는 두 가지 문제가 있다.
첫째, 오늘 알게 된 것처럼 정말 기초적인 버그가 있었다.
둘째, 구조가 엉망이라 재사용성이 현격히 떨어졌다. 임기응변식 땜빵코드를 많이 사용했기 때문이다. 단지 PHP만이 아니라 CSS도 그랬다.
오늘 퇴근해서 친구랑 맥주 한 캔 하고 자려고 했는데 계획이 무산됐다.
코딩 원칙을 되새기자. 아무리 코딩이 신나도 피곤할 땐 하지 말자.
그리고 아무리 피곤해도 디버깅 툴을 사용하자.
끝!
팁 하나
위 그림은 F12 버튼을 누르면 나오는 IE 디버깅 툴이다. IE8부터 지원된다.
ajax로 DOM을 붙여 넣은 다음에는 위의 새로 고침 버튼을 눌러 줘야 이 디버깅 툴에 코드가 반영된다.
ajax로 DOM을 붙여 넣으면 노란 색으로 강조가 되면서 자동으로 표시를 해 주는 파이어버그와 차이가 있다. 한 마디로 파이어버그랑 웹킷 계열(사파리, 크롬 등)의 요소 검사가 훨씬 좋다. 오페라의 드래곤 플라이는 제대로 사용해 본 적이 없다.
추가 단상
오페라도 늘 지원해야지 생각은 하면서 테스트는 안 한다;; 시간이 없는 건가 열정이 없는 건가… 흠! 생각해 보니 HTML 테스트 도구를 도입해야겠다는 생각이 든다. 얼마 전에 괜찮은 HTML 테스트 도구(WebDriver)를 발견했는데, 시험해 봐야지 생각만 했다. 이번 프로젝트 끝나면 반드시 사용해 봐야겠다.
교원 에 응답 남기기응답 취소