[JavaScript] JavaScript를 이용한 Web crawling - 2

JavaScript를 이용하여서 Daum news Crawling하기

* 개발환경셋팅

• vscode
• node

 

* node package셋팅해주기

• npm install --save axiox
  • CDN을 이용하여도 된다.
• npm install cheerio

 

* package에 대한 간략한 설명

• axiox : http request를 조금 더 쉽게 보낼 수 있게 도와주는 패키지
• cheerio : 가져온 html을 조금 더 쉽게 가공할 수 있게 해주는 패키지

---

// 모듈 가져오기
const axios = require('axios');
const cheerio = require('cheerio');

axios, cheerio모듈을 가져와준다.

 

function newsCrawler() {
    const URL = `https://news.daum.net/`;
    
    axios.get(URL).then(res => {
      console.log(res.status);
    }
}

newsCrawler();

newsCrawler라는 함수를 만들어주고 해당 함수안에 상수URL을 선언해준다.

axios를 이용하여서 상수URL에 지정해놓은 url로 get요청 보낸다.
axios를 통해서 get요청을 보내면 Promise객체가 반환이 된다.

 

* res.status를 console창에 출력해보면 정상적으로 get요청이 되었으면 200응답을 출력이 될것이다.

 

const axios = require('axios');
const cheerio = require('cheerio');

function newsCrawler() {
  const URL = `https://news.daum.net/`;

  axios.get(URL).then(res => {
    console.log(res.status)
    if(res.status == 200) {

      //empty array
      let crawledNews= [];

      //res.data에 있는 tag를 cheerio로 검색하여 변수에 담기
      const $ = cheerio.load(res.data);
      const $newsList = $('body > div.container-doc > main > section > div > div.content-article > div.box_g.box_news_issue > ul > li');

      $newsList.each(function(i) {
        console.log(i)
      })
    }
  })
}

newsCrawler()

* crawledMusic이라는 비어있는array를 만들어준다. 해당 array에 crawling해온 data를 빈array에 push할 것이다.

  > [ {title : "제목", summary : "....", img : "....."}, {}, {}, {} ] 형태로 데이터를 가져올 것

* res.data에 있는 tag를 cheerio로 검색하여 변수 $ 에 담아줄것이다.

* JQuery형태로 데이터를 가공하기 위한 변수 ( $ )

const axios = require('axios');
const cheerio = require('cheerio');

function newsCrawler() {
    const url = `https://news.daum.net/`;

    axios.get(url)
        .then(res => {
          console.log(res.status);
          if(res.status == 200) {            
            let crawledNews= [];

            const $ = cheerio.load(res.data);
            const $newsList = $('body > div.container-doc > main > section > div > div.content-article > div.box_g.box_news_issue > ul > li');

            $newsList.each(function(i) {
              crawledNews[i] = {
                  title : $(this).find('li > div > div.cont_thumb > strong > a').text().trim(),
                  summary : $(this).find('li > div > div > span > span.txt_category').text(),
                  img : $(this).find('li > div > a > img').attr('src')
                };
              });
              console.log(crawledNews);
            } else {
                console.log("서버 응답 오류")
            }
        });
}

newsCrawler();

* 크롬개발자에 들어가서 Daum news페이지에 들어가서 JS path를 참고하여 경로를 가져온다.

* title : 해당 경로의 text만 가지고 오기위해 text함수와 공백제거를 위하여 trim함수를 이용하였다.

* summary : 해당 경로의 text만 추출

* img : 해당경로의 src를 추출하기위해 attr함수를 이용하였다.

 

비어있는 array crawledMusic안에 객체형태의 데이터(daum news)가 담겨있을것이다.