배경
취업지원 플랫폼 프로젝트를 진행할때, 매일 새로운 회사정보와 채용공고를 메인에 보여주어야 했습니다.
해당 상황을 해결하기위해 인크루트를 크롤링 하기로 하였습니다.
크롤링을 하기 전 여러 라이브러리를 고민하였는데 이곳저곳에 흩어져있는 데이터를 모으기 위해 직접 브라우저를 실행하고 해당 페이지로 이동한 뒤 원하는 데이터를 스크래핑 하는 방법인 puppeteer을 선택하게 되었습니다.
이슈
puppeteer를 사용하여 크롤링하는 것에 성공하였으나 처리속도가 너무 느린 부분이 있었습니다.
회사, 채용공고를 합해서 4개 정도를 크롤링해오는데 있어서 1m22s가 걸렸습니다.
원인 분석
delay를 걸은 것도 아닌데 왜 이렇게 느릴까 생각했습니다. 사이트에 진입해서 페이지를 조회하고 웹 스크래핑을 하는 과정 자체에서 많은 리소스를 사용하는 것 같다고 생각했고 사이트를 진입할때 속도를 개선할 수 있는 몇가지 방법을 찾아 적용을 해보았습니다.
// 이미지 렌더링 비활성화
await page.setRequestInterception(true);
page.on('request', (request) => {
if (request.resourceType() === 'image') {
request.abort();
} else {
request.continue();
}
});
// 뷰포트 크기 조정
await page.setViewport({ width: 1024, height: 768 });
// JavaScript 비활성화
await page.setJavaScriptEnabled(false);
그럼에도 속도가 빠르게 개선되지 않았습니다.
지금 내가 만드는 작은 사이트에서 오히려 puppeteer라는 라이브러리를 쓰는 것 자체가 너무 많은 과부화를 주는게 아닐까 판단했고 다른 방법을 찾아보았습니다.
Puppeteer vs Axios
Puppeteer와 Axios의 각각의 특징을 파악했을때 든 생각은,
데이터의 정보가 여러 화면에 흩어져있는 것 뿐이지 있는 그대로의 회사 정보와 채용공고를 가져오면 되었었고, 사용자와 상호작용하거나 동작하는 동적인 웹페이지를 크롤링하거나 다양한 부가 기능을 사용할 필요가 없기때문에 Axios를 선택하여 시도하게 되었습니다.
Puppeteer | Axios |
1. javascrip를 실행하고 웹페이지를 렌더링, 동적 웹페에지에서 데이터를 가져와야하는 경우 유용 2. 웹페이지를 크롤링하거나 상호작용하는데 다양한 기능을 제공 (ex. 웹페이지의 양식을 작성하거나 클릭, 페이지네비게이션 제어) |
1. 간단한 HTTP 요청을 사용하여 데이터를 가져오기 때문에 일반적으로 빠름, 큰 양의 데이터를 가져와야하는 경우 더 효율적 2. 서버로 직접 HTTP 요청을 보내는데 적합, 서버측에서 제공하는 API또는 데이터에 접근하는데 유용 |
시도 및 해결
우선 저희 프로젝트에 반영하기전에 따로 파일을 만들어서 axios로 작게 크롤링을 시도해보았습니다.
1000개의 데이터를 가져오는데 11s정도가 걸렸고 저희 프로젝트에 반영해도 괜찮을 것 같다는 생각이 들었습니다.
그래서 저희 프로젝트로 가져와서 위에서 진행했던 puppeteer와 동일하게 시도하니 실행시간을 3s로 줄였습니다.
다만 문제가 있었는데 처리속도가 너무 빨리 개선되다보니 해당 사이트에 블락 당하는 이슈가 있을 것 같았습니다.
(사실 이전에 잡코리아를 크롤링하다가 블락을 당해서 크롤링이 중단 당해지는 사건이 발생했었음 ㅠㅠ)
그래서 안정적으로 delay를 걸어서 크롤링을 시도했고
await this.delay(10000); // 각페이지 크롤링 후 10초 대기
최종적으로 새로운 채용공고의 내용을 메인에 업데이트해야하기 때문에 scheduler를 통해 매일 크롤링을 돌리게 하였고,
리소스 과부화를 막기 위해 유저가 많이 이용하는 시간이 아닌 새벽 3시로 시간을 설정하였습니다.
@Cron('0 3 * * *') // 매일 새벽 3시에 실행
마치며
위의 해결방안을 통해 puppeteer 1m22s → Axios 3.8s로 실행시간을 95% 개선했습니다.
분명 puppeteer를 통해 속도를 개선하는 방향도 있었겠지만 저희 프로젝트의 특성과 크롤링하는 데이터의 특성을 파악했을때는 Axios를 선택한게 나은 방향이었다고 생각했고, 앞으로도 어떠한 기능을 반영하게 된다면 현재 나의 프로젝트 상황과 데이터의 특성을 파악하여 반영해야겠다고 생각했습니다.
'혼자 고민해보기_ 개발' 카테고리의 다른 글
multer-s3 이미지 등록하기 (0) | 2023.09.26 |
---|---|
ChatGPT Prompt 최적화 (0) | 2023.09.25 |
Trello project- KPT 회고 (0) | 2023.08.14 |
혼자 고민해보기6기 Node.js 심화 프로젝트 제출 (0) | 2023.08.14 |
6기 Node.js 심화 프로젝트 S.A 제출 (0) | 2023.08.07 |