참조 링크

Puppeteer 로고 깃허브 링크 : https://github.com/puppeteer/puppeteer
문서 페이지 : https://pptr.dev/
API 문서 : https://github.com/puppeteer/puppeteer/blob/v5.5.0/docs/api.md

1. 발단

  • Python + Selenium 조합으로 크롤링하는 프로젝트를 몇 개 만들어 봤는데..
  • Google Apps Script를 쓰다보니 Javascript로 할 수 없을지 찾아보게됨
  • puppeteer를 찾아냄
  • 공부해보기로 함

2. 전개

Puppeteer란 ?

  • Google Chrome DevTools 개발팀에서 만든 WebDriver 기능의 Node.js 라이브러리
  • 단어의미 : 인형사 - 인형(puppet)을 부리는 사람
  • Puppeteer 간단 정리하기 - 박성룡
    • 2017년 부터 나온듯하다.
  • 역할이 Selenium과 비슷한데 Selenium과의 차이에 대한 설명을 puppeteer github 사이트에서 찾을 수 있다.
    • Selenium은 여러 브라우저에서 single API로 자동화 검증을 수행할수 있다
    • Puppeteer는 Chrome only지만 Chrome에 대해서는 더 다양한 옵션과 높은 신뢰성으로 자동화 검증을 수행할 수 있다.
  • Python에서 Selenium으로 웹 스크레이핑 하듯이 Javascript로 Puppeteer를 써서 스크레이핑할 수 있다.
  • Puppeteer의 alternatives, stackshare.io

사전학습

예제 : Typescript로 puppeteer 사용해보기

예제에 사용된 도구

Commander.js

  • nodejs app을 command-line tool로 만드는 도구
Creating a Command-line Application with Node and Commander.js
  • 본 내용은 linux 환경에서 진행한 것 같은데 windows 환경도 많이 다르지 않음
  • Project Setup
    • npm init 으로 package.json 만들고 시작
    • commander는 로컬로 설치
  • Globally registering our application
    • 이 설정을 하기 전에는 node /bin/index.js로 실행해야하는데
    • notes만 타이핑해서 실행하도록 할 수 있다.
    • 우선, 어플리케이션의 entry point의 시작 부분에 다음 주석을 설정해야한다. 
      

      1

      		

      #!/usr/bin/env node
    • 위의 Comment는 shebang이라는 것으로 linux에서 shell script를 실행할 때 어떤 실행조건으로 실행할지 알려주는 역할을 한다.
    • package.json에 다음과 같이 추가한다. 콘솔 명령어와 실행파일을 연결해주는 속성이다 
      

      1
2
3

      		

      "bin": {
  "notes": "./bin/index.js"
}
    • 프로젝트 root에서 npm link를 실행한다.
      • global path에 symlink를 만드는데 windows에서는 c:\Users\<사용자>\AppData\Roaming\npm\notes.ps1, notes.cmd, notes 파일이 생성된다.
      • 즉 아무데서나 notes를 type하면 실행된다
    • 일단 여기까지가 실행파일 환경 셋업. 이 이후는 기능을 추가하면된다.
      • 기능 추가는 위의 링크 문서를 참조한다.

typescript 시작하기