[javascript] Express.js에서의 웹 스크린샷 구현 방법

04 Dec 2023

javascript

Express.js는 Node.js를 기반으로 한 웹 애플리케이션 프레임워크로, 웹 서버 개발에 많이 사용됩니다. 이번 포스트에서는 Express.js에서 웹 스크린샷을 구현하는 방법에 대해 알아보겠습니다. 웹 스크린샷은 웹 페이지를 이미지 형태로 캡처하여 저장하거나 다른 용도로 사용할 수 있는 기능을 말합니다.

Puppeteer 사용하기

Puppeteer는 Google에서 개발한 Node.js용 Headless Chrome 라이브러리입니다. 웹 페이지를 자동으로 조작하고 스크린샷을 캡처할 수 있는 기능을 제공합니다. Express.js에서 Puppeteer를 사용하여 웹 스크린샷을 구현해 보겠습니다.

먼저, Express.js와 Puppeteer를 설치해야 합니다.

npm install express puppeteer

다음은 Express.js 애플리케이션에서 웹 스크린샷을 생성하는 예제입니다.

const express = require('express');
const puppeteer = require('puppeteer');

const app = express();
const PORT = 3000;

app.get('/screenshot', async (req, res) => {
  try {
    // Puppeteer를 초기화합니다.
    const browser = await puppeteer.launch();

    // 새로운 페이지를 생성합니다.
    const page = await browser.newPage();

    // 웹 페이지로 이동합니다.
    await page.goto('https://www.google.com');

    // 스크린샷을 캡처합니다.
    const screenshot = await page.screenshot();

    // 스크린샷을 HTTP 응답으로 전송합니다.
    res.set('Content-Type', 'image/png');
    res.send(screenshot);

    // Puppeteer를 종료합니다.
    await browser.close();
  } catch (error) {
    console.error(error);
    res.status(500).send('Error');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

위의 예제 코드에서 /screenshot 경로로 요청이 들어오면 Puppeteer를 사용하여 구글 홈페이지의 스크린샷을 캡처하고, 해당 스크린샷을 HTTP 응답으로 전송합니다.

마무리

이번 포스트에서는 Express.js에서 웹 스크린샷을 구현하는 방법에 대해 알아보았습니다. Puppeteer를 사용하여 웹 페이지를 자동으로 조작하고 스크린샷을 캡처할 수 있습니다. 이를 응용하여 웹 스크린샷을 저장하거나 다른 용도로 활용할 수 있습니다.