1. 크롤링 방식 의사 결정 트리
(1) 메인 HTML 소스에 찾는 데이터가 존재
- 크롤링 방식을 다시 결정하기 위해 사이트 > "페이지 소스 보기"를 통해 크롤링하고자 하는 페이지의 최초 HTML 소스를 확인했다
- 동적 페이지이므로 메인 HTML 소스 안에 찾고자 하는 데이터가 존재하지 않는다 :) ..!
* 앞선 포스트에서 사용했던 방법은 1번 axios + cheerio를 사용한 방법
(2) 추가적인 API 호출에 데이터가 존재
- API에 추출하고자 하는 데이터가 존재하는지 확인하기 위해
- 해당 페이지에서 개발자 옵션의 Network를 열고 새로고침했다
- 상당히 많은 양의 API가 호출되는데 그 중 추출하고자하는 값을 Response로 가져오는 API와 경로를 찾았다
- https://swu6478.zendesk.com/api/lotus/graphql
2. axios를 사용하여 크롤링하기
- axios로 원하는 API의 Response를 불러오고 콘솔 창에 출력하는 renderText() 함수를 만들었다
- 우선 함수가 제대로 동작하는지 확인하기 위해 url을 하드코딩함 !
async function renderText() {
// axios로 JSON 로드하기
const resp = await axios.get(
'https://swu6478.zendesk.com/api/lotus/graphql',
);
console.log(resp.data.ticket.id.description);
}
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('getUrl');
link.addEventListener('click', function() {
getTabUrl(function(url) {
renderUrl(url);
renderText();
//console.log('check1');
});
});
});
- 콘솔에 왜 대체 아무것도 찍히지 않을까 고민하다가 깨달음을 얻었다
- 크롬 확장 프로그램의 popup.js 콘솔은 아래와 같은 방법으로 확인할 수 있다!
💭현상황💭
- URL을 https://swu6478.zendesk.com/api/lotus/graphql으로 넣으면 오류가 발생하고
-https://swu6478.zendesk.com/agent/tickets/1으로 넣으면 콘솔에 아무 것도 출력되지 않는다.
