웹 크롤링 axios 및 cheerio 활용해서 간단하게 적용해보기

 

 

이전 포스팅에서는 엑셀과  CSV 파일에 저장되어 있는 데이터를 불러오는 것을 알아보았습니다

다른 타 부서나 프로젝트진행에 필요한 파일들이 저장된 데이터를 가져오기 위해

엑셀 및 CSV 파일 파싱을 해서 가져와서 데이터를 핸들링하는 방법을 알아보았습니다

 

더 상세히 알고 싶으시면 아래의 링크를 클릭해서 확인해보시길 바랍니다

 

2022.08.17 - [IT_Web/Nodejs] - node.js로 엑셀 및 CSV 파일 데이터 간단하게 가져오기

node.js로 엑셀 및 CSV 파일 데이터 간단하게 가져오기

 

 

웹 크롤링을 간단하게 해 보자

 

 

그럼 바로 라이브러리부터 설치해보겠습니다

 

 

npm i axios cheerio

 

 

아래의 코드도 추가합니다

파일 구조나 시작점은 위의 링크로 들어가셔서 처음에 어떻게 시작했는지 확인해 보시길 바랍니다

이전 포스팅과 연결되는 부분이 조금 있어서 꼭 한번 들어가서 확인하시고

다시 돌아오세요~

 

 

const xlsx = require('xlsx');

const workbook = xlsx.readFile('xlsx/data.xlsx');
//console.log('readFile: ', Object.keys(workbook.Sheets))

const ws = workbook.Sheets.Sheet1; // 시트 명을 
//console.log('resultSheet: ', ws)

const wsRecods = xlsx.utils.sheet_to_json(ws); // 시트에 담긴 데이터를 json파일로 변경해준다
//console.log('resultWsRecods: ', wsRecods)


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

const crawler = async () => {
  for (const [i, r] of wsRecods.entries()) {
    console.log('링크', r.링크)
    const response = await axios.get(r.링크);
    if(response.status === 200){
      const htmlStr = response.data;
      console.log('htmlStr: ', htmlStr)
      const $ = cheerio.load(htmlStr) // cherrio는 태그를 접근할 수 있습니다
      const text = $('.score.score_left .star_score').text(); // 선택자로 직접적인 class명에 접근이 가능합니다
      console.log(r.제목, '평점: ', text.trim());
    }
  }
}

 

링크가 들어있는 모습

첫 번째 콘솔에 링크를 보시면

현재 엑셀 파일에 받아온 데이터가 링크 주소인 것을 확인할 수 있습니다

그 주소를 불러와서 axios.get()의 함수를 사용해서

링크를 매개변수로 할당하여 데이터 값을 받아옵니다

그렇게 되면 response에 html이 문자열로 들어오게 됩니다

 

그 html문자열을 콘솔 창에서 확인을 하면,

아래와 같이 html문자열을 확인할 수 있습니다

이 문자열을 활용하여 정보를 가지고 옵니다

 

html 문자열을 확인할 수 있다

 

 

반응형

 

 

 

아래의 두줄의 코드를 보시면 cheerio를 활용하여 태그에 접근 가능하며,

이때 jQery를 사용해서 선택자의 클래스명에 접근이 가능합니다

이때 선택자는 어떻게 지정하느냐가 중요합니다

 

두 번째 줄에 보시면. score.score_left. star_score 클래스 명을 사용해서

 jQery함수인. text()를 사용해서 값을 받아오고 있습니다

 

 

 

F12로 개발자 모드 창을 띄워서 

아래의 빨간색 테두리에 있는 것을 클릭해서 웹페이지의 태그를 알아볼 수 있습니다

 

 

개발자 모드 창

 

 

 

그리고 아래의 이미지처럼

보고 싶은 웹사이트의 부분을 클릭하면 됩니다

 

개발자모드

 

 

 

아래의 이미지를 개발자 모드 창에서 확인할 수 있습니다

 

 

개발자 모드의  html

 

그럼 text()를 사용하여 그 선택자로 접근한 태그의 textContent를 가져오게 됩니다

그렇게 되면 아래와 같이 결과가 출력됩니다

 

 

 

평점출력결과

 

 

지금은 for of문과 await 사용하여 순차적으로 요청하는 모습을 볼 수 있습니다

하지만 이것은 한 개씩 요청하고 받기 때문에 시간이 다소 걸릴 수 있습니다

 

시간이 걸리는 것을 해결하기 위해서는 Promise를 사용하면

모든 요청을 한 번에 다 보내게되고 한번에 받게 됩니다

하지만 그렇게 되면 순서를 보장할 수 없습니다

 

그래서 이 두 가지를 생각하고 순서를 보장해야 할 경우에는 for of문 await을 같이 사용하고

그럴 필요가 없다면 Promise를 사용하는 것이 좋을 것입니다

 

 

Promise의 방법은 아래와 같습니다

 

const crawler = async () => {
  await Promise.all(wsRecods.map(async (r) => {
    //console.log('링크', r.링크)
    const response = await axios.get(r.링크);
    if(response.status === 200){
      const htmlStr = response.data;
      //console.log('htmlStr: ', htmlStr)
      const $ = cheerio.load(htmlStr) // cherrio는 태그를 접근할 수 있습니다
      const text = $('.score.score_left .star_score').text(); // 선택자로 직접적인 class명에 접근이 가능합니다
      console.log(r.제목, '평점: ', text.trim());
    }
  }))
}

 

 

지금까지 간단한 axios와 cheerio 활용하면,

간단한 웹 크롤링을 할 수 있습니다

그래서 다른 중요한 웹 페이지들은 cheerio 활용하면 웹 크롤링을 할 수 없습니다

이제 오늘은 간단한 웹크롤링을 배워 보았습니다

 

cheerio 말고 더 강력한 라이브러리를 사용해서 웹 크롤링해보도록 하겠습니다

그럼 오늘도 열심히 하시고

 

다음 포스팅도 기대해주십시오!