많은 웹사이트에서는 “더 보기” 또는 “더 많이 보기” 버튼을 사용해 콘텐츠를 계속해서 불러옵니다. 이는 사용자 경험을 개선하기 위해 매우 흔히 사용되는 방식입니다.
“다음” 버튼을 사용하는 페이지네이션과 달리 “더 보기” 버튼은 한 페이지 위에 새로운 콘텐츠를 계속 추가하기 때문에 데이터를 추출하기가 조금 더 까다롭습니다.
이 글에서는 Octoparse에서 “더 보기” 버튼을 처리하는 방법을 소개하겠습니다.
아래 링크를 사용해 따라 해볼 수 있습니다:
https://www.crutchfield.com/shopsearch/TV.html?&fa=1&pg=1#&nvpair=FFCategory|[rank260050]TVs
1. 자동 인식 기능으로 “더 보기” 버튼 처리하기
Octoparse의 웹 데이터 자동 인식 기능을 사용하면 이런 유형의 웹사이트를 쉽게 처리할 수 있습니다.
웹 페이지 데이터 자동 인식 클릭하여 인식이 완료될 때까지 기다립니다.
팁 패널에 “‘더 보기’ 버튼 클릭하기”이라는 메시지가 표시됩니다.
체크를 클릭해 “더 보기” 버튼이 올바르게 인식되었는지 확인합니다. 올바르지 않다면 편집을 클릭해 올바른 버튼을 직접 선택하세요.
편집에서 클릭 횟수를 설정합니다. (즉, “더 보기” 버튼을 몇 번 클릭할지 지정)
AJAX 타임아웃을 설정합니다. (버튼 클릭 후 페이지가 완전히 로드될 때까지의 대기 시간)
워크플로우 생성을 클릭해 설정을 적용합니다.
워크플로우는 아래와 같은 형태로 표시됩니다:
2. 수동으로 페이지네이션 단계 만들기
자동 인식 기능이 “더 보기” 버튼을 찾지 못할 경우 수동으로 페이지네이션 단계를 만들 수도 있습니다.
웹페이지에서 “더 보기” 버튼을 선택하고 루프 클릭을 선택합니다.
적절한 AJAX 타임아웃을 설정합니다.(AJAX란 무엇인가요?)
이제 워크플로우에 페이지 넘기기 단계가 추가됩니다. 이후 필요한 데이터 추출 단계를 추가하면 됩니다.
팁:
Octoparse가 “더 보기” 버튼을 정해진 횟수(예: 3회, 5회, 10회) 클릭하도록 설정하려면 반복 필드에 숫자를 입력하세요.
데이터를 추출할 때 중복 항목이 많이 생긴다면 루프 아이템을 페이지 넘기기 단계 밖으로 끌어내세요. 이렇게 하면 Octoparse가 먼저 모든 항목을 불러온 다음 데이터를 추출하므로 중복이 줄어듭니다.
