페이지네이션의 오류로 인해서 알아보는 network 사용법

특정 사이트를 크롤링하는데 페이지네이션이 제대로 되지 않는다 

##예시코드
base_url = "https://example.com/data?page={}"

 

페이지네이션이란 위 예시 코딩과 같이

URL에 ?page={숫자} 형식으로 페이지 번호를 바꿔가며 자동으로 다음 페이지의 데이터를 불러오는 방식을 말하는데 

내가 크롤링을 해야했던 사이트의 경우 페이지네이션이 적용되지 않았다

이럴 경우에는 어떻게 해야할 까?

 

 

 

 

network 사용방법

 

개발자 도구의 Network탭, 어떻게 활용할 수 있나?

network는 처음 알게된 부분이라 다른 블로거분이 정리해주신 내용을 공부한 후에 진행했다

해당 링크는 network에 보는 방법에 대해서 설명해 놓은 내용들이니 필요한 부분은 참고하길 바란다

 

 

 

전체 채용공고 | 캐치

network에서 url을 찾는 방법은 취업 공고 캐치를 통해서 보여주겠다

 

 

캐치 사이트에 들어가서 > 검사 를 누르면 옆에 창이 하나 뜨는데 

이때 이 html을 가져오는게 아니라

 

elements > network 클릭한다

 

 

그럼 이렇게 html내용에서 새로운 화면으로 바뀌게 되는데

밑에 collect와 같은 파일을 통해서 링크를 확인할 수 있다

 

이때 해당 url을 뽑는 링크파일을 찾는 방법은

현재 페이지에서 다음페이지로 넘기면 새롭게 뜨는 무언갈 확인 할 수 있다

참고로 url을 빠르게 찾기 위해선 위에  Fetch/XHR 필터를 클릭하면 빠르게 찾는게 가능하다 

 

다음페이지로 넘어가니까 새로운 것이 두개 생겨났는데

두개 각각 눌러보면 누가봐도 catch url인것을 확인할 수있다

 

현재 내가 알고자하는 경로는 catch이기 때문에 htttp~~catch인 파일이 내가 찾는 것임 셈이다

 

 

그렇게 request url로 가져온 건 다음과 같다

https://www.catch.co.kr/api/v1.0/recruit/information/getRecruitList?Keyword=&JobCode=&Sido=&Career=&JCode=&Size=&EduLevel=&Sort=2&curpage=3&pageSize=30&onRecruitYN=Y&ExceptIDList=

 

기존 페이지네이션할 때 확인했던 링크랑은 길이가 너무 다르고 이게 뭐지 싶었지만

조금씩 읽어보면 굉장히 단순한 걸 알 수 있다 

내가 현재 머물고 있는 페이지는 3페이지 그래서 숫자 3을 집중적으로 찾아보면 

curpage=3 이라고 적혀있다

실제로 저 url을 가지고 curpage= 숫자 만 바꿔보면

페이지네이션 했을 땐 바뀌지 않은 페이지가 바뀐걸 확인 할 수 있었다

 

 

 

후기 

 

물론  위에 network에서 가져온 url은 데이터를 반환하는 api엔드포인트로 html이 아닌 json형식의 데이터를 제공하기 때문에 JavaScript로 데이터를 받아 HTML 구조에 맞춰 변환해야 한다고 한다.

하지만 난 javascript를 해본 적이 없었고 크롤링만 계속할 순 없어 그냥 html로 현재 페이지만 불러오기를 진행했지만 

이번에 크롤링을 하면서 페이지네이션 이외에도 url을 읽는 법을 배우고

처음으로 network 사용법에 대해 배우게 되는 시간이었다