점심 무렵에 했던 고민들이 대부분 해결이 됐고, 이제는 프로젝트로 넘어갈 수 있는 상태에 도달했다.
해결한 고민
존재하는 카드의 개수를 확인하기
무한스크롤이 적용되어있는 원티드의 경우 존재하는 채용 페이지를 들어가서 데이터를 가져올 경우에는
반복문이 필요할 수 밖에 없는 구조로 되어있다.
한개만 가져오는 것이 아니라 모든 채용 정보를 가져와야하기 때문이다.
그래서 카드의 개수를 확인했어야 했는데 이 과정에서 많은 문제가 생겼다 -_ -
사진을 확인해보면 상당히 깊은 위치에 존재하는 것을 확인할 수 있다.
하지만 결국은 마우스 포인터가 지목한 것 처럼 li 위에 ul data-cy="job-list"가 상속 관계로 되어있는 것을 볼 수 있다.
그래서 ul > li의 개수만 확인을 하면 해결을 할 수 있었는데
일반적으로 사용했던 document.getElementsByClassName()를 사용해봤지만 먹히질 않았다(...)
또 다시 검색으로 방법을 확인할 수 있었다.
https://stackoverflow.com/questions/55168344/puppeteer-counting-elements-in-the-dom
여기서 나온 방법을 토대로 웹페이지에서 먼저 어떤식으로 작동하는지 확인을 해보았는데
div.JobList_cn__t_THp > div > div > div.List_List_container__JnQMS > ul > li
이러한 형식으로 작동이 되는 것이 확인되어서 코드에 적용을 해보기로 했다.
puppeteer에서 상속되어있는 자식의 정보 개수를 가져오는 코드
await page.waitForSelector(
`div.JobList_cn__t_THp > div > div > div.List_List_container__JnQMS > ul >li`);
const listLength = (
await page.$$(`div.JobList_cn__t_THp > div > div >div.List_List_container__JnQMS > ul > li`)
).length;이러한 방식으로 개수를 가져올 수 있게 돼서 현재 원티드에 올라와 있는 모든 채용 데이터를 가져와봤다.
여러번 반복을 해보았는데, 개수의 편차가 상당히 커서 이 부분에 대해서는 확인을 좀 해봐야할 것 같다(...)
DB에 데이터를 넣기
데이터를 가져올 수 있게 되었으니 당연히 DB에 넣어야했다.
그래서 어떤 DB를 사용할까 고민을 하다가 SQL인 MySQL을 사용하기로 했다.
왜 NoSQL을 사용하지 않았냐면 이유는 내가 불편해서 만드는 것인데
상세한 검색을 위해서는 컬럼이 완벽하게 분리가 되어있어야 한다고 생각했다.
그래서 일단 임시로 몇개만 빼서 넣어봤다.
성공적으로 크롤링이 되는 것을 확인했는데, 이제 문제는 이것을 express로 이식을 해보고 싶어서 확인을 해보고 있다.
nestjs를 주요 배우기도 했고 워낙 프레임워크가 잘 되어있기 때문에 내가 원하는 것이 있다면 금세 적용을 할 수 있는데
상대적으로 많이 쓰이는 express를 자주 써보지 않아서 이것을 활용한 프로젝트가 한개쯤은 있으면 좋겠다는 생각이 들었다.
그래서 지금 현재 생각중인 구조는 이렇게 된다.
- 서버를 켜놓는다.
- 웹 크롤러를 작동시켜서 서버와 연동되어있는 MySQL DB에 데이터를 집어넣는다.
- Logstash를 활용하여 MySQL에 들어간 데이터를 Elasticsearch에 넣어준다.
- 모든 검색은 Elasticsearch를 기반으로 작동된다.
이런식으로 작업을 해보고 싶은데 nestjs로는 지금 사실상 지금 Elasticsearch 연동만 시켜주면 끝이라서(....)
express를 활용해서 작업해보려고 이것저것을 찾아보고 있는 상태다.
이제 해야할 것
- 가져오는 개수의 편차가 있는 이유를 확인하기
- express에 typeorm 깔아서 mysql 연동시키고 데이터 집어넣기.
끝
