인형사 전체 가이드 pt.1

Puppeteer: 웹 자동화를 위한 강력한 도구

오늘날 빠르게 변화하는 웹 개발 환경에서는 자동화가 핵심입니다. 바로 여기서 Puppeteer가 등장합니다. Google에서 개발한 Puppeteer는 개발자가 JavaScript를 사용하여 Chrome 브라우저를 제어할 수 있게 해주는 강력한 Node.js 라이브러리입니다. 효율성을 위해 헤드리스 모드에서 웹을 탐색하든, 시각적 피드백을 위해 풀 브라우저에서 웹을 탐색하든, Puppeteer를 사용하면 웹 스크래핑, 테스트 등과 같은 작업을 그 어느 때보다 쉽게 ​​자동화할 수 있습니다. Puppeteer를 사용하면 한때 수동 작업이 필요했던 작업이 이제 스크립트만으로 가능해졌습니다.

웹 스크래핑을 사용하는 이유는 무엇입니까?

최근 프로젝트에서 저는 외환 거래 커뮤니티를 위한 랜딩 페이지가 필요한 고객과 함께 일했습니다. 그는 MarketWatch 또는 Yahoo Finance에서 볼 수 있는 주식 시세 표시기와 유사한 것을 원했지만 주식 대신 사이트 전체에 미화 1달러에 대한 실시간 환율이 표시되기를 원했습니다.

사용 제한 및 월별 요금이 포함된 데이터를 제공할 수 있는 API가 있지만 Puppeteer를 사용하여 맞춤형 솔루션을 만들 수 있는 기회를 보았습니다. 사전에 약간의 시간을 투자함으로써 데이터를 무료로 스크랩하고 표시할 수 있었고 궁극적으로 고객이 반복적으로 발생하는 비용을 절약할 수 있었습니다.

클라이언트 웹사이트: Majesticpips.com

인형극 설정이 간단해졌습니다.

웹의 모든 영광을 위해 스크래핑을 시작하기 전에 애플리케이션에 puppeteer를 설치해야 합니다.

문서에 설명된 대로

1단계

npm, Yarn 또는 pnpm을 선택하여 라이브러리를 설치합니다.

• npm 나는 인형극을 조종한다

• 실 인형극 추가

• pnpm 인형극 추가

이렇게 하면 설치 중에 호환되는 Chrome 버전이 다운로드되므로 초보자가 더 쉽게 작업을 시작하고 빠르게 실행할 수 있습니다.

더 노련한 개발자이고 작업하고 싶은 특정 크롬/크롬 버전이 있는 경우; 그런 다음 이 패키지를 설치합니다.

• npm i puppeteer-core

• 원사 인형극 코어 추가

• pnpm puppeteer-core 추가

당신에게 가장 좋을 것입니다. 패키지는 puppeteer만 설치하고 크롬 버전은 사용자가 결정하도록 남겨두기 때문에 가벼울 것입니다.

처음 테스터인 경우 'puppeteer'를 설치하는 것이 더 나은 옵션입니다. 설정을 단순화하고 Chromium의 작동 버전을 보장하므로 스크립트 작성에 집중할 수 있습니다.

2단계

이제 JS 파일에서 노드 버전 12 이상의 ES 모듈 시스템(ES6 표준)을 사용하는 애플리케이션용 인형극을 가져오려고 합니다.

'puppeteer'에서 인형을 가져옵니다; (권장)
또는
'puppeteer-core'에서 인형극 가져오기;

또는 이전 버전의 Node.js와도 호환되는 Node.js용 commonJs 모듈 시스템의 필수 구문을 사용할 수 있습니다.

const puppeteer = require('puppeteer');
또는
const puppeteer = require('puppeteer-core');

3단계

Puppeteer를 가져온 후 웹 스크래핑을 수행하는 명령 작성을 시작할 수 있습니다. 아래 코드는 사용해야 할 것을 보여줍니다.

라이브러리에서 제공하는 방법을 사용하여 브라우저를 시작합니다.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = 이 메서드는 새 브라우저 인스턴스를 시작합니다.

browser.newPage() = 이 메소드는 브라우저 인스턴스 내에 새 페이지(또는 탭)를 생성합니다.

browser.close() = 이 메서드는 브라우저 인스턴스를 닫습니다.

puppeteer.launch()에서 인수를 전달하여 기본 설정에 따라 브라우저 시작을 사용자 정의할 수 있습니다. 이에 대해서는 2부에서 더 자세히 다루겠습니다. 그러나 기본적으로 puppeteer.launch()에는 헤드리스 모드가 true로 설정되는 등의 사전 설정된 값이 있습니다.

4단계

브라우저가 실행되었으며 이제 웹 서핑을 위한 페이지가 준비되었습니다. 일부 데이터를 스크랩할 웹사이트로 이동해 보겠습니다.

이 예에서는 qoutes 웹사이트에서 데이터를 스크랩합니다.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

혼합에 wait page.screenshot({ path: 'screenshot.png' })을 추가했습니다. 이는 모든 것이 계획대로 진행되는지 확인하는 훌륭한 도구입니다. 이 코드가 실행되면 스크랩 중인 웹사이트의 현재 상태를 캡처하는 이미지 파일이 프로젝트 디렉터리에 생성됩니다. 원하는 대로 파일 이름을 조정할 수도 있습니다.

모든 내용이 확인되면 5단계로 진행하세요.

5단계

이제 스크립트가 구체화되었으므로 웹 페이지에서 데이터를 추출하는 핵심 부분을 살펴보겠습니다. 지금까지의 스크립트는 다음과 같습니다.

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

데이터가 성공적으로 스크랩되었는지 확인하기 위해 CLI에서 노드 "server-file-name"을 실행할 수 있으며, 데이터는 console.log(quotesScraper);를 사용하여 콘솔에 표시됩니다.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): 여기가 마법이 일어나는 곳입니다. 평가 메소드를 사용하면 스크랩 중인 페이지의 컨텍스트 내에서 JavaScript 코드를 실행할 수 있습니다. 이는 마치 브라우저의 개발자 콘솔을 열고 페이지에서 직접 코드를 실행하는 것과 같습니다.

const quote = document.querySelectorAll(".quote");: 여기서는 .quote 클래스와 일치하는 페이지의 모든 요소를 ​​선택합니다. 이는 인용 요소의 NodeList를 제공합니다.

const quoteArray = [];: 추출한 따옴표를 저장하기 위해 빈 배열을 초기화합니다.

for (const quote of quote) { ... }: 이 루프는 각 인용 요소를 반복합니다. 각각에 대해 인용문과 저자의 텍스트를 추출합니다.

quotesArray.push({ quote: texts,author });: 각 인용문에 대해 인용문 텍스트와 작성자가 포함된 개체를 만든 다음 이 개체를 quoteArray에 푸시합니다.

return quoteArray;: 마지막으로 따옴표 배열을 반환한 다음 Node.js 환경의 quoteScraper에 저장합니다.

이 데이터 추출 방법은 사용자와 마찬가지로 자동화되고 프로그래밍된 방식으로 페이지와 상호 작용할 수 있다는 점에서 강력합니다.

브라우저 닫기

await browser.close();: 데이터를 스크랩한 후 브라우저를 닫아 리소스를 확보하는 것이 중요합니다. 이 줄은 우리가 시작한 브라우저 인스턴스가 제대로 종료되었는지 확인합니다.

2부 기대

이 스크립트를 사용하면 Puppeteer를 사용하여 웹사이트에서 데이터를 성공적으로 스크랩했습니다. 그러나 우리는 가능한 것의 수박 겉핥기식일 뿐입니다. 2부에서는 동적 콘텐츠 처리, Express.JS를 사용하여 폐기된 데이터의 API 기능 생성과 같은 고급 기술을 살펴보겠습니다. Puppeteer의 세계를 더 깊이 탐구하는 동안 계속 지켜봐 주시기 바랍니다!