쇼핑몰 프로젝트를 개발하던 중 쇼핑몰이 가지고 있을 더미 데이터가 필요하였다.
직접 디비에 상품 정보를 업로드 하는 방법도 있지만 좀 더 완성도 있는 프로젝트를 위하여 실제 쇼핑몰의 데이터를 크롤링 해보기로 했다.
참고 사이트에서 판매중인 상품 목록은 api가 제공되어 개발자 도구에서 페이지를 분석하면 json데이터로 상품 목록을 쉽게 얻어 올 수 있다.
다만 서버사이트 렌더링인경우 크롤링을 하기 위해선 html 코드를 분석하여 데이터를 가져와야한다.
axios는 http클라이언트 라이브러리로 서버에 요청 및 응답을 받을 수 있다.
비슷한 라이브러리로는 request가 있지만, promise기반이 아닌 치명적인 단점이 있어 axios를 선택하였다.
const axios = require('axios');
axios.get(url)
.then(data => {
console.log(data);
});
위와 같이 url
부분에 요청을 보낼 주소를 입력하면 get요청에 대한 html응답을 받아 올 수 있다.
내가 원하는 것은 받아온 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문을 통해 우리 디비에 넣는 작업을 하여, 더미 데이터를 얻어 낼 수 있었다.