카카오톡을 이용하다 보면 위와 같은 일을 한번쯤은 마주쳐 본 경험이 있을 것이다. 이번 글을 통해서 이는 무엇이고 어떤 원리로 작동이 되는지 알아보자!
스크래핑
스크래핑이란 쉽게 말해 어떤 특정한 웹 사이트에 가서 그 사이트의 HTML을 긁어오는 것을 의미한다.
긁어온 정보를 바탕으로 필요한 정보를 DB에 저장해서 이용할 수 있는데, 위 사진의 카톡방에서 해당 사이트의 소개와 이미지를 볼 수 있었던 것도 바로 스크래핑의 결과물이라 생각하면 된다.
💡 그렇다면 스크래핑을 어떻게 이용하는지 알아보자
스크래핑은 보통 프론트엔드나 백엔드에서 직접 사이트에 가서 정보를 가져오면 되는데, 요즘엔 백엔드에서 대부분 처리한다고 들었다.
유저가 게시글을 작성해서 등록할 때, 백엔드 API로 글의 내용을 보내주게 되고 이때, 글의 내용에 http가 포함된 URL이 있다면, 그 사이트에 접속해서 open graph가 있는 내용을 긁어와서 저장한다.
네이버에 들어가서 개발자 도구를 열어보면,
<head> 태그 안에 meta 태그들이 있고, 그 중에서 property가 og로 시작하는 태그들을 찾을 수가 있는데 이들이 바로 open graph이다.
이번엔 axios를 통해 daum에 접속해서 cheerio를 이용해서 스크래핑까지 하는 실습을 해보자!
우선 axios를 이용해서 해당 주소로 접속을 할건데!
인터넷 주소창의 의미가 axios의 get요청과도 같다는 것을 미리 숙지하고 진행하면 될 것 같다.
해당 주소에서 html을 요청하는 것 이 바로 브라우저 주소창의 역할이다!!
import axios from 'axios'
import cheerio from 'cheerio'
const createMessage = async () => {
// 입력된 메시지: "안녕하세요~ https://www.naver.com 에 방문해 주세요!"
// 1. 입력된 메시지에서 http로 시작하는 문장이 있는지 먼저 찾기!(.find() 등의 알고리즘 사용하기)
const url = "https://www.daum.net"
// 2. axios.get으로 요청해서 html코드 받아오기 => 스크래핑
const result = await axios.get(url)
console.log(result.data)
// 3. 스크래핑 결과(result)에서 OG(오픈그래프) 코드 골라내서 변수에 저장하기
}
createMessage()
위 함수를 실행시켜보면 아래와 같이 터미널에서 html 정보를 볼 수가 있는데, open graph가 있는 부분을 찾아야 한다.
이때 도와줄 도구로 cheerio 를 사용해보자
우선 axios 요청을 통해 받아온 html 데이터를 cheerio에 넘겨주는 과정을 실행한다
const $ = cheerio.loag(html.data)cheerio에선 $라는 변수를 사용하는 게 국룰인 것 같으니 우리도 사용하는 걸로 하자.
import axios from 'axios'
import cheerio from 'cheerio'
const createMessage = async () => {
// 입력된 메시지: "안녕하세요~ https://www.naver.com 에 방문해 주세요!"
// 1. 입력된 메시지에서 http로 시작하는 문장이 있는지 먼저 찾기!(.find() 등의 알고리즘 사용하기)
const url = "https://www.daum.net"
// 2. axios.get으로 요청해서 html코드 받아오기 => 스크래핑
const result = await axios.get(url)
console.log(result.data)
// 3. 스크래핑 결과(result)에서 OG(오픈그래프) 코드 골라내서 변수에 저장하기
const $ = cheerio.load(result.data)
$("meta").each((i, 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)
}
})
}
createMessage()cheerio에선 기존의 js문법이랑은 다르기 때문에, 따로 공부를 해야한다. 여기선 $ 중 meta 태그를 가지고 있는 태그들을 대상으로 each 반복문을 사용한 것이다. 그중 property가 og를 포함하는 부분을 찾아라는 조건문을 걸어서 지금 우리가 필요한 정보만을 추출해낼 수 있다. 이렇게 추출해서 해당 데이터를 DB에 저장한 뒤 필요할 때 사용하면 된다!
크롤링
크롤링도 마찬가지고 스크래핑을 정기적으로 주기적으로 여러번하는 것을 의미!
⚠️ 다른 사이트를 크롤링하는 것은 주의해야한다!
