Puppeteer는 Node.js에서 구글에서 개발한 Headless Chrome API입니다. Headless Chrome은 Chrome 브라우저의 렌더링 엔진인 Blink 엔진을 사용하여 브라우저를 실행하지만 실제 브라우저 창이나 UI 없이 백그라운드에서 실행되는 브라우저입니다. 이러한 Headless Chrome을 사용하여 자동화된 웹 브라우저 환경을 제공하고 웹 사이트에서 데이터를 추출하는 데 사용할 수 있는 Puppeteer를 사용해 보도록 하겠습니다.
Puppeteer
Puppeteer는 Node.js에서 사용할 수 있는 Chrome 브라우저의 Headless API입니다. Puppeteer를 사용하면 Chrome 브라우저를 사용하는 대부분의 작업을 자동화할 수 있습니다. Puppeteer는 Chrome의 다양한 기능을 활용하여 웹 페이지를 스크랩하고 스크린샷을 찍고 PDF를 생성하고 UI 테스트를 수행하는 데 사용됩니다.
설치
npm install puppeteer
yarn add puppeteer
express에서 Puppeteer 사용하기
const express = require('express');
const app = express();
const puppeteer = require('puppeteer');
app.get('/get-data', async (req, res) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com..');
const data = await page.evaluate(() => {
return {
title: document.title,
body: document.querySelector('body').innerText
}
});
await browser.close();
res.send(data);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});Express에서 '/get-data' 엔드 포인트로 요청이 오면 Puppeteer를 사용하여 'https://www.example.com' 페이지에서 데이터를 가져와 반환합니다. Puppeteer를 사용하여 브라우저를 열고 페이지를 로드한 다음, 페이지에서 데이터를 추출하고 브라우저를 닫습니다.
Cheerio 활용하기
Cheerio는 Node.js에서 제공하는 간단하고 빠른 HTML 파싱 및 조작 도구입니다. JQuery와 유사한 API를 가지고 있으며, HTML 요소를 선택하고 조작할 수 있습니다. Cheerio는 HTML을 분석하고 파싱하는 데 사용되므로, 크롤링할 때 Node.js에서 puppeteer과 같이 많이 사용됩니다.
설치
npm install cheerio
yarn add cheerio
네이버 뉴스 크롤링해보기
네이버에서 연합뉴스의 해드라인을 크롤리하기우해서는
크롬에 개발자 도구를 활용해서 특정 element의 전체 selector를 복사한후 $함수를 활용해서 특정 text를 뽑을 수 있습니다.
const express = require('express');
const app = express();
const puppeteer = require('puppeteer');
const cheerio = require("cheerio");
app.get('/get-data', async (req, res) => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 페이지가 로딩 될때까지 기다리기
await Promise.all([
page.goto("https://news.naver.com", {
waitUntil: "networkidle2",
timeout: 0,
}),
page.waitForNavigation(),
])
const content = await page.content();
const $ = cheerio.load(content);
// 연합뉴스 해드라인
const title = $("#NM_ONELINE_ROLLING").text();
await page.close();
await browser.close();
res.send(title);
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});이 코드에서는 네이버 뉴스의 상단 헤드라인 뉴스의 제목을 추출할 수 있습니다.
댓글