Scraping(스크래핑) 과 Crawling(크롤링)

Scraping(스크래핑)

스크래핑이란?
쉽게 말해서 특정한 어떤 웹사이트에서 html을 가져오는 것이라고 할 수있다.
예를 들자면 카톡이나 디스코드 같은곳에서 네이버링크를 올리면 아래의 사진과 같이 미리보기 정보가 나온다.

그래서 위 이미지와 같이 스크래핑을 하는 방법을 알아보자!!

일단 네이버 홈페이지에 들어간 뒤 개발자 도구를 열면

위와 같이 head태그 안에 meta태그들이 있고 property가 og인 태그들이 보인다.

그러면 npm install 또는 yarn add 명령어를 통해 axios와 cheerio(스크래핑 도와주는 도구)를 설치한 뒤

async function createMessage() {

  const url = "https://www.naver.com"; (내가 스크래핑 하길 원하는 사이트)

  // axios.get으로 요청해서 html 코드 받아오기 => 스크래핑
  const result = await axios.get(url);

  // 3. 스크래핑 결과에서 OG(오픈그래프) 코드 골라내서 변수에 저장하기
  const $ = cherrio.load(result.data);
  $("meta").each((i, el) => {
    if ($(el).attr("property")?.includes("og:")) {
      const key = $(el).attr("property"); // og:title, og:description 이런애들이 나올텐데 key에 넣어줘
      const value = $(el).attr("content");
      console.log(key, value);ㅁ\
    }
  });
}

createMessage()

위 와 같이 코드를 작성하게 되면

위의 이미지와 같이 og태그를 스크래핑할 수 있게 된다.

크롤링(Crawling)

크롤링이란? 쉽게 말해서 스크래핑을 여러번하는 것을 말한다.
다시 말해서 웹사이트의 정보들을 자동화된 방법으로 수집하는 것이라고 할 수 있다.

크롤링을 할 때는 주의할점이 있는데 정보를 무단으로 복제하는 것이기 떄문에 지식재산권을 침해할 수 있다. 그러므로 크롤링을 하기전에 웹사이트 주소 뒤에 /robots.txt를 붙이게 되면 크롤링 허용범위를 알려주게 된다.

위의 이미지는 쿠팡사이트의 허용범위이다.

크롤링하는 방법을 알아보자!!

여기어때의 호텔 한개의 정보를 크롤링하는것으로 예를 들어보겠다.
일단 npm/yarn을 이용하여 axios와 puppeteer를 설치해준 뒤

import puppeteer from "puppeteer";

async function startCrawling() {
  const browser = await puppeteer.launch({ headless: false }); // 실행
  const page = await browser.newPage(); // 새로운 페이지
  await page.setViewport({ width: 1280, height: 720 }); // 브라우저 크기 조절
  await page.goto("https://www.goodchoice.kr/product/search/2/2021"); // 주소 이동(주소 쓰고 엔터쳤다)
  await page.waitForTimeout(1000); // 기다림

  const stage = await page.$eval(
    // 페이지에서 얘를 뽑아냄, $$eval은 두개이상 , 뽑아낸 값은 ,하고 함수로
    "#poduct_list_area > li:nth-child(2) > a > div > div.name > div > span",
    (el) => el.textContent // 뽑아낸 데이터가 여기로 오고 textContent만 뽑아옴
  );

  const location = await page.$eval(
    "#poduct_list_area > li:nth-child(2) > a > div > div.name > p:nth-child(4)",
    (el) => el.textContent
  );

  const price = await page.$eval(
    "#poduct_list_area > li:nth-child(2) > a > div > div.price > p > b",
    (el) => el.textContent
  );

  console.log(stage);
  console.log(location.trim());
  console.log(price);

  await browser.close();
}

startCrawling();

위와 같이 코드를 작성한 뒤 실행해보면

위와 같이 호텔 정보를 받아오는 것을 확인할 수 있다.

참고한 사이트
https://m.blog.naver.com/with_msip/221844584021
https://yaegreena.tistory.com/52