Puppeteer? Headless Browser?

puppeteer 가 뭘까...
headless browser 가 뭘까.... ㅠㅅㅠ

1.Headless Browser? 머리가 없어? 🧐

크롬없이 크롬을 실행해볼까?
위키보기

A headless browser is a web browser without a graphical user interface.

화면이 없다. 창이 없다 브라우저.
말 그대로 GUI환경이 아닌, CLI에서 동작하는 브라우저다.
보통 browser를 이용할때, 화면(창)이 뜨고 그 위에서 동작을 하는데,
headless browser같은 경우에는 그 창이 없는 browser라고 생각하면 된다.
진짜로 browser에 가긴가는데 사용자에게 그 모습을 창으로 보여주질 않는다.

• 창이 안뜬다고? 이딴걸 왜 써야하는건데?
  다양한 이유가 있지만, 한가지 이유를 생각해보면 특정환경의 OS에서는 '화면' 자체가 존재하지 않는데,
  이런경우에 사용할 수 있는 방식이라고 할 수 있다.
  브라우저 창을 가상으로 렌더링해서 실제 브라우저와 동일하게 동작하도록 이용할 수 있다.

1-1. Headless Browser 장점과 단점

[ 장점 (사용하는 케이스)]
1. 헤드리스 브라우저는 컴퓨터에 GUI가없는 경우 사용이 가능하다.
2. 아무것도 볼 필요가 없는경우 효율적이다.
3. 왜 효율적이냐고? 실제 브라우저와 비교할 때 헤드리스 브라우저가 더 빠르니까!
4. 병렬 테스트등 무거운 작업을 실행해야하는 경우에도 
   UI 기반 브라우저보다 적은 메모리와 리소스를 사용을 노려볼 수 있다.
5. 단일 머신에서 여러 브라우저를 시뮬레이션하거나
   화면이 필요한게 아니라, 브라우저의 데이터만 필요한 경우에도 이용할 수 있다.
   
   
[ 단점 ]
1. 디버깅이 비교적 어렵다.
2. 어떤 부분에서 문제가 발생해 공유하고 싶을 때, 화면이 없어서.. 스크린 샷을 찍거나 하고싶으면
   그 과정이 번거롭다..
   그리고 다른 사람과 화면을 보면서 이야기하는게 당연히 이해가 빠를텐데
   이 부분도 힘든게 단점인듯..

2. Puppeteer? 인형을 조종해? 🎎

puppeteer github 바로가기
puppeteer API 명세 바로가기
puppeteer 가 뭔데..
인형극할때 쓰는거야..?

Puppeteer는 구글 크롬의 DevTools Protocol을 통해
Chrome 또는 Chromium을 제어하기 위한 API를 제공하는 node.js 모듈.
Headless browser다...
Google Chrome 개발 팀에서 직접 개발했다고 하는데....

Puppeteer는 하나의 Browser를 갖고
default BrowserContext가 생성되고,
하나의 Browser는 여러 개의 Browser Context를 갖는다.
아래와 같은 구조를 가지게 된다고 생각하면 된다.

참고 : BrowserContext????
default BrowserContext = Browser 의 생명주기
Browser 는 여러 개의 BrowserContext를 가질 수 있음.
Browser.createIncognitoBrowserContext() => 시크릿 브라우저 컨텍스트도 만들 수 있음.
Browser.newPage() 로 생성된 페이지는 default BrowserContext 에 포함.

• puppeteer 는 Chrome 혹은 Chromium 의 렌더링 엔진을 이용.
• Chrome 의 렌더링 엔진이 지원하는 스펙으로 이루어진 모든 화면을 만들어 낼 수 있음.
• 여러 iframe, popup 으로 이루어진 복잡한 화면도 OK.
• 최근 ES6로 작성된 SPA 화면들도 렌더링 및 제어가 가능.
• puppetter 는 DevTools 프로토콜을 이용하여 직접 Chrome 을 제어함.
• DevTools 프로토콜 으로 I/O, 브라우저 화면크기, 쿠키 및 세션 스토리지 등등 다양한 부분에서 제어가 가능.
• puppeteer를 설치할 때 Chromium도 같이 깔림.
  puppeteer-core는 Chromium 제외.

2-1. pupeteer, 그래서 이걸로 뭘 할건데? 😜

해당 페이지의 스크린 샷을 찍을 수도 있고, PDF로 변환도 가능하다. (신기방기)
리액트 등을 이용한 클라이언트단으로 렌더링이 나중에 되어
스크래핑이 어려운 사이트들도 손쉽게 스크래핑이 가능해진다.
UI testing, 키보드 인풋, 폼 제출 등을 자동화 가능.
... 이밖에 다양한 사용처가 있겠지!

3. 마치며..

selenium 이라는 headless browser도 있다!
찾아보다가 중구난방으로 정리해버린듯하다...ㅋㅋ
😇