위코드에 있다보면 다양한 세션들이 많이 열린다.
선택과 집중을 강조하시기 때문에 모든 세션들은 선택사항 이지만!!!
이날은.. 죽일놈의 호기심 때문에 선택과 집중을 포기하기로 했다.
Crawling
옛날엔 html안에 모든 데이터를 심은 상태로 페이지를 만들었기 때문에 크롤링이 쉬웠는데
요즘은 SPA로 페이지 작업을 많이들 하기 때문에 크롤링이 쉽지가 않다.
그래서 팬텀 JS나 셀레늄 같은걸 써서 비동기로 처리해서 크롤링을 한다고 하는데..
이날 우리의 목표는 node.js를 이용해 크롤링 하고, 몽고 db에 넣는 것이었다.
Node.js 란?
node.js는 언어도, 프레임워크도, 라이브러리도 아니다. JavaScript Runtime 환경이다.
더 간단히 말하자면 백앤드 시스템이 자바스크립트에서도 돌아갈 수 있도록 도와주는 것!
원래 node.js에서 ES6 문법이 적용이 안 됐었는데 업글 되고 node 12버전부터 최신문법 적용된다!
여튼 node에서의 require이 import와 같다고 한다.
도전! 클래스101 크롤링하기
오늘의 목표는 클래스101의 카테고리 정보 크롤링하기!
카테고리가 어딨냐하면… 클래스101 사이트에서 스크롤을 좀 더 내려보면
굉장히 어중띈 곳에 카테고리 정보가 뙇!!
저 카테고리 정보를 가져오려면 먼저 개발자도구를 열고…
네트워크탭의 XHR눌러서 body에 categorysummarylist 써잇는 쿼리 복붙해야 한다.
신기한건 endpoint가 전부 graphql 한 개로 되어있다는 것…!
여튼 이게 중요한 게 아니고..!
스크롤을 내려 Request Payload 에 내가 원하는 정보가 있는걸 확인하고 복붙 고고
const axios = require('axios');
// axios.get('https://class101.net/').then((response)=>{
// console.log(response)
// })
axios.post('https://gql-prod.class101.net/graphql', {
operationName:"CategorySummaryList",
variables:{"categoryFilter":{"isHide":false},"offset":0,"limit":9999},
query: `fragment CategorySummary on Category {
_id
firestoreId
title
iconUrl
__typename
}
query CategorySummaryList($categoryFilter: PreCategoryFilter!, $limit: Int, $offset: Int) {
categories: getCategories(categoryFilter: $categoryFilter, limit: $limit, offset: $offset) {
...CategorySummary
__typename
}
}
`
}).then((response)=> {
console.log(response.data)
})시간 관계상 node.js의 문법 및 코드 한줄한줄을 이해할 수 없었기 때문에
일단 주어진 양식에 개발자도구에서 긁어온 정보를 복붙 해보았다!
여기서 잠깐!
node.js 에서 node 경로를 입력하면 콘솔창을 사용할 수 있다.
나는 src디렉토리 아래의 craw파일의 콘솔을 보기 위해 node src/craw를 입력해봄
콘솔로그에 response를 쳐보면 위와같이 뜨고
콘솔로그에 response.data 쳤을땐 위와깉이 뜬다.
마지막 줄 콘솔찍는 부분을 JSON.stringify로 받아보자.
}).then((response)=> { console.log(JSON.stringify(response.data, null,2)) })
이렇게 하면..!
오오 씐기씐기!! title에 내가 원하는 카테고리명들이 뙇!!!
MongoDB 설치하기
노드도 초록, 몽고도 초록초록 친환경적이고 좋군~
일단 공식문서 보고 터미널에서 몽고디비와 친구들을 설치해보았다.
(아래는 맥 명령어 기준입니다.)
brew tap mongodb/brew
brew install mongodb-community@4.2
// 위의 두개 설치하고
brew services start mongodb-community
// 이걸로 실행아!! 몽고디비 컴파스도 깔아줍니다. 검색해서 다운고고!
아래의 화면은 몽고디비 컴파스로 보이는 화면. 약간 포스트맨의 역할을 하는 것 같다
오 신기신기!!!!!!!
일단 이번 포스팅은 이게 끝이다 ㅋㅋㅋㅋ
지난번엔 파이썬으로 크롤링도 해보았고, 이번엔 node.JS 도전!!!
나중에 좀 더 파보고.. 위코드에서 했던 1차 프로젝트를 한번 손보고싶닼ㅋㅋ
1년 안에 할 수 있겠지????
일단 급한건 리액트니깐.. 리액트부터 열심히 파보자. 아자아자!!
🔥불코딩!열코딩!빡코딩!죽코딩!🔥
지난번 파이썬 크롤링 포스팅이 궁금하다면? 여기 클릭
Reference
- 위코드 node.js 크롤링 세션