최근 좋아하는 가수의 콘서트 티켓팅에 실패해 좌절감에 빠져있었다...
슬픔과 묘한 승부욕에 취소표를 찾던 중 한가지 아이디어가 떠올랐다.
"내가 반복하는 클릭들을 프로그래밍 할 수 있지않을까...?"
갑작스러운 기대감과 함께 내가 직접 만들어서 해결하면 너무 재밌을 것 같았다.
한창 자바스크립트와 HTML/CSS를 공부하던 중이었기도 했고 재미로 여러 웹페이지 방문해서 개발자 도구를 열고 코드들을 구경하는게 하루 일과 중 하나였기때문에 흥미가 갈 수밖에 없었다.
바로 사이트의 개발자 도구를 열어봤다.
구역을 클릭하면 좌석의 정보를 받아오고 화면을 업데이트하기 때문에 구역의 태그만 잡아서 클릭하는 작업만 해주면 좌석 상태가 지속해서 업데이트가 될 것같았다.
어떤 식으로 구현할까 고민하면서 2가지 방법으로 정리를 했다.
예매 프로세스를 그대로 따라서 DOM에 직접 이벤트를 유발시키는 방법
또는 DOM에 연결된 함수를 추적해서 직접 실행해주는 방법
함수를 직접 추적하기보다는 단순한 이벤트유발로 프로세스를 진행하는 것이 안정적이라 생각이 들었다.
선택자로 원하는 구역의 범위를 정하고 setInterval 메서드로 인덱스를 옮겨가며 태그를 클릭하는 작업을 진행했다.
원하는 DOM태그를 잡는 것부터 시도했다.
하지만 window 환경에서 태그가 제대로 잡히지 않았다.
원인을 파악해보니 사이트가 iframe태그를 사용해서 내부에 새로운 페이지를 받아오기 때문에 최상단 document에서 바로 선택자를 잡으면 안되는 것이었다.
https://stackoverflow.com/questions/26630519/queryselector-for-web-elements-inside-iframe
iframe태그를 잡고 내부 document를 기준으로 선택자를 다시 잡으니 문제를 해결할 수 있었다.
성공!
다음으로 화면내부의 좌석 중에 자리가 있는지 확인하는 작업이 필요했다.
좌석은 보통 위처럼 색상으로 유무를 구분하기 때문에 쉽게 진행할 수 있었다.
좌석의 rect 태그의 fill의 상태를 기준으로 구분시켜줬다.
색을 감지한 rect태그에 click메서드를 실행했더니 타입에러가 발생했다.
rect는 svg이기 때문에 일반적인 html과 차이가 있다고 한다.
html과 svg는 모두 DOM요소이지만 html은 주로 레이아웃을 다루는 요소이고 svg는 그래픽을 다루는 요소라한다.
click메서드를 사용하는 것보다 조금 더 범용적으로 사용할 수 있는 dispatchEvent를 사용해 문제를 해결했다.
성공!
여기서부터는 원하는 DOM을 클릭해주기만 하면 되기때문에 별다른 문제가 없었다.
성공해서 너무 좋았지만 기분이 묘했다...
만들어 놓고보니 사회적으로 문제라하는 매크로프로그램이랑 다를게 없어보였다.
그 작업을 이런식으로 하는지는 모르겠지만 생각보다 만들기 쉽다는 것에 놀랐다.
내가 가고 싶은 콘서트도 예매를 시도해보고 싶었지만...
적어도 내가 좋아하는 일로 악용하고싶지는 않았기 때문에 하지않기로하고 예매된 티켓은 다시 취소했다.
비록 다시 사용은 안하겠지만 만드는 동안 너무 재밌었다.
내가 공부하고 있는 지식으로 원하는 프로그램을 만들어간다는게 정말 좋았다.
또 HTML, JS에 있어서 평소에 잘 몰랐던 것에 대한 공부도 된 것같아 개발적으로 도움도 되었던 경험이라 생각한다.
