[JavaScript] JS를 사용한 스크래핑

• Full Code

  const getHtml = async (url) => {
      try {
          return await axios.get(url);
      } catch (error) {
          console.error(error);
      }
  };
  
  getHtml(url)
    .then(html => {
  
        db.collection('top10').drop();
        var urlobj = []
        var $ = cheerio.load(html.data);
        var $movieList = $('div.lst_wrap ul.lst_detail_t1').children('li');
  
  
        $movieList.each(function (i) {
        if (i > 9) { return urlobj}
        var detail_url = 'https://movie.naver.com/' + $(this).find('dt.tit a').attr('href');
        urlobj[i] = {
        detail_url : detail_url,
        poster_url : 'https://movie.naver.com/movie/bi/mi/photoViewPopup.naver?movieCode=' + detail_url.split('=')[1]
        }
        });
  
        return urlobj;
    
    }).then((result) => {
        var crawledMovie = [];
        for (let i = 0; i < result.length; i++){
        getHtml(result[i].detail_url)
        .then(html => {
        var $ = cheerio.load(html.data);
        var $poster = $('div.article div.wide_info_area div.mv_info');
  
        var info = []
        $poster.children('p.info_spec').find('span').each( function(j){
        if (j > 4) {return 0}
        info[j] =  $(this).text().trim().replace(/[\n|\t|\r]+/gi, "");
        })
  
        var data = {
        id : i,
        title : $poster.children('h3').find('a').first().text(),
        subTitle : $poster.children('h3').find('strong').text().split(',')[0].trim(),
        info : info,
        }
  
        db.collection('top10').insertOne(data, function (err, result){
        if (err) return console.log(err);
        });
  
        return 0;
    });
  
      getHtml(result[i].poster_url)
      .then(html => {
  
      var $ = cheerio.load(html.data);
      var $poster = $('div#page_content a').children('img');
  
      db.collection('top10').updateOne({'id' : i}, { $set: {posterUrl : $poster.attr('src')}}, function(err, result){
      if (err) return console.log(err);
      });
  
      return crawledMovie;
      })
      }
      return crawledMovie
    }).then(() => {console.log('done');})​

네이버 영화 홈페이지에 있는 10개의 영화에 관한 정보를 스크래핑하는 과정에서 어려움이 발생했다.

 

• 영화 제목 / 부제목
• 영화 정보 ( 관람가, 개봉일, 장르, 국가 등)
• 영화 포스터 URL

이 세 가지 데이터를 얻기 위해 스크래핑을 시도했는데

위 세 가지 항목이 모두 다른 url에서 스크래핑을 시도하였다.

 

axios, cheerio를 사용하여

async, awati으로 각 스크래핑 코드를 비동기적으로 처리해주었다,

 

이때 return 값이 Promise Object이 어서 값을 변수에 할당하여 사용하는 데 어려움이 있었다.

 

그래서 DB에 이정 보드를 저장하고

React로 제작 중인 Front 부분에서 DB에 있는 데이터를 가지고와 처리하기로 했다.

 

하지만 영화 정보를 1차적으로 DB에 올리고

이후 포스터 URL을 Update 하는 과정에서 코드가 잘 작동하지 않는 이슈가 발생했다.