코사장의 코딩 놀이터

웹개발

Puppeteer 소개 및 활용 방법

코사장_ 2023. 4. 20. 21:50
반응형

1. 들어가기

안녕하세요! 이번 포스트에서는 웹 페이지의 자동화, 스크린샷 및 PDF 생성, 크롤링 등에 사용되는 Node.js 라이브러리인 Puppeteer에 대해 알아보겠습니다. 이 글에서는 Puppeteer의 기본 개념, 사용법, 설치 방법, 예제 코드 등을 다루고, Puppeteer를 배우고 활용하는 데 도움이 될 추가 정보를 제공하겠습니다.

2. Puppeteer 기본 개념

Puppeteer는 Google Chrome 또는 Chromium 브라우저 인스턴스를 제어할 수 있는 고급 API를 제공하는 Node.js 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지를 열고, 조작하고, 스크린샷을 찍거나 PDF를 생성하는 등의 작업을 자동화할 수 있습니다. 또한, 헤드리스 브라우저(화면이 없는 브라우저)를 사용하여 백그라운드에서 작업을 실행할 수 있습니다.

 

3. Puppeteer 설치 방법

먼저, 프로젝트에서 Node.js가 설치되어 있는지 확인해야 합니다. Node.js가 설치되어 있다면, 터미널에서 다음 명령어를 실행하여 Puppeteer를 설치합니다.

npm install puppeteer

위 명령어를 실행하면 프로젝트 폴더에 Puppeteer가 설치되고, node_modules 폴더에 Chromium 브라우저도 설치됩니다.

 

4. 예제 코드

간단한 Puppeteer 예제 코드를 통해 웹 페이지를 열고 스크린샷을 찍는 기능을 구현 할 수 있습니다.

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

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'example.png' });

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

위 코드를 screenshot.js 파일에 저장한 후, 터미널에서 node screenshot.js 명령을 실행하면 example.com 웹 페이지의 스크린샷이 example.png 파일로 저장됩니다.

 

5. 웹 페이지 조작 및 크롤링

Puppeteer를 사용하여 웹 페이지의 요소를 선택하고 조작하거나 정보를 추출할 수 있습니다. 예를 들어, 다음 코드는 https://example.com 웹 페이지의 <h1> 요소의 텍스트를 콘솔에 출력합니다.

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

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const h1Text = await page.$eval('h1', element => element.textContent);
    console.log(`H1 text: ${h1Text}`);

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

위 코드를 extract_text.js 파일에 저장한 후, 터미널에서 node extract_text.js 명령을 실행하면 웹 페이지의 <h1> 요소의 텍스트가 콘솔에 출력됩니다.

 

6. 폼 작성 및 제출

Puppeteer를 사용하여 웹 페이지의 폼을 작성하고 제출할 수 있습니다. 다음 코드는 로그인 폼에 사용자 이름과 비밀번호를 입력하고 제출하는 예입니다.

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

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com/login');

    await page.type('#username', 'your_username');
    await page.type('#password', 'your_password');
    await page.click('#submit');

    // 로그인 후 처리 코드 추가...

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

7. PDF 생성

Puppeteer를 사용하여 웹 페이지를 PDF로 저장할 수 있습니다. 다음 코드는 https://example.com 웹 페이지를 PDF로 저장하는 예입니다.

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

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com', { waitUntil: 'networkidle2' });
    await page.pdf({ path: 'example.pdf', format: 'A4' });

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

이상으로 Puppeteer의 기본 개념, 사용법, 설치 방법 등을 소개하였습니다. Puppeteer는 다양한 웹 자동화 작업을 수행할 수 있는 강력한 도구이며, 크롤링, 웹 페이지 테스트, 스크린샷 및 PDF 생성 등 다양한 분야에서 활용할 수 있습니다. Puppeteer를 통해 웹 작업의 효율성을 높여보시기 바랍니다.

반응형