크롬 개발자도구로 지마켓의 기간검색 범위 바꿔보기

어느 날 지마켓에서 지금까지 주문했던 주문내역들을 조회를 해보려고 하는데, 기간검색을 시도하니 1개월, 보름, 일주일 단위로밖에 작동하지 않는 것을 보았다. 너무나도 불편한 사이트 설정이었기에 크롬의 개발자도구 (F12)로 달력을 살짝 살펴보았다.

 

개발자도구의 해당 부분을 클릭하고 사이트의 여기저기를 클릭하면 그 구조를 볼 수 있다.

 

개발자도구의 버튼 클릭 후 달력을 선택

 

시작일자 선택 부분의 구조

위 구조를 살펴보면

각종 값을 입력받을 수 있는 <input>태그지만 readonly="true"라는 부분때문에 키보드입력으로 편집하는 것이 막힌 것을 확인할 수 있었다. value라는 부분이 실제로 반영되는 기간을 나타낸 것 같았다.

 

저 부분을 수정한다면 1일 단위로도 기간검색이 가능하지 않을까 생각하여 바로 개발자도구로 시도해보았다.

 

 

개발자도구의 콘솔을 눌러서 각종 자바스크립트를 실행 할 수 있다.

바로 몇 줄 써내려가 보았다.

document.querySelector('#searchSDT').readOnly = false
document.querySelector('#searchEDT').readOnly = false

#searchSDT, #searchEDT는 각각 시작일자와 종료일자의 구조에 있던 "id"값을 의미한다. (위 구조 사진 참조)

id의 사용법은 css selector를 검색해보면 자세하게 나온다.

그 안에 있던 readOnly라는 편집 불가능하게 하는 부분을 false로 설정해주었다.

 

위 코드 두 줄로 설정은 끝, 다시 기간설정 부분을 틀어서 키보드로 아무값이나 입력해보겠다.

 

아무거나 입력해도 들어가게 되었다.

위 사진처럼 아무값이나 입력 할 수 있게 되었으나 당연히 아무값이나 입력하면 사이트 개발자가 의도한대로 작동하지 않는다. 우리는 개발자가 의도한 형태대로 저 칸에 기간을 입력하도록 하자.

ex) 2022-06-01

 

날짜를 달력으로 선택하지 않고 키보드로 입력받은 사진. 바로 조회하기를 눌러보겠다.

위 방법으로 하루단위로도 물건을 검색 할 수 있게 되었다.

 

그렇게 많이 쓰이진 않겠지만 일주일, 보름, 한달 단위로 고정되어있던 검색범위를 고쳐볼 수 있었다.