24/1/31 puppeteer

2024. 2. 1. 08:30카테고리 없음

오늘은 puppeteer를 이용한 크롤링을 해봤다. 
재미없을줄 알았는데 해보니까 신기하니 재밌더라고요 하하하 해보세요 님덜

<puppeteer.config.cjs> 퍼피티어 공식문서에 이거 만들어보라길래 냅따 만들었는데 뭔지 잘몰라요 ㅎㅎ 
공식문서 보세용

const { join } = require("path");

/**
 * @type {import("puppeteer").Configuration}
 */
module.exports = {
  // Changes the cache location for Puppeteer.
  cacheDirectory: join(__dirname, ".cache", "puppeteer"),
};


yarn add puppeteer를 터미널에 입력해서 puppeteer 다운 받아놓으시고요

<example.js> 기초가 부족한 프론트엔드 입문자라 node 영역에서 작동하는 puppeteer를 이용한 크롤링이
시작부터 조금 난감했지만 하니까 되더라고요 신기

const puppeteer = require("puppeteer");   // import 문법을 해볼라 했는데 안되서 그냥 써있는데로
const fetch = require("node-fetch");           //require라는 방식으로 라이브러리들을 가져옵니다.
const { default: axios } = require("axios");    //node 영역에서는 일반 fetch는 안된다고 하네요
                                                                            //axios를 써도 된대요
(async () => {
  const resp = await fetch(
  );                                                                       //가게들의 정보가 객체로 담긴 배열을 받아줍니다.
  const data = await resp.json();       //fetch로 받았기 때문에 json으로 풀어주고요

  const haha = await data.data;          //haha에 넣습니다. 작명센스 엄청나죠?ㅋㅋㅋ
  //   console.log(haha);
  const browser = await puppeteer.launch({ headless: false });  //헤드리스 false로 해야 puppeteer작동과정을
  const page = await browser.newPage();                     //브라우저로 볼수있어요  //뉴페이지 하나여시고
  for (let i = 3333; i < 3900; i++) {        //배열중에 요만큼에 대한 정보가 필요합니다.
    await page.goto(                     //요 소괄호 안에는 url이 들어가는데 백틱으로 원하는 주소로 직접이동했어요
      { timeout: 60000 }          //이거는 브라우저의 대기시간을 1분 기다려달라는 로직이에요 
    );
    await page.waitForNavigation();       //화면을 다그릴때까지 기다려달라는 명령어 waitFor는 종류가 많더라고요
    let aaa = await page.$("._fe_image_tab_content_thumbnail_image");   //원하는 클래스명을 입력해서 가장위에
    // console.log(aaa, "이걸보자");                                                  //하나만 가져옵니다.
    if (!aaa) {
      continue;             //이걸 달아서 자동으로 넘어가게끔 해봤는데 aaa값은 undefined나 null 인 경우가 
    }                             //안생기는건가? 싶은데 잘 모르겠어요
    const result = await page.evaluate(          //요게 좀 특이한데 첫번째 콜백함수를 받고 
      (element, haha, id) => {                            //콜백함수의 매개변수들은
        // 여기에서 엘리먼트에 대한 조작 또는 정보 추출
        return {
          id,
          src: element.src,
          shopName: haha.업소명,
          // ... 추가적인 속성이나 정보
        };
      },
      aaa,                     //콜백함수 바로 뒤의 동일선상 인자들하고 index순서대로 연결되더라고요
      haha[i],             //이유는 모름 걍 됨 ㅋㅋㅋ
      i
    );
    console.log(result, "결과");
    await axios.post("http://localhost:5000/shops", result);  //5000번 포트에서 연 json파일에 원하는 정보를 담았어요
    await page.waitForTimeout(3000);           //긁어올때 너무 빠르면 해당 사이트에서 락을 건대요 
  }                                                                 //이건 잠시 기다리기 위한 로직입니다.
})(); 

//puppeteer 혹시 꿀팁이나 좋은 정보있으면 알려주세요