크롤러를 사용하여 마켓 컬리의 데이터를 활용해 간단하게 db를 만들어서 사용하고자 했음.
일단 나는 크롤러 써본적도 관련 라이브러리도 잘 몰라 Cheerio를 쓰면 된다는 글들이 많아, 해당 라이브러리를 쓰고자했음
문제점 - 동적 코드들을 못긁어옴
아니 가져오는 데이터에 metadata, title, 이런것만있지 js로 생성되는 동적 데이터들이 하나도 없었음
그래서 과거 정적 동적 크롤링이란 단어를 들은 기억이 있어서, 동적 크롤링을 검색해보니 selenium이란 툴을 발견했음.
해결 - Selenium
크롬 드라이버니 머니 참 복잡하다...하면서 어찌어찌 GPT님의 도움을 받아 코드를 짜나아갔음
그러다 보니 Next.js에서 크롤링을 계속 할 필요는 없고 내가 필요할 때 걍 한번 호출해서 긁어온 데이터를 db에 넣어주기만 하면 되는 거라서 이걸 굳이 route handler쪽에 넣어놔야하나? 라는 의문이 생김
의문 - route handler에서 크롤링을 해야하나?
그래서 node.js 환경에서 파일만 실행시킬 수 있음 되겠다는 결론이 섬
그래서 아래와 같이 js 파일을 하나 만들어서 크롤링만 가능하도록 코드를 짯음
문제점(2) - 데이터가 너무너무너무너무 많아
json-server에 메인 페이지의 데이터를 조금만 넣어서 간단하게 UI를 흉내내고 기능들만 구현하려는 프로젝트지 완벽하게 클론하려는 프로젝트가 아님
고로 25가지의 데이터만 남기고 싹다 날려버렸음 근데 날린 후 데이터들을 확인해보니 아니? 크롤러 이자식 데이터를 쓸 대 없는 이미지만 들고 있는 데이터를 주질않나 쩝...이것도 기술이구나 싶었음
결국 비어있는 데이터는 손으로 직접 넣어주어 메인 페이지의 작업이 가능할 정도의 간단한 db가 완성이됨
들쭉 날쭉한 데이터들로 인해 아마 컴포넌트를 만들 때 한번씩 삑날 것 같긴한데 그건 감안해야 하는 부분
나? 프론트엔드 개발자 서버? 일단 신경안씀 ㅋ 이란 마인드로 매우 신경쓰이지만 간단하게 가져가려고 노력중임
느낀점
크롤링을 다시는 하지 않으리
크롤링이 어떻게보면 뚝딱 하면 되는건지 알았음
'머릿속으로는 태그별로 불러오면 끝아닌가?'라는 생각을 가지고 있었는데
해보니 그렇지만은 않았다.
물론 Next.js에서 셀레니움을 쓰려해서 그런 것일 수도 있고 머 여러 부분이 있겠지만, 크게 신경쓰지 않고 다음 챕터로 넘어가고자함
나? 웹 개발자 ㅋ
