[JavaScript] node.js를 이용한 간단한 WEB SCRAPER만들기

해당 소스 출처 : https://www.freecodecamp.org/news/web-scraping-in-javascript-with-puppeteer/

Web Scraping in JavaScript – How to Use Puppeteer to Scrape Web Pages

이 소스는 nodejs의 puppeteer을 사용하여 샘플페이지에서 제목과 작가를 긁어오는 예제이다.

페이지 구조

 

페이지 내용 중, "문장" 과 "작가"만 긁어와보도록 한다.

 

준비 :

1. package.json 세팅

npm init -y

2. puppeteer 설치.

npm install puppeteer

3. package.json 수정

{
  "name": "first-puppeteer-scraper-example",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^19.11.1"
  },
  "type": "module",
  "description": "",
  "types": "module"
}

4. js 작성

import puppeteer from "puppeteer";

const getQuotes = async () => {
  // Start a Puppeteer session with:
  // - a visible browser (`headless: false` - easier to debug because you'll see the browser in action)
  // - no default viewport (`defaultViewport: null` - website page will be in full width and height)
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  // Open a new page
  const page = await browser.newPage();

  // On this new page:
  // - open the "http://quotes.toscrape.com/" website
  // - wait until the dom content is loaded (HTML is ready)
  await page.goto("http://quotes.toscrape.com/", {
    waitUntil: "domcontentloaded",
  });

  // Get page data
  const quotes = await page.evaluate(() => {
    // Fetch the first element with class "quote"
    // Get the displayed text and returns it
    const quoteList = document.querySelectorAll(".quote");

    // Convert the quoteList to an iterable array
    // For each quote fetch the text and author
    return Array.from(quoteList).map((quote) => {
      // Fetch the sub-elements from the previously fetched quote element
      // Get the displayed text and return it (`.innerText`)
      const text = quote.querySelector(".text").innerText;
      const author = quote.querySelector(".author").innerText;

      return { text, author };
    });
  });

  // Display the quotes
  console.log("====================실행결과=============================");
  console.log(quotes);

  // Close the browser
  await browser.close();
};

// Start the scraping
getQuotes();

실행결과 : 

 

결론

스크랩한 데이터를 다른 곳에서 쓰려면, return 으로 console로 찍은 결과를 보내거나

sessionStorage 혹은 indexedDB에 결과를 저장하고 불러오는 방식도 가능할 것이다.

 

스크랩할 때 중요한 것은 해당 페이지의 구조에서 원하는 데이터가 어떠한 방식으로 표현되고 있는지 확인하여

querySelector로 긁는 것이다.