← 전체 글
제품 업데이트 2분 읽기

Browser Tasks: JavaScript가 많은 사이트 스크래핑 방법

현대 웹사이트의 70% 이상이 콘텐츠를 렌더링하기 위해 JavaScript를 필요로 합니다. HTTP request가 빈 결과를 반환할 때 FourA의 Browser Tasks를 통해 전체 페이지를 가져오는 방법을 소개합니다.

browserjavascriptpuppeteerproduct-update

현대 웹사이트의 70% 이상은 콘텐츠를 렌더링하기 위해 JavaScript에 의존합니다. 표준 HTTP request는 초기 HTML 껍데기만 확인합니다. 실제 데이터는 JavaScript가 실행된 후에 로드되므로, 기존 스크래핑 도구는 빈 페이지만 반환하게 됩니다.

FourA 브라우저 작업은 모든 request에 대해 실제 headless Chrome 인스턴스를 실행하여 이 문제를 해결합니다.

작동 방식

type: "browser"(으)로 작업을 전송하면 FourA는 다음을 수행합니다.

  1. headless Chrome 브라우저 실행
  2. 대상 URL로 이동
  3. JavaScript 실행 및 DOM 안정화 대기
  4. 선택적으로 특정 CSS selector가 나타날 때까지 대기
  5. 완전히 렌더링된 HTML 반환

전체 프로세스는 FourA의 인프라에서 실행됩니다. 별도의 브라우저 설치, Puppeteer 설정, Chrome 업데이트 관리 없이 정리된 HTML을 바로 받을 수 있습니다.

브라우저 작업 사용 시기

다음과 같은 경우 브라우저 작업을 사용하세요:

  • 싱글 페이지 애플리케이션(React, Vue, Angular)
  • 지연 로딩 콘텐츠가 있는 페이지(무한 스크롤, "더 보기" 버튼)
  • cookie 동의 또는 초기 JS 설정이 필요한 사이트
  • 클라이언트 측 인증 플로우 뒤에 있는 콘텐츠

다음과 같은 경우 single 작업을 유지하세요:

  • 서버 렌더링 HTML 페이지(뉴스 사이트, 블로그, 위키)
  • JSON을 직접 반환하는 REST API
  • 속도가 최우선인 경우(단일 작업은 1초 미만인 반면 브라우저 작업은 2-10초 소요)

예시: React 앱 스크래핑

curl -X POST https://eu.api.foura.ai/api/v1/tasks \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/dashboard",
    "type": "browser",
    "options": {
      "waitFor": ".dashboard-content",
      "timeout": 15000
    }
  }'

waitFor selector는 페이지를 캡처하기 전에 DOM에 .dashboard-content이(가) 나타날 때까지 대기하도록 FourA에 지시합니다. 이를 통해 모든 비동기 데이터가 로드되도록 보장합니다.

성능 팁

  • 타임아웃에 의존하는 대신 항상 특정 selector와 함께 waitFor을(를) 사용하세요. 더 빠르고 안정적입니다.
  • 적절한 timeout을 설정하세요. 15초면 대부분의 SPA를 처리할 수 있습니다. 백엔드가 실제로 느린 경우에만 늘리세요.
  • single을(를) 기본값으로 사용하고, response에서 콘텐츠가 누락된 경우에만 browser(으)로 전환하세요.

향후 계획

스크린샷 캡처, PDF 생성, 다단계 탐색(클릭, 스크롤, 폼 입력)을 포함한 추가 브라우저 기능을 개발 중입니다. 하지만 이러한 추가 기능 없이도 브라우저 작업은 이미 빈 껍데기 대신 JavaScript 렌더링 페이지에서 실제 콘텐츠를 가져오는 가장 일반적인 문제를 해결합니다.

전체 작업 유형 비교는 문서에서 확인하세요.