이번에는 스크래핑과 브라우저 주소 창에 대하여 알아봤다. 헤헤 이번 강의는 짧아서 좋았음.. 근데 과제가 미니 프로젝트였다.. 짧은 데는 다 이유가 있는 법
Scraping
여기서 말하는 스크래핑과 크롤링은 웹 스크래핑, 웹 크롤링을 의미!
Scraping(스크래핑): 웹 사이트의 페이지를 가져와 그 안에 있는 데이터를 추출하는 행위 (한 번만 진행)
Cheerio 를 사용
Crawling(크롤링): 웹상의 정보들을 탐색하고 수집하는 작업. 꾸준히 데이터를 가져온다고 생각하면 된다. (꾸준히 계속 진행)
Puppeteer 을 사용
그럼 어떻게 가져올까?
웹 사이트의 HTML 파일을 받아올 수 있다면 우리가 원하는 데이터를 가져올 수 있다!
그렇다면, HTML 파일을 어떻게 가져올 수 있을까? -> 브라우저 주소창에 대해 한 번 알아보자!
브라우저 주소창 살펴보기
브라우저에서 네이버에 접속했을 때 가장 맨 처음 받아온 / 파일의 내용 중 하나
잘 보면, GET 방식의 요청인 것을 찾아볼 수 있다. => 주소창에 URL을 치는 것이 API 요청이고 그 중 GET 방식의 요청이라는 것을 추측할 수 있음!
브라우저 주소창 == API 중 GET 방식의 요청을 하는 도구?
이것을 알아보기 위해, 브라우저와 API 플랫폼인 POSTMAN을 이용해 둘을 비교해보았다.
브라우저
브라우저에서도 포스트맨에서 GET 요청을 할때 처럼 json이 불러와진다
POSTMAN
포스트맨에서도 네이버의 HTML이 불러와지는 것을 발견할 수 있다.
근데 왜 포스트맨과 다르게 브라우저 창에서는 예쁘게 꾸며져서 나올까?
브라우저 주소 창 = API GET 요청을 진행
JSON이 응답으로 전달되는 경우 그냥 그대로 출력한다.
HTML이 응답으로 전달되는 경우, 브라우저라는 프로그램이 HTML을 해석하여 🌼예쁘게 꾸며주는 것🌷이다. (CSS, JS 등..)
프론트엔드, 백엔드, Axios
프론트엔드
HTML을 주는 API (사용자가 볼 수 있는 화면)
브라우저 주소창에 입력 (프론트엔드 API 요청) -> HTML 파일 받아서 처리
백엔드
JSON을 주는 API (사용자가 보지 못하는 부분)
버튼 클릭, 등록, 조회 기능 등 사용자가 원하는 내용 제공 (백엔드 API 요청) -> JSON 데이터 받아와서 처리
Axios
HTML 코드를 변수에 담아 HTML 코드 안에서 우리가 원했던 내용들을 꺼낼 수 있다! => axios로 HTML 데이터 받아오기 가능! 이렇게 받은 HTML 데이터에서 원하는 부분만 골라서 추출하면 이것이 바로 스크래핑!🤗
스크래핑 실습
HTML 데이터를 받아오기 위해 사용한 axios
조금 더 편하게 HTML 데이터를 파싱하기 위해 사용한 cheerio
import axios from 'axios';
import cheerio from 'cheerio';
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); // 요 작대기는 vscode 에서 판단하는 것, 실행에는 크게 문제 없음!
$("meta").each((index, el) => { // each는 cheerio에서 제공해주는 함수, map(el, index) 과 다르게 순서가 바뀌어서 들어온다.
if($(el).attr("property") && $(el).attr("property").includes("og:")){
// property 라는 속성이 있고, 그 property의 값이 og:라는 내용을 포함하고 있는지 확인
const key = $(el).attr("property"); // og:title, og:description, ...
const value = $(el).attr("content"); // 네이버, 네이버 메인에서 ~
console.log(key, value);
}
});
}
createMessage();
위와 같은 코드를 통해 HTML 데이터에서 원하는 정보를 추출할 수 있다.
생각해보기
스크래핑은 어디서 하는 것이 좋을까? (프론트 vs 백)
브라우저의 경우, cors 문제가 존재. 상황에 따라 HTML 데이터를 받아오지 못할 수 있다.일반적으로 백엔드에서 진행하거나, 프론트 개발자들의 proxy 서버를 만들어서 임시 proxy 백엔드를 만든 후 해당 proxy 백엔드에서 스크래핑을 진행한다.
스크래핑과 브라우저 주소 창에 대한 내용은 여기서 끝! 사실 브라우저 주소 창에 대해 많이 생각해 본 적이 없었는데, 이번 강의를 통해 알 수 있어서 좋았다!
