북마크릿으로 클라이언트를 클릭해보자

북마크릿으로 클라이언트를 클릭해보자

수집할 요소의 CSS 셀렉터를 사람이 직접 찾아서 코드에 넣는 게 번거로웠다. 북마크릿에서 후보 셀렉터를 순서대로 시도해 처음 매칭되는 요소를 클릭하도록 만들었다.

1. 서론 (Introduction)

• 문제/상황 (Problem): 수집 대상 요소의 CSS 셀렉터를 매번 DevTools로 찾아서 코드에 하드코딩했다. 사이트 레이아웃이 바뀌면 다시 찾아야 했다.
• 목적 (Purpose): 북마크릿으로 셀렉터 후보 목록을 순서대로 시도해 요소를 클릭하고, DOM 이벤트도 프로그래밍으로 디스패치할 수 있게 한다.
• 대상 (Target Audience): 수집 대상 셀렉터를 자동화하고 싶은 개발자.

2. 방법 및 과정 (Methods & Process)

• 배경 조사 및 데이터 (Data Collection): document.querySelector로 요소를 찾아 .click()을 호출하거나 dispatchEvent로 커스텀 이벤트를 발생시킬 수 있다. React·Vue 같은 프레임워크는 합성 이벤트를 쓰기 때문에 단순 .click()이 아니라 MouseEvent를 dispatchEvent로 발생시켜야 프레임워크가 감지한다. 사이트 레이아웃이 자주 바뀌는 경우 셀렉터 하나만 하드코딩하면 곧바로 깨지므로, 후보 셀렉터 여러 개를 순서대로 시도해 처음 매칭되는 것을 채택하는 방식이 안정적이다.
• 접근 방법 (Approach Methods):
  • [방법 1]: 셀렉터 후보 순회. #submit-btn, .btn-primary, button[type=submit] 같은 후보 목록을 배열로 두고 querySelector를 순서대로 시도해 처음 존재하는 요소를 채택한다.
  • [방법 2]: 이벤트 디스패치. 채택한 요소에 new MouseEvent("click", { bubbles: true, cancelable: true })를 dispatchEvent로 발생시켜 실제 사용자 클릭처럼 프레임워크가 감지하게 한다.
• 분석 및 해결 프로세스 (Analysis Flow):
  • 도구/기술: 북마크릿 JS 문자열, 파이썬으로 재현한 셀렉터 순회 헬퍼.
  • 주요 단계: 셀렉터 후보 목록 정의 $\rightarrow$ 순서대로 존재 여부 확인 $\rightarrow$ 첫 매칭 셀렉터 채택 $\rightarrow$ 해당 요소에 클릭 이벤트 디스패치.
  • 결과 도출 및 검증: 후보 ["#submit-btn", ".btn-primary", "button[type=submit]"] 중 #submit-btn이 없는 가짜 페이지에서 순회한 결과, 두 번째 후보인 .btn-primary가 채택됐다. 첫 번째 미매칭 후보를 건너뛰고 다음 후보로 넘어가는 동작을 확인했다.

3. 결과 (Results)

• 분석 결과 요약: 수집 대상 요소가 셀렉터 후보 중 어디에 걸리든 첫 매칭 셀렉터가 자동으로 채택됐다. DevTools를 열어 수동으로 셀렉터를 찾지 않아도 됐고, 채택된 셀렉터에 바로 클릭 이벤트를 디스패치할 수 있었다.

4. 인사이트 및 액션 (Insights & Action)

• 인사이트 (Insight): 셀렉터 하나를 하드코딩하는 대신 후보 목록으로 두면 레이아웃이 조금 바뀌어도 다른 후보가 매칭돼 코드를 안 고쳐도 되는 경우가 많다.
• 실행 방안 (Action Plan): 사이트 레이아웃이 바뀐 경우에도 후보 목록에 새 셀렉터를 하나 추가하는 식으로 대응하면 기존 후보를 지우지 않아도 된다.
• 한 줄 결론 (Key Takeaway): 셀렉터는 하나가 아니라 후보 목록으로 순회하면 견고해진다. 북마크릿은 그 순회와 클릭 디스패치를 한 번에 실행하는 도구가 된다. 샘플 코드
• 다음 스텝 (Next Step): 이번 후보 목록은 수동으로 나열했다. 클릭한 요소로부터 셀렉터 후보 자체를 자동 생성(부모 경로·nth-of-type 조합)하는 로직을 붙이면 하드코딩을 완전히 없앨 수 있다.

---