Javascript를 사용하여 웹 스크래핑을 수행하는 방법: 포괄적인 가이드

자바스크립트를 사용하여 웹 스크래핑하는 방법을 배우고 싶지만 어디서부터 시작해야 할지 모르시겠습니까? 걱정하지 마세요.

이 블로그에서는 자바스크립트 스크래핑을 시작하는 데 필요한 모든 정보를 제공합니다. 또한 Puppeteer를 사용하여 JavaScript를 사용하여 웹사이트를 스크래핑하는 단계별 프로세스를 안내해 드립니다.

시작해 보겠습니다.

Javascript 스크래핑이란 무엇인가요?

오늘날의 디지털 시대에 웹 스크래핑을 위한 JavaScript는 개발자와 데이터 애호가에게만 필수적인 기술이 아닙니다. 마케터도 배워야 할 필수 기술입니다.

핵심적으로 JavaScript 스크래핑은 JavaScript 기반 라이브러리나 도구를 사용하여 웹사이트에서 귀중한 데이터를 추출하는 프로세스입니다. Python을 사용하여 웹사이트를 스크래핑하는 방법, Javascript 스크래핑은 특히 콘텐츠를 표시하는 데 JavaScript가 많이 사용되는 웹사이트에서 정보를 수집하는 데 유용합니다.

JavaScript를 사용하여 웹사이트를 스크래핑하는 경우 기본적으로 웹 브라우저에서 데이터를 수집하는 프로세스를 자동화하는 코드를 작성하는 것입니다. 강력한 데이터 추출 방법으로, 비교적 짧은 시간에 방대한 양의 정보를 수집할 수 있습니다.

시장 동향 분석, 경쟁 정보 수집, 비즈니스 리드 생성을 위한 데이터 수집 등 어떤 목적이든 JavaScript를 이용한 데이터 스크래핑은 매우 유용한 도구가 될 수 있습니다. 이 방법은 웹 개발에 깊이 뿌리내린 언어인 JavaScript의 기능을 활용하여 다양한 웹 페이지에서 데이터를 탐색, 선택 및 추출합니다.

이제 Javascript 웹 스크래핑이 무엇인지 이해했으므로 Javascript를 사용하여 사이트를 스크래핑할 수 있는 방법을 알아보겠습니다.

자바스크립트를 사용하여 웹사이트를 스크래핑하는 3가지 일반적인 방법

자바스크립트를 사용하여 웹사이트를 스크래핑하는 방법은 여러 가지가 있습니다. 하지만 어떤 방법을 사용해야 할까요? 답은 스크래핑 요구 사항에 따라 달라집니다. 이 섹션에서는 사람들이 Javascript를 사용하여 웹사이트를 스크래핑하는 세 가지 일반적인 방법을 설명합니다.

간단한 정적 웹사이트에 대한 Cheerio

초기 요청에서 콘텐츠가 빠르게 로드되는 HTML 웹사이트를 본 적이 있나요? 그 이유는 동영상이나 복잡한 애니메이션과 같은 무거운 콘텐츠를 포함하지 않기 때문입니다. 이러한 정적인 웹사이트를 다룰 때는 Cheerio는 이상적인 선택입니다.

Cheerio는 HTTP 클라이언트를 통해 페이지의 원시 HTML을 가져오므로 DOM을 쉽게 탐색하고 조작할 수 있습니다.

가볍고 빠릅니다. 주로 브라우저 환경 전체를 로드할 필요가 없기 때문입니다. 앞서 언급했듯이, 이 방법은 HTML 코드에서 데이터를 쉽게 사용할 수 있는 간단하고 정적인 웹사이트에 적합합니다.

동적 콘텐츠 스크래핑을 위한 퍼피티어

동적인 콘텐츠(비디오 및 이미지 등)가 포함된 복잡한 웹사이트나 콘텐츠가 동적으로 로드되는 JavaScript 중심 사이트를 다루는 경우 Node 라이브러리인 Puppeteer가 가장 좋은 선택입니다.

Puppeteer 는 헤드리스 브라우저, 그래픽 사용자 인터페이스(GUI)가 없는 웹 브라우저를 사용하여 웹 페이지와 상호작용합니다. 즉 버튼 클릭이나 스크롤과 같은 사용자 동작을 에뮬레이션할 수 있으며, 이러한 상호작용의 결과로 나타나는 콘텐츠에 액세스하는 데 필수적입니다.

Puppeteer는 AJAX에 의존하고 JavaScript 코드를 실행하고 콘텐츠를 렌더링하기 위해 전체 브라우저 환경이 필요한 최신 웹 애플리케이션을 스크래핑하는 데 강력한 기능을 제공합니다.

jQuery를 사용하여 웹사이트 스크래핑

때로는 많은 양의 데이터를 스크래핑할 필요가 없을 수도 있습니다. 특정 이메일 주소를 스크래핑하는 것처럼 빠른 정보를 한 번에 추출해야 할 수도 있습니다. 이러한 경우, jQuery는 편리한 도구입니다. 브라우저에서 실행되는 클라이언트 측 스크립트이지만, jQuery를 사용하면 웹 페이지에서 데이터를 쉽게 선택하고 추출할 수 있습니다.

이 방법은 특히 임시 스크래핑 작업에 유용합니다. 콘솔을 열고 jQuery 코드 몇 줄을 작성하여 필요한 정보를 추출하는 것만큼 간단합니다. 그러나 이 방법은 대규모 또는 자동화된 스크래핑 작업에는 적합하지 않습니다.

각 방법은 고유한 장점을 가지고 있으며 다양한 스크래핑 요구 사항에 적합합니다. 일회성 데이터 추출이든 동적 콘텐츠가 포함된 복잡한 스크래핑 작업이든 JavaScript는 강력하고 유연한 솔루션을 제공합니다.

하지만 이 가이드에서는 Puppeteer를 사용하여 Javascript로 웹 스크래핑을 수행합니다. Puppeteer에서 Javascript를 사용하여 웹 스크래핑을 수행하는 단계별 과정을 안내해 드리겠습니다.

Javascript Puppeteer를 사용하여 웹 스크래핑하는 방법?

웹 스크래핑은 때때로 어렵게 느껴질 수 있지만 적절한 도구를 알고 있다면 작업이 10배 더 쉬워집니다. 이 섹션에서는 웹 스크래핑을 위한 노드 라이브러리인 Puppeteer를 사용하는 방법을 알아보세요. Puppeteer는 동적 콘텐츠를 스크래핑하는 완벽한 Javascript 도구입니다.

이 과정을 세 가지 간단한 단계로 나누어서 살펴보겠습니다. Google에서 "행복한 강아지"를 검색하여 이미지를 스크래핑하는 방법을 보여드리겠습니다. 자세히 살펴보겠습니다!

1단계: 새 디렉토리 만들기 및 Puppeteer 설치

우선, 프로젝트 환경을 설정해 보겠습니다. 먼저, 새 프로젝트 디렉토리를 만들고 초기화합니다.

그런 다음 스크래핑에 사용할 Puppeteer를 설치합니다. 콘솔을 열고 다음 명령을 실행합니다.

• 새 디렉토리를 만들려면:mkdir web-scraping-puppeteer

• 디렉토리로 이동하는 경우: cd web-scraping-puppeteer

• 새 Node.js 프로젝트 초기화: npm init -y

• Puppeteer 설치:npm install puppeteer
  
  
  

2단계: 초기 코드 작성

이제 브라우저를 실행하고 Google 이미지로 이동하여 "happy do"를 검색하는 초기 코드를 작성해 보겠습니다. g". Puppeteer를 사용하여 새 브라우저 창을 열고, 뷰포트를 설정하고, 페이지 요소와 상호작용합니다.

다음은 이 단계에 대한 코드입니다.

코드 설명:

• const puppeteer = require('puppeteer');

  • 첫 번째 단계에서 시스템에 Puppeteer를 설치했던 걸 기억하시나요? 음, 이 줄은 Puppeteer 라이브러리를 스크립트로 가져옵니다. 그러면 그 기능을 사용하여 헤드리스 브라우저를 제어할 수 있습니다.

• (async () => { ... })();

  • 이 줄은 비동기 함수를 선언합니다. 이 함수는 웹 스크래핑 작업을 처리합니다. 비동기 함수를 사용하면 다음을 수행할 수 있습니다. 다음 단계로 넘어가기 전에 특정 작업(예: 페이지 로드)이 완료될 때까지 기다리는 것이 중요합니다. 이는 웹 스크래핑에 매우 중요합니다.

• 상수 브라우저=인형 조종사.실행 대기();

  • 이 줄은 Puppeteer에게 새로운 브라우저 세션을 시작하라고 알려줍니다. await 키워드는 스크립트가 진행되기 전에 브라우저가 완전히 시작되도록 하는 데 사용됩니다.

• 상수 페이지 = 대기 브라우저.newPage();

  • 브라우저를 실행한 후 이 명령을 실행하면 브라우저에 새 페이지(또는 탭)가 열립니다.

• await page.goto('https://www.google.com/imghp?hl=ko');

  • 스크립트는 열린 페이지를 지정된 URL로 이동합니다. 이 경우 Google 이미지 검색 페이지입니다. await 키워드는 탐색이 완료된 후 계속 진행합니다.

• await page.setViewport({ width: 1080, height: 1024 });

  • 이것은 뷰포트(페이지의 볼 수 있는 섹션)의 크기를 설정합니다. 스크린샷이나 화면 크기에 따라 레이아웃이 변경되는 페이지에 중요합니다.

• await page.type('textarea[name="q"]', 'happy dog');

  • 이 명령은 페이지의 입력 필드, 특히 이름 속성 'q'(Google 이미지에서 검색 필드)가 있는 텍스트에 'happy dog'라는 텍스트를 입력하는 것을 시뮬레이션합니다.

• 페이지 클릭('button[type="submit"]');을 기다립니다.

  • 이 줄은 양식의 제출 버튼을 클릭하여 검색을 트리거하는 것을 시뮬레이션합니다.

• await page.waitForNavigation();

  • 제출 버튼을 클릭한 후, 이 명령은 페이지 탐색이 완료될 때까지 기다립니다(즉, 검색 결과가 로드될 때까지 기다립니다).

• 브라우저.닫힘();을 기다립니다

  • 이전 단계가 모두 완료되면 이 명령은 브라우저를 닫습니다.
    
    

3단계: Google 이미지에서 "행복한 강아지" 이미지 가져오기.

이제 목표 는 스크래핑 하고 div 내부의 클래스, ID, 소스 URL을 식별하는 것입니다.

그렇게 하려면 브라우저를 열고 "행복한 강아지"를 검색한 다음 스크래핑하려는 이미지를 클릭합니다. 이미지를 확장한 후 마우스 오른쪽 버튼을 클릭하고 "검사" 옵션을 선택합니다.

Inspect 옵션 은 이미지 div 컨테이너를 보여줍니다. 컨테이너에는 클래스, ID, 소스 URL이 있어 코드에 포함 하기 위해 복사해야 합니다.

전체 코드는 다음과 같습니다.

이 코드에서:

• 먼저 Puppeteer가 Google 이미지로 이동하여 "happy dog"를 검색하도록 합니다.

• 결과가 로드되면 '.sFlh5c.pT0Scc.iPVvYb' 클래스와 일치하는 모든 이미지를 선택합니다.

• 그런 다음 목록에서 원하는 이미지를 클릭하여 미리보기를 시작합니다.

• 미리보기 컨테이너(#islsp)와 그 안의 큰 이미지가 로드될 때까지 기다립니다.

• 마지막으로, 큰 이미지의 src 속성을 추출합니다. 이 속성에는 URL이 포함되어 있습니다.
  
  

궁금하신 경우를 대비하여 이 코드에서 if”와 else”문을 사용하여 그것이 확실하도록 했습니다. “지정된 클래스의 이미지를 찾을 수 없습니다 ”를 반환합니다. 잘못된 클래스의 경우 그렇지 않으면 때때로 코드가 끊어집니다.

이제 Javascript와 Puppeteer를 사용하여 웹사이트를 스크래핑하는 방법을 성공적으로 배웠습니다. 동일한 접근 방식을 사용하여 모든 웹사이트에서 여러 이미지를 스크래핑할 수 있습니다.

그러나 일부 웹사이트에서는 콘텐츠를 스크래핑하는 것을 허용하지 않습니다. 이러한 웹사이트에는 스크래핑 방지 기술이 있습니다. 이로 인해 작업을 완료하는 것이 어려워집니다. 더 나쁜 경우, 완전히 차단될 수도 있습니다.

하지만 이 문제에 대한 해결책도 있습니다. 다음 섹션으로 이동하여 감지되거나 차단되지 않고 웹사이트를 스크래핑합니다.

감지되지 않은 브라우징에 AdsPower를 사용하세요

JavaScript를 사용하여 데이터를 스크래핑하는 동안 보호 계층을 추가하려는 경우 AdsPower는 사용할 수 있는 최고의 감지 방지 브라우저입니다.AdsPower 브라우저는 안티 스크래핑 문제를 효과적으로 피함으로써 원활한 웹 스크래핑 경험을 보장합니다.

또한 이를 사용하여 여러 사용자 프로필을 만들고 웹에서 익명으로 유지할 수 있습니다.지금 가입하세요. 내일을 안전하게 보내세요.

마무리!

JavaScript를 사용하여 웹 스크래핑하는 방법을 배우면 데이터 가능성이 무궁무진해집니다. 개인 프로젝트든 전문 분석이든 Puppeteer와 같은 도구를 사용하면 접근하기 쉽고 효율적입니다.

이 블로그에 언급된 기술을 사용하여 필요한 정보를 스크래핑하세요. 또한, 안전한 스크래핑을 위해 AdsPower를 사용하는 것을 잊지 마세요.