Node.js - Crawling(크롤링)

크롤링의 사전적 의미가 무엇일까요?

기어가다?라는 의미를 가지고 있네요. 웹 크롤링은 웹에서 기어다닌다라는 의미를 가진 것일까요...? 웹 위에서 기어다니면서 검색한다... 정도로 생각하겠습니다.

 

각설하고 코드나 한번 보겠습니다. 저는 request, cheerio, iconv-lite를 이용하여 네이버 검색어에 샌드위치를 치고 인플루언서를 크롤링 해보았습니다. (하기 블로그를 보고 배웠습니다. 감사합니다.)

 

일단 패키지를 불러오겠습니다.

const request = require("request");
const cheerio = require("cheerio");
const iconv = require("iconv-lite");

다음 함수를 선언한 후  request 패키지를 이용하여 html을 불러옵니다. (url은 알아서 자신이 크롤링하고 싶은 페이지로~)

url이 잘못되면 에러가 나오게 에러 핸들링도 해줍니다.

const getInfluencer = () => {
  request(
    {
      url: "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%83%8C%EB%93%9C%EC%9C%84%EC%B9%98",
      method: "GET",
      encoding: null,
    },
    (error, response, body) => {
      if (error) {
        console.error(error);
        return;
      }
      if (response.statusCode === 200) {
        console.log("response ok");
      }
    }
  );
};

encoding 값을 null로 하는 이유는 iconv 패키지가 제대로 decode해줍니다.

 

다음으로 content-type을 확인해서 iconv로 decode를 시켜줍니다. content-type은 개발자도구에서 찾아보시면 됩니다.

content-type

 

찾으셨으면 불러온 html(body 값) 을 decoding해봅시다.

const bodyDecoded = iconv.decode(body, "utf-8");

그리고 console찍어보시면 뭔가 엄청나게 많은 것들이 나올겁니다.

 

다음으로 cheerio로 decode된 것들을 load해봅시다. (그냥 다 console.log 찍어보면서 하면 이해가 잘 됩니다.)

const $ = cheerio.load(bodyDecoded);

이제 데이터를 읽을 수 있게되면 제가 원하는 정보들을 찾아야겠죠?

웹페이지 및 개발자 도구

인플루언서 이름 찾기

꼬마츄츄라는 인플루언서를 찾기 위해서.... 많은 여정을 떠나야합니다. 프론트엔드분들 존경합니다.

코드를 먼저 보여드리고 설명할게요.

const list_text_inner_arr = $(
        "div.challenge_wrap > ul > li > div.keyword_box_wrap > div.user_box > div.user_box_inner > div.user_info_bx > div.user_area"
      ).toArray();

challenge_wrap class인 div 태그 안에 ul 안에 li 안에 keyword_box_wrap class인 div 안에 user_box class인 div 안에 user_box_inner class인 div 안에 user_info class인 div 안에 user_area class인 div 안에 있는 a태크 속에있는 span태그의 text를 가져오면 됩니다! 

이건 노력의 영역이라고 생각합니다. 화살표를 하나하나 까보면서 가는 재미랄까요. ㅎㅎ

아무튼 이것도 console.log로 확인해보면 뭔가 나옵니다.

 

const result = [];
      list_text_inner_arr.forEach((div) => {
        const aTagFirst = $(div).find("a")// 첫번째 <a> 태그
        // console.log(spanFirst);
        const influencer = spanFirst.text().trim(); 
// console.log(influencer);
        result.push({
          influencer
        });
      });
      console.log(result);

첫번째 a태그를 찾고 그것의 text를 불러오게 만들면

인플루언서 검색 확인

이렇게 잘 찾아온답니다!

 

좀 정신없는 작업이지만 막상 해보면.... 아주 보람차더라고요. 이제 저는 이것을 이용해서 프로젝트를 진행할 예정입니다. 여러분도 크롤링으로 정보들을 수집해봐요~

 

완성코드

const request = require("request");
const cheerio = require("cheerio");
const iconv = require("iconv-lite");

const getInfluencer = () => {
  request(
    {
      url: "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EC%83%8C%EB%93%9C%EC%9C%84%EC%B9%98",
      method: "GET",
      encoding: null,
    },
    (error, response, body) => {
      if (error) {
        console.error(error);
        return;
      }
      if (response.statusCode === 200) {
        console.log("response ok");
        const bodyDecoded = iconv.decode(body, "utf-8");
        const $ = cheerio.load(bodyDecoded);

        const list_text_inner_arr = $(
          "div.challenge_wrap > ul > li > div.keyword_box_wrap > div.user_box > div.user_box_inner > div.user_info_bx > div.user_area"
        ).toArray();

        const result = [];
        list_text_inner_arr.forEach((div) => {
          const spanFirst = $(div).find("a");

          const influencer = spanFirst.text().trim();

          result.push({
            influencer,
          });
        });
        console.log(result);
      }
    }
  );
};

getInfluencer();

---

https://codingbroker.tistory.com/124