스크래핑 스크립트 작성

나는 과거에 웹사이트에서 업데이트되기를 기다렸다가 페이지를 아주 자주 새로고침하는 몇 가지 상황이 있었습니다. 하지만 업데이트가 언제 일어날지 모를 때 이것은 지루하고 헤이, 우리는 프로그래머입니다. 우리는 우리를 위해 이것을 할 수 있는 무언가를 만들 수 있습니다!

"Puppeteer은 Chrome을 제어하기 위한 고급 API를 제공하는 Node 라이브러리입니다."간단한 웹 스크레이퍼를 매우 간단하게 구축할 수 있기 때문에 제가 주로 사용하는 라이브러리입니다. 이 예를 위해 The New York Times'Today’s Paper의 주요 뉴스를 가져오는 최소 실행 가능 제품을 파고들어 구축해 보겠습니다.

프로젝트 시작

프로젝트의 종속성을 보유할 package.json를 생성하여 시작합니다. 이를 위해 npm init를 사용할 수 있지만 단순화를 위해 제거된 버전을 만들겠습니다.

// package.json
{
  "name": "web-scraper-with-puppeteer",
  "version": "1.0.0",
  "private": true
}

이제 유일한 종속성인 Puppeter를 추가합니다. 터미널에서 다음을 실행합니다.

npm install puppeteer

귀하의 package.json가 이제 약간 변경되었습니다. 차이점은 다음과 같습니다.

 {
   "name": "web-scraper-with-puppeteer",
   "version": "1.0.0",
- "private": true
+ "private": true,
+ "dependencies": {
+   "puppeteer": "^9.1.1"
+ }
 }

이제 메인 스크립트부터 시작하겠습니다. 새 제품index.js을 열고 다음을 작성합니다.

// index.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();

  await page.goto(
    'https://nytimes.com/section/todayspaper'
  );
  await browser.close();
})();

지금은 모든 것이 지금까지 잘 진행되고 있는지 확인하기 위해 node index.js로 바로 실행할 수 있는 간단한 스크립트입니다. headless: false 를 지정했기 때문에 Chrome 창이 열리고 페이지 로드가 중지되는 즉시 닫힙니다. 여태까지는 그런대로 잘됐다! 이제 페이지의 첫 번째 기사를 DOM에서 가져와 보겠습니다.

스크립트에 다음 줄을 추가하여 첫 번째 기사를 가져오고 HTML을 출력하면 올바른 것을 검색하는지 확인할 수 있습니다.

   await page.goto(
     'https://nytimes.com/section/todayspaper'
   );
+
+ const firstArticle = await page.$eval(
+   'article:first-of-type',
+   e => e.outerHTML
+ );
+
+ console.log(firstArticle);
+
   await browser.close();
 })();

node index.js로 스크립트를 실행하면 콘솔의 <article> 태그 안에 많은 HTML이 표시되어야 합니다. 거의 다 왔어!

이제 우리는 전체 기사를 원하지 않고 헤드라인과 요약만 원합니다. 우리가 얻은 HTML을 자세히 살펴보면 유망해 보이는 h2와 첫 번째 p를 볼 수 있습니다. 코드를 약간 리팩토링하여 firstArticle를 사용할 수 있는 변수로 만들고, 헤더와 요약 모두에 사용할 함수를 만들고, 콘솔에 표시할 두 가지를 모두 뽑습니다.

     'https://nytimes.com/section/todayspaper'
   );

- const firstArticle = await page.$eval(
- 'article:first-of-type',
- e => e.outerHTML
- );
+ const firstArticle = await page.$('article:first-of-type');
+
+ const getText = (parent, selector) => {
+   return parent.$eval(selector, el => el.innerText);
+ };
+
+ const header = await getText(firstArticle, 'h2');
+ const summary = await getText(firstArticle, 'p:first-of-type');

- console.log(firstArticle);
+ console.log(`${header}\n${summary}`);

   await browser.close();
 })();

계속해서 터미널에서 실행하면 두 줄이 표시됩니다. 맨 위는 헤더로, 맨 아래는 기사 요약으로 표시됩니다!

솔직히 말해서, 그게 다야! 🎉 웹 스크레이퍼는 화려하거나 복잡할 필요가 없으며 실제로 페이지에서 가져오려는 내용에 따라 다릅니다. 나는 며칠 전에 하나를 실행했는데(다음 기사에서 이에 대해 쓸 것입니다) 기본적으로 특정 텍스트 문자열이 이미 변경되었는지 여부를 확인하는 다른 페이지에서 작업을 수행하고 있었습니다.

하지만 Puppeteer로 할 수 있는 일이 훨씬 더 많습니다. 하늘이 한계입니다. 사용 가능한 방법을 보려면their documentation, 사용할 수 있는 야생 것들official examples을 확인하고automate performance work 까지 사용할 수 있습니다!

이 기사의 두 번째 부분에서 곧 뵙겠습니다…