node.js crawling 간단한 예제

코로나 현황판 크롤링

 

client

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const getData = async () => {
      const datas = await axios.get("http://localhost:4000/");
      setData(datas.data);
    };
    getData();
  }, []);

  useEffect(() => {
    console.log(data);
  }, [data]);

  if (data === null) {
    return <div>Load..</div>;
  } else {
    console.log(data);
    return (
      <div>
        {data.map((ele) => (
          <>
            <div>
              현재 {ele.text}의 현황 : {ele.num}
            </div>
            <br />
          </>
        ))}
      </div>
    );
  }
};

export default App;

server

const express = require("express");
const cors = require("cors");
const cheerio = require("cheerio");
const axios = require("axios");
const PORT = 4000;
const app = express();

app.use(cors());

const getHtml = async () => {
  try {
    return await axios.get("http://ncov.mohw.go.kr/");
    // 해당 사이트 html 태그 가져오기
  } catch (error) {
    console.error(error);
  }
};

app.get("/", (req, res) => {
  getHtml()
    .then((html) => {
      const $ = cheerio.load(html.data);
      let parentTag = $("div.liveNum ul.liveNum li");
      // 크롤링할 태그 찾기

      let resultArr = [];
      parentTag.each(function (i, elem) {
        let itemObj = {
          text: $(this).find("strong").text(),
          num: $(this).find("span").text(),
        };
        resultArr.push(itemObj);
      });

      resultArr.forEach((elem) => {
        console.log(`현재 ${elem._text}의 현황 : ${elem._num}`);
      });
      return resultArr;
    })
    .then((data) => res.send(data));
});

app.listen(PORT, () =>
  console.log(`Example app listening at http://localhost:${PORT}`)
);