TIL 20240619

이번 주 목표  Weekly Plan

리팩토링 2판 읽기

펍카페 개발 착수

Read Refactoring (ver.2)

Develope PubCafe

오늘 목표  Daily Plan

펍 카페 개발 착수

Develope PubCafe

오늘 한 것  Done Today

puppeteer API 정독

Read puppeteer API

오늘 스케줄  Today's Schedule

6:00 기상, 준비
6:30 출근
7:30 업무 준비
9:00 근무 시작
6:30 퇴근
7:30 귀가, 산책
8:30 집 도착, 씻기
9:00 펍 카페 프로젝트 
12:00 취침

 

6:00 wake up, prepare
6:30 go to work
7:30 prepare work
9:00 start work
6:30 go home
7:30 walk
8:30 wash
9:00 pubcafe
12:00 sleep

1. puppeteer Important Methods : puppeteer 주요 메서드

• Page.goto() : go to url 
• Page.title() : title tag of the page
• Page.evaluate() : do fucntion inside of page and return result

• Page.goto() 주어진 URL로 이동
• Page.title() 페이지의 타이틀 태그
• Page.evaluate() 페이지 안에서 함수를 실행하고 결과를 리턴한다.

2. puppeteer-cluster

• Basic Structure
• 기본 구조

const { Cluster } = require('puppeteer-cluster');

(async () => {
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 2,
  });

  await cluster.task(async ({ page, data: url }) => {
    await page.goto(url);
    const screen = await page.screenshot();
    // Store screenshot, do something else
  });

  cluster.queue('<http://www.google.com/>');
  cluster.queue('<http://www.wikipedia.org/>');
  // many more pages

  await cluster.idle();
  await cluster.close();
})();

• Cluster : Start Chome Instance as Cluster
  Cluster 크롬 인스턴스를 클러스터 형태로 시작합니다.
• cluster.launch : Start cluster instance
  cluster.launch 클러스터 인스턴스를 시작합니다.
  • concurrency 동시성 구현
    CONCURRENCY_CONTEXT : secret page of each URL, 각 URL에 대한 시크릿 페이지 
  • maxConcurrency 최대 병렬 작업 수
  • puppeteerOptions
    headless : Visible of UI (new = no UI mode due to new chrome policy)
    UI 표시 여부 (new는 변경된 크롬 정책에 따른 UI 없는 모드)
    ignoreDefaultArgs : do not apply specific args when running browser
    특정 인자들이 브라우저 실행 시 적용되지 않도록 함.
    • -no-sandbox: disable sandbox. sandbox is security function usually used to isolate browser process and rest of the system. But for some environment (Especially in Docker container and some CI environments) they do not supply sandbox mode so you should disable this.
      보안 샌드박스를 비활성화합니다. 샌드박스는 일반적으로 브라우저 프로세스가 시스템의 나머지 부분과 격리되도록 도와주는 보안 기능입니다. 하지만 일부 환경(특히 Docker 컨테이너나 일부 CI 환경에서)에서는 샌드박스 모드를 지원하지 않을 수 있어 이 옵션을 비활성화할 필요가 있습니다.
    • -disable-setuid-sandbox: if you have setuid authoritym this disables inner setuid sandbox of Chromium. This is security option.
      setuid 권한이 있는 경우, 이 옵션은 Chromium의 내부 setuid sandbox를 비활성화한다. 이는 보안을 위한 옵션이다.
• cluster.task: decide what to do with cluster. 클러스터에서 할 일을 정의합니다.
  • page : page provided from puppeteer. Interact as one tab in Chromium.
    puppeteer 에서 제공된 페이지입니다. 크로니움에서 한 개의 탭으로 상호작용합니다.
• cluster.queue : puts in URL or data to the queue URL또는 데이터를 큐에 넣습니다.
• cluster.idle : Promise resolve when queue is empty 큐가 비게 되면 해당 Promise가 resolve됩니다.
• cluster.close : Quit Cluster and all opened Chromium instance. 클러스터와 열려있는 모든 크롬 인스턴스를 종료합니다.

3. Reason Why Fetch With Regular Expression Is Faster Then Puppeteer
puppeteer보다 fetch 요청을 통한 정규식 파싱이 빠른 이유

Puppeteeer

• puppeteer recieves active data from chrome browser by headless.
  puppeteer는 headless로 크롬 브라우저를 실행시켜 동적인 데이터를 받아옵니다.
• Puppeteer runs javascript code just without UI. It have to do function and GET request.
  puppeteer는 화면만 없다 뿐이지 자바스크립트 코드가 실행 중에 있습니다. GET요청 뿐만 아니라 해당 함수를 실행시켜야 합니다.
• Maximum Count of Parallel Task is defined by core of the host computer.
  병렬 작업은 호스트 코어 개수에 따라 최대치가 정해져 있습니다.

Fetch 와 정규식

• fetch 요청은 단순히 페이지의 HTML을 받아오게 됩니다. 이미 받아진 데이터를 토대로 자바스크립트 코드를 실행하지 않고 정규식을 활용하여 원하는 데이터를 파싱합니다.
  Fetch just recieves HTML of the page. It does not run javascript code. Parse data with regular expression with already received data.
• 자바스크립트 코드를 실행하는 시간이 줄어듭니다.
  Reduce time to run javascript code.
• async/await를 이용해 많은 fetch 요청을 보낼 수 있습니다.
  Able to send many fetch requests via async/await.

---

정리  Memo

Reason Why Fetch With Regular Expression Is Faster Then Puppeteer

puppeteer보다 fetch 요청을 통한 정규식 파싱이 빠른 이유

 

Puppeteeer

• puppeteer는 headless로 크롬 브라우저를 실행시켜 동적인 데이터를 받아옵니다.
• puppeteer는 화면만 없다 뿐이지 자바스크립트 코드가 실행 중에 있습니다. GET요청 뿐만 아니라 해당 함수를 실행시켜야 합니다.
• 병렬 작업은 호스트 코어 개수에 따라 최대치가 정해져 있습니다.

Fetch 와 정규식

• fetch 요청은 단순히 페이지의 HTML을 받아오게 됩니다. 이미 받아진 데이터를 토대로 자바스크립트 코드를 실행하지 않고 정규식을 활용하여 원하는 데이터를 파싱합니다.
• 자바스크립트 코드를 실행하는 시간이 줄어듭니다.
• async/await를 이용해 많은 fetch 요청을 보낼 수 있습니다.Puppeteeer
  • puppeteer recieves active data from chrome browser by headless.
    puppeteer는 headless로 크롬 브라우저를 실행시켜 동적인 데이터를 받아옵니다.
  • Puppeteer runs javascript code just without UI. It have to do function and GET request.
    puppeteer는 화면만 없다 뿐이지 자바스크립트 코드가 실행 중에 있습니다. GET요청 뿐만 아니라 해당 함수를 실행시켜야 합니다.
  • Maximum Count of Parallel Task is defined by core of the host computer.
    병렬 작업은 호스트 코어 개수에 따라 최대치가 정해져 있습니다.
  Fetch 와 정규식
  • fetch 요청은 단순히 페이지의 HTML을 받아오게 됩니다. 이미 받아진 데이터를 토대로 자바스크립트 코드를 실행하지 않고 정규식을 활용하여 원하는 데이터를 파싱합니다.
    Fetch just recieves HTML of the page. It does not run javascript code. Parse data with regular expression with already received data.
  • 자바스크립트 코드를 실행하는 시간이 줄어듭니다.
    Reduce time to run javascript code.
  • async/await를 이용해 많은 fetch 요청을 보낼 수 있습니다.
    Able to send many fetch requests via async/await.

 

 

KPT

Keep

 Trying to work hard

열심히 하려고 하는 것

Problem
Decide so fast and Not thinking deeply

성급한 판단과 깊이 고민하지 않는 것

Try

Think Deeply and for long And decide, write code.

깊게 고민하고 오래 생각한 뒤에 최종 결론, 코드 내기.

소감  Diary

Worked Hard

열심히 하였다.