Node.js 웹 크롤링

네이버 날씨를 검색해서 크롤링에 도전해보았다

 

먼저 터미널에서 라이브러리를 설치했다.

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