jQuery와 HTML5의 data attribute

허접하기는 하나 지금은 나름 개발자로서의 삶을 살고 있으니 블로그에도 조금 티를 내보기로 한다.

약 몇 개월 전, HTML에서 data attribute라는 녀석의 존재를 알았을 때 나는 꽤나 흥분을 했었더랬다. 가뜩이나 프론트엔드에서의 데이터 처리에 미숙했던 내게, parseInt니 parseFloat이니 거기에다가 정규식까지 써가면서 갖은 애를 쓰던 그런 초보 개발자에게 data attribute만큼 순결하고 담백한 존재가 또 없었다. 그 이후 jQuery에서 데이터베이스단의 정보가 필요할 때마다 나는 data attribute와 친근한 관계를 유지하였고 결과는 항상 나쁘지 않았다. 한 때는 너무 과도하게 그 친구를 써먹는 바람에 코드가 너무 지저분해진 적도 있으나 다소간의 밀당을 통해 관계를 깨끗하게 정리하는데 성공했다.

그러던 중 data attribute를 동적으로 조작하는 방식에 대해 생각해보게 되었다. 과거처럼 조작해야 할 숫자가 노골적으로 화면에 노출되어 있는 경우가 아니라 보일듯 말듯 HTML 태그 사이에 숨어 있는 데이터를 써먹어야 할 일이 생긴 탓이었다. 당연히 시작은 간단해보였다. 그리고 코딩에 들어갔다. 그리고 나는 이상한 나라에 가고 만 앨리스마냥 혼란에 빠지고 말았다.

아무리 봐도 혼란스러워...

문제는 이것이었다. 정말 이상하게도, jQuery에서 data attribute의 값을 변경하면 그 값은 크롬의 개발자도구 등에서 동적으로 반영이 되질 않는다. data attribute의 값을 읽은 다음 거기에 어떤 변화를 주더라도 동적 반영은 안 된다. 그래서 개발자들의 영원한 지해의 샘 스택오버플로우를 뒤져보았다. 그리고 거기서 해답을 찾은 듯 했다. data attribute를 data method를 통해 만지려하지 말고 attr method로 살살 달래주면 값의 동적 변화가 가능하다는 것. 하지만 결과는 이전보다 더욱 엉뚱했다. 뭔가가 제대로 돌아가질 않았다. 결국 남은 것은 console.log를 질릴 만큼 넣어가는 디버깅. 학부 시절, printf를 통해 메모리 에러를 잡아내려고 했던 그 눈물 나던 시절이 떠올랐으나 원체 자바스크립트라는 친구는 그렇게 무자비한 녀석은 아니었다. 답은 의외로 금방 나왔다.

이유는 모른다. 그러나 결론은 이렇다. jQuery의 data method를 쓰면 분명히 data attribute의 값을 바꿀 수 있다. 단지 디버깅 툴에서 그 값의 변화가 동적으로 반영되지 않을 뿐이다. 반면 attr method를 쓰면 분명히 동적으로 변하는 값을 볼 수 있다. 그러나 그러한 조작은 실제 data attribute의 값을 바꾸지 못한다. 외모 지상주의의 세태를 강하게 비판이라도 하듯, 그저 사람의 눈을 현혹시키는 사파의 기술을 선보일 뿐이다.