axois, cheerio로 웹 크롤링 해보기

쇼핑몰 프로젝트를 개발하던 중 쇼핑몰이 가지고 있을 더미 데이터가 필요하였다.
직접 디비에 상품 정보를 업로드 하는 방법도 있지만 좀 더 완성도 있는 프로젝트를 위하여 실제 쇼핑몰의 데이터를 크롤링 해보기로 했다.

상품 목록 크롤링

참고 사이트에서 판매중인 상품 목록은 api가 제공되어 개발자 도구에서 페이지를 분석하면 json데이터로 상품 목록을 쉽게 얻어 올 수 있다.

상품 상세페이지 크롤링

다만 서버사이트 렌더링인경우 크롤링을 하기 위해선 html 코드를 분석하여 데이터를 가져와야한다.

axios

axios는 http클라이언트 라이브러리로 서버에 요청 및 응답을 받을 수 있다.

비슷한 라이브러리로는 request가 있지만, promise기반이 아닌 치명적인 단점이 있어 axios를 선택하였다.

const axios = require('axios');
axios.get(url)
    .then(data => {
        console.log(data);
    });

위와 같이 url부분에 요청을 보낼 주소를 입력하면 get요청에 대한 html응답을 받아 올 수 있다.

cheerio

내가 원하는 것은 받아온 html에서 원하는 데이터만 얻어오는 것이다.
이를 쉽게 해결해주는 것이 cheerio이다.

cheerio는 jQuery문법을 사용하여 원하는 데이터의 값을 찾아내 올 수 있게 해준다.

  async getDetail(url) {
    return await axios
      .get(`https://pilly.kr/product/${url}`)
      .then(async (data) => {
        const $ = cheerio.load(data.data);
        let contentImg = [];
        let description = "";
        $(".container").each((index, elem) => {
          contentImg = $(elem).find(".info > article > div > img").attr("src");

          description = $(elem).find("aside .description").text();
        });

        console.log(contentImg);
        return {
          contentImg,
          description,
        };
      });
  }

나는 상품 상세의 이미지와, 상세 설명을 가져오기 위해, 위와 같이 접근하여 원하는 값을 꺼내올 수 있었다.

url 부분은 상품 카테고리에 해당하는 고유 코드가 들어가 있어, 카테고리개수만큼 위 함수를 호출하고 얻어온 데이터들을 다시 한 번 for문을 통해 우리 디비에 넣는 작업을 하여, 더미 데이터를 얻어 낼 수 있었다.