네이버 날씨를 검색해서 크롤링에 도전해보았다
먼저 터미널에서 라이브러리를 설치했다.
npm init -y
npm install axios@0.21.1 cheerio@1.0.0-rc.9 puppeteer@9.1.1 lodash@4.17.20 date-fns@2.21.1 date-fns-tz@1.1.4 ❷설치 후 비동기로 axios 해주고 예외처리도 해주기
const axios = require("axios");
const cheerio = require("cheerio");
const getHtml = async () => {
try {
return await axios.get(
"https://search.naver.com/search.naver?where=nexearch&sm=top_sug.pre&fbm=1&acr=4&acq=%EB%82%A0%EC%94%A8&qdt=0&ie=utf8&query=%EB%82%A0%EC%94%A8"
);
} catch (error) {
console.error(error);
}
};
크롤링하고 싶은 사이트에 접속하여 타겟을 정한다
타겟은 주간예보 선택자를 정하기 위해 개발자 모드에 들어가서
선택자를 확인!
ul 이후로는 li 들 class 명이 동일하여
기준( 아래 코드에서 $domElement)을 ul의 자식 li 태그를 잡아준다
const $ = cheerio.load(html.data);
// HTML을 파싱하고 DOM 생성하기
const $domElement = $(
".cs_weather_new .weekly_forecast_area .list_box ul"
).children("li.week_item");그리고 날짜랑 최고 / 최저 기온을 뽑기 위해
리스트에 저장해준다
// CSS 셀렉터로 원하는 요소 찾기
// 찾은 요소를 순회하면서요소가 가진 텍스트를 출력하기
$domElement.each(function (idx, elem) {
uiList[idx] = {
date: $(this).find(".cell_date .date"),
weather: $(this).find(".cell_temperature .temperature_inner"),
};
console.log($(elem).text());
});이후 Node 객체인 elem을 $로 감싸서 cheerio 객체로 변환 후
출력
음 굿
최종코드
더보기
const axios = require("axios");
const cheerio = require("cheerio");
const getHtml = async () => {
try {
return await axios.get(
"https://search.naver.com/search.naver?where=nexearch&sm=top_sug.pre&fbm=1&acr=4&acq=%EB%82%A0%EC%94%A8&qdt=0&ie=utf8&query=%EB%82%A0%EC%94%A8"
);
} catch (error) {
console.error(error);
}
};
getHtml().then((html) => {
let uiList = [];
const $ = cheerio.load(html.data);
// HTML을 파싱하고 DOM 생성하기
const $domElement = $(
".cs_weather_new .weekly_forecast_area .list_box ul"
).children("li.week_item");
// CSS 셀렉터로 원하는 요소 찾기
// 찾은 요소를 순회하면서요소가 가진 텍스트를 출력하기
$domElement.each(function (idx, elem) {
uiList[idx] = {
date: $(this).find(".cell_date .date"),
weather: $(this).find(".cell_temperature .temperature_inner"),
};
console.log($(elem).text());
});
});
참고자료
▶ https://www.letmecompile.com/javascript-crawler-tutorial-part3/
▶ https://velog.io/@yesdoing/Node.js-%EC%97%90%EC%84%9C-%EC%9B%B9-%ED%81%AC%EB%A1%A4%EB%A7%81%ED%95%98%EA%B8%B0-wtjugync1m
'JS' 카테고리의 다른 글
| js- API 활용기) 데이터 -> Json형식 (1) | 2023.01.20 |
|---|---|
| 리액트 카카오 지도 api (0) | 2023.01.18 |
| React ) 엑셀 json변환, map(), filter() (0) | 2022.12.22 |
| /* 카카오 지도 API 활용하여 갬성카페 지도 사이트 만들기*/ (0) | 2022.01.16 |
| Kakao 지도 api 활용) 여러 마커 + 인포윈도우 표시 (0) | 2022.01.09 |
