[JavaScript] JavaScript를 이용한 Web crawling

JavaScript를 이용하여서 멜론 TOP100 리스트 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 melonCrawler() {
    const URL = `https://www.melon.com/chart/index.htm`;
    
    axios.get(URL).then(res => {
      console.log(res.status);
    }
}

melonCrawler();

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

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

 

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

 

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

function melonCrawler() {
  const URL = `https://www.melon.com/chart/`;

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

      //empty array
      let crawledMusic= [];

      //res.data에 있는 tag를 cheerio로 검색하여 변수에 담기
      const $ = cheerio.load(res.data);
      const $musicList = $('#lst50');

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

melonCrawler()

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

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

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

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

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

function melonCrawler() {
  const URL = `https://www.melon.com/chart/`;

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

      // empty array
      let crawledMusic= [];

      // res.data에 있는 tag를 cheerio로 검색하여 변수에 담기
      const $ = cheerio.load(res.data);
      const $musicList = $('#lst50');

      $musicList.each(function(i) {
        crawledMusic[i] ={
          title : $(this).find('#lst50 > td > div > div > div.ellipsis.rank01 > span > a').text().trim(),
          artist : $(this).find('#lst50 > td > div > div > div.ellipsis.rank02 > a').text(),
          img : $(this).find('#lst50 > td > div > a > img').attr('src')
        };
      });
      console.log(crawledMusic)
    } else {
      console.log("server response error")
    }
  })
}

melonCrawler()

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

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

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

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

 

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