🐧 **Scrapping 이란?**

다른 브라우저의 주소창 정보를 가져오는 것이다.

여기서 스크래핑이라는 뜻은 긁다라는 뜻인데 한번 가져온다는 것을 뜻한다.

예를 들어 디스코드 창에 네이버 주소창을 입력하게 되면 아래 그림처럼 html를 가져오게 된다.

html에서 어떤 태그를 불러오느냐?? 오픈그래프 ⇒ og: 라는 태그들을 불러오는데요.

네이버 브라우저 html를 보면 <meta= “og>태그들에서 미리보기를 제공하고 있다.

🐤 opengragh 란?

인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다.

오픈 그래프의 목적은 웹페이지에 대한 정보를 담고 있는 메타데이터의 사용방식을 표준화하여 페이스북 내에서의 링크 공유 시 해당 웹페이지에 대한 정보를 특정 형식의 미리보기 형태로 제공해주는 기능을 모든 웹페이지에서 가능하게끔 하는 것이다.

이렇게 사용하므로써 웹페이지 미리보기가 제공되기 떄문에 대략적으로 어떤 내용인 브라우저인지 확인이 가능하다.

이 스크래핑을 연동하려면 cheerio라는 프로그램이 있는데 cheerio에 대해 알아보도록 하자~!

🐤 Cheerio

• 데이터를 뽑을 때 알고리즘을 만들어 뽑아내어 저장하고 이 과정을 쉽게 해주는 프로그램이 cheerio이다.

먼저 yarn init 으로 package.json 만드셔서 axios 와 cheerio 을 설치해준다.

그리고 html 안에 를 뽑아서 정리해준다.

import axios from 'axios'
import cheerio from 'cheerio'
import create  from 'domain'

const createMessage = async () => {
    // 입력된 메시지: "안녕하세요~ https://www.naver.com 에 방문해주세요!"

    // 1.입력된 메시지에서 http로 시작하는 문장이 있는지 먼저 찾기!(.find()등의 알고리즘 사용하기)
    const url = "https://www.naver.com"

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

    // 3. 스크래핑 결과에서 OG(오픈그래프) 코드를 골라내서 변수에 담기 => cheerio 도움 받기
    const $ = cheerio.load(result.data)
    // each = 반복문 치어리오에서 지원해주는 기능 map(el,index)정반대이다 each(index,el) || attr => 속성
    $("meta").each((index, el) => {
        if($(el).attr("property") && $(el).attr("property").includes("og:")){
            const key = $(el).attr("property") // og:title, og:description, ...
            const value = $(el).attr("content") // 네이버, 네이버 메인에서 ~~~
            console.log(key, value);
		// $ <= cheerio 에서는 $라고 지칭해준다.
        }
    })
}

createMessage()

해당 html에서 원하는 데이터를 가져올수있다. (한번 긁기)

🐧 Crawing 이란?

크롤링은 헤엄치다라는 뜻으로 꾸준히 가져오다라는 뜻을 함구하고 있는데요.,

크롤링은 스크래핑으로 정기적으로 여러번 가져오는 것을 말한다.

🐤Puppeteer

cheerio가 스크래핑을 도와주듯이 크롤링도 도와주는 프로그램이 있는데요. 그것이

`Puppeteer` 라는 프로그램입니다. 이 프로그램은 원하는 데이터를 꾸준히 가져올수 있게 해줍니다.