익스프레스 이식은 성공하지 못했는데, 필요한 모든 것이 갖춰진 상태가 된 것 같다.
해결된 문제
가져오는 포스팅 수가 불규칙적이었던 경우에 대하여
자체적으로 스크롤을 내리면서 ul에 상속되어있는 li의 개수를 확인하고
그 개수만큼 반복문이 돌아가는 구조로 만들어놨다.
근데 맨 처음에 수집할때 6천개였던 것이 3천개로 줄어버린 것이 아닌가?
채용공고가 몇분사이에 반토막이 난다는 것은 이해를 할 수 없었다.
그래서 천천히 코드를 보고 화면을 보면서 어떤 문제가 생겨나는지 알 수 있었다.
위의 움짤을 보면 카드의 이미지를 가져오는 과정에 딜레이가 걸려서 탭이 생성되는 것을 확인할 수 있다
바로 이것이 문제였다 -_- 스크롤을 내리는 코드를 보면서 설명을 이어가겠다.
스크롤을 내리는 코드
let originalOffset = 0;
while (true) {
await page.evaluate("window.scrollBy(0, document.body.scrollHeight)");
await page.waitForTimeout(3000);
let newOffset = await page.evaluate("window.pageYOffset");
if (originalOffset === newOffset) {
break;
}
originalOffset = newOffset;
}스크롤 내리는 수도코드
- 페이지를 구성하는 페이지의 최상단 포지션을 originalOffset에 0으로 지정한다.
- 페이지의 최하단으로 이동하여 그 포지션을 newOffset에 저장한다.
- 둘이 같으면 반복문을 멈춘다. (스크롤이 제일 아래까지 끌어내려갔을 경우)
- 같지 않다면 newOffset의 포지션이 originalOffset에 저장이 된다.
- 계속 반복하면서 스크롤을 내리는 식으로 구현이 되어있었다.
콘솔로 찍어본 originalOffset와 newOffset 2개 단위로 끊어서 보면 된다.
그런데 페이지를 로딩하는 것이 아직 끝나지 않았기 때문에 더이상 아래로 스크롤을 내릴 수 없어서 멈춘 것이였다.
그래서 await page.waitForTimeout(3000);이 원래 2000(2초)였는데 3으로 바꿨더니 금방 해결이 됐다.
자체 브라우저의 크기를 넓혀보자.
어지간해서는 브라우저를 직접 켜서 작업을 안할텐데
나는 페이지를 새로 생성해서 그 속에서 값을 꺼내오다보니 브라우저를 끈 상태에서는 진행이 되지 않더라(도커에서 돌아가나 이거...)
그런데 생각을 해봤더니 화면을 더 크게 만들어놓을 경우 한번에 로딩되는 숫자가 늘어나서 스크롤을 내리는 시간이 상당히 많이 줄어들 것이라고 생각했다.
왜냐하면 지금 스크롤을 다 내려주는데 한 20분 넘게 걸린다. (그만큼 글도 많아서긴 하겠지만)
그래서 좀 찾아봤더니 해상도 그 자체를 변경해주는 옵션이 있었다.
const browser = await puppeteer.launch({
headless: false,
args: ["--window-size=1920,1080"],
}); // headless false면 브라우저가 보인다. args로 브라우저의 해상도를 화면의 크기와 맞춰놨다.
const page = await browser.newPage(); // 새로운 브라우저 켜기
await page.setViewport({ width: 1920, height: 1080 }); // 브라우저 크기 설정이런식으로 했더니 FHD였던 작업용 모니터 화면에 꽉차는 것을 확인했고, 이로 인해서 스크롤하는 시간이 3분정도 줄어든 것 같다.
이제 크롤링에서 필요한 모든 작업은 완료했고, 이 데이터를 활용해서 작업하는 것만 고민을 하면 될 것 같다.
그래서 익스프레스 어떻게 쓰지요....?
NestJS쓰면 정말 반나절이면 다 짤 수 있는데 express로 TypeORM연결하고 ELK 연결하고....
아니 너무 자유로워서 문제라니까 ㅠㅠ
