koreantech.org Web Scraping API를 사용하여 웹 사이트를 긁는 방법

by

웹 스크래핑은 World Wide Web에서 유용한 정보를 추출하는 프로세스입니다. Google 검색 중에 웹 크롤러(봇), 즉 크롤러는 웹의 거의 모든 콘텐츠를 살펴보고 사용자와 관련된 콘텐츠를 선택합니다.

모든 사람이 정보나 지식에 접근할 수 있어야 한다는 생각이 월드 와이드 웹의 형성으로 이어졌습니다. 그러나 귀하가 찾고 있는 데이터는 공공 사용이 허용되어야 합니다.

웹 스크래핑은 어떻게 유용합니까?

우리는 데이터의 시대에 살고 있습니다. 원시 데이터는 웹 스크래핑의 도움으로 더 큰 목적을 위해 사용될 수 있는 유용한 정보로 변환될 수 있습니다. 제품을 개선하기 위해, 즉 피드백 루프를 만들기 위해 제품 사용자를 분석하고 연구하는 데 사용할 수 있습니다.

전자 상거래 회사는 이를 사용하여 경쟁사의 가격 전략을 연구하고 그에 따라 자신의 전략을 수립할 수 있습니다. 웹 스크래핑은 날씨 및 뉴스 보고에도 사용할 수 있습니다.

도전

#1. IP 제한

여러 웹사이트에서는 IP 주소 또는 지리적 위치를 감지하여 특정 시간 간격으로 사이트 데이터를 얻기 위해 할 수 있는 요청 수를 제한합니다. 그들은 웹 사이트에 대한 악의적인 공격을 방지하기 위해 그렇게 합니다.

#2. 보안 문자

실제 인간과 웹 사이트에 액세스하려는 봇을 구별하는 것이 캡차가 실제로 하는 일입니다. 웹사이트는 웹사이트에서 스팸을 방지하고 웹사이트의 스크레이퍼 수를 제어하기 위해 이를 사용합니다.

#삼. 클라이언트 측 렌더링

이것은 웹 스크레이퍼의 가장 큰 장애물 중 하나입니다. 최신 웹사이트는 단일 페이지 애플리케이션을 만들 수 있는 프런트엔드 프레임워크를 사용합니다. 대부분의 단일 페이지 애플리케이션에는 서버 렌더링 콘텐츠가 없습니다. 대신 클라이언트 측 자바스크립트를 사용하여 필요에 따라 콘텐츠를 생성합니다. 이것은 스크레이퍼가 웹 페이지의 내용이 무엇인지 알기 어렵게 만듭니다. 콘텐츠를 가져오려면 일부 클라이언트 측 자바스크립트를 렌더링해야 합니다.

koreantech.org API

웹 스크래핑 API는 모든 것을 처리하기 때문에 웹 스크래핑을 수행하는 동안 직면하는 대부분의 문제를 해결합니다. koreantech.org API를 살펴보고 이를 웹 스크래핑에 사용하는 방법을 살펴보겠습니다.

koreantech.org의 API에는 간단한 3단계 프로세스가 있습니다.

  • 스크랩할 URL 제공
  • 일부 구성 옵션 제공
  • 데이터 가져오기

그것은 당신을 위해 웹 페이지를 긁어낸 다음 원시 HTML 데이터를 문자열로 반환하거나 링크를 통해 액세스할 수 있는 HTML 파일로 반환할 수 있습니다.

API 사용

이 자습서에서는 JavaScript 런타임 환경인 NodeJS를 사용하여 koreantech.org API를 사용하는 방법을 배웁니다. 계속 진행하기 전에 시스템에 NodeJS를 설치하지 않은 경우 설치하십시오.

  • 현재 폴더 또는 디렉터리의 터미널에서 npm init -y 명령을 실행합니다. 그러면 package.json 파일이 생성됩니다.
  • package.json 파일 내에서 기본 키 값이 다른 경우 기본 키 값을 index.mjs로 변경합니다. 또는 키 유형을 추가하고 해당 값을 모듈과 동일하게 설정할 수도 있습니다.
{
  “type”: “module”
}
  • 터미널에서 npm i axios 명령을 실행하여 axios라는 종속성을 추가합니다. 이 종속성은 특정 끝점에 대한 가져오기 요청을 만드는 데 도움이 됩니다.
  • package.json은 다음과 같아야 합니다.
{
  "name": "webscraping",
  "version": "1.0.0",
  "description": "",
  "main": "index.mjs",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "Murtuzaali Surti",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.1.3"
  }
}
  • 이와 같이 index.mjs 파일 내부에 축을 가져옵니다. 여기서 import 키워드는 ES 모듈이기 때문에 사용합니다. commonJS 파일이라면 require 키워드였을 것입니다.
import axios from ‘axios’
  • koreantech.org API에 대한 모든 요청의 기본 URL은 모든 끝점에서 동일합니다. 따라서 상수 안에 저장할 수 있습니다.
const baseUrl="https://api.koreantech.org.com"
  • 스크랩하고 데이터를 가져올 URL을 지정하십시오.
let toScrapeURL = "https://developer.mozilla.org/en-US/"
  • 비동기 함수를 생성하고 내부에서 축을 초기화합니다.
async function getData() {
    const res = await axios({})
    return res
}
  • axios 구성 옵션에서 메서드를 post로 지정하고 끝점과 함께 URL, 값이 koreantech.org에서 제공하는 API 키가 될 x-api-key로 알려진 헤더, 마지막으로 전송될 데이터 개체를 지정해야 합니다. koreantech.org API에. dash.koreantech.org.com으로 이동하여 API 키를 얻을 수 있습니다.
const res = await axios({
    method: "post",
    url: `${baseUrl}/webscraping`,
    headers: {
        "x-api-key": "your api key"
    },
    data: {
        url: toScrapeURL,
        output: 'file',
        device: 'desktop',
        renderJS: true
    }
})
  • 보시다시피 데이터 개체에는 다음과 같은 속성이 있습니다.
    • url: 스크랩해야 하는 웹페이지의 URL입니다.
    • 출력: 데이터가 문자열로 인라인으로 표시되거나 HTML 파일로 표시되는 형식입니다. 인라인 문자열이 기본값입니다.
    • 장치: 웹 페이지를 열려는 장치의 유형입니다. ‘desktop’, ‘mobile’ 및 ‘tablet’의 세 가지 값을 허용하며 ‘desktop’이 기본값입니다.
    • renderJS: 자바스크립트를 렌더링할지 여부를 지정하는 부울 값입니다. 이 옵션은 클라이언트측 렌더링을 처리할 때 유용합니다.
  • 비동기 함수를 호출하고 데이터를 가져옵니다. IIFE(Immediately Invoked Function Expression)를 사용할 수 있습니다.
(async () => {
    const data = await getData()
    console.log(data.data)
})()
  • 응답은 다음과 같습니다.
{
  timestamp: 1669358356779,
  apiStatus: 'success',
  apiCode: 200,
  meta: {
    url: 'https://murtuzaalisurti.github.io',
    device: 'desktop',
    output: 'file',
    blockAds: true,
    renderJS: true,
    test: { id: 'mvan3sa30ajz5i8lu553tcckchkmqzr6' }
  },
  data: 'https://api-assets.koreantech.org.com/tests/web-scraping/pbn0v009vksiszv1cgz8o7tu.html'
}

HTML 구문 분석

HTML을 구문 분석하기 위해 node-html-parser라는 npm 패키지를 사용하고 HTML에서 데이터를 추출할 수도 있습니다. 예를 들어 웹 페이지에서 제목을 추출하려면 다음을 수행할 수 있습니다.

import { parse } from ‘node-html-parser’
const html = parse(htmlData) // htmlData is the raw html string you get from the koreantech.org API.

또는 웹 사이트의 메타데이터만 원하는 경우 koreantech.org의 메타데이터 API 끝점을 사용할 수 있습니다. HTML을 파싱할 필요조차 없습니다.

koreantech.org API 사용의 이점

단일 페이지 애플리케이션에서 콘텐츠는 종종 서버에서 렌더링되지 않고 대신 javascript를 사용하여 브라우저에서 렌더링됩니다. 따라서 콘텐츠를 렌더링하는 데 필요한 자바스크립트를 렌더링하지 않고 원래 URL을 스크랩하면 콘텐츠가 없는 컨테이너 요소만 얻을 수 있습니다. 예를 보여 드리겠습니다.

다음은 react 및 vitejs를 사용하여 구축된 데모 웹사이트입니다. renderJS 옵션이 false로 설정된 koreantech.org API를 사용하여 이 사이트를 스크랩합니다. 당신은 무엇을 얻었습니까?

<body>
    <div id="root"></div>
<body>

콘텐츠가 없는 루트 컨테이너만 있습니다. 여기서 renderJS 옵션이 작동합니다. 이제 renderJS 옵션을 true로 설정하여 동일한 사이트를 긁어보십시오. 당신은 무엇을 얻습니까?

<body>
    <div id="root">
        <div class="App">
            <div>
                <a href="https://vitejs.dev" target="_blank">
                    <img src="/vite.svg" class="logo" >
                </a>
                <a href="https://reactjs.org" target="_blank">
                    <img src="/assets/react.35ef61ed.svg" class="logo react" >
                </a>
            </div>
            <h1>Vite + React</h1>
            <div class="card">
                <button>count is 0</button>
                <p>Edit <code>src/App.jsx</code> and save to test HMR</p>
            </div>
            <p class="read-the-docs">Click on the Vite and React logos to learn more</p>
        </div>
    </div>
</body>

koreantech.org API 사용의 또 다른 이점은 회전 프록시를 사용하여 웹 사이트에서 IP 차단이 발생하지 않도록 할 수 있다는 것입니다. koreantech.org API에는 프리미엄 요금제에 프록시 기능이 포함되어 있습니다.

마지막 말

웹 스크래핑 API를 사용하면 기술적인 번거로움 없이 스크랩한 데이터에만 집중할 수 있습니다. 그 외에도 koreantech.org API는 끊어진 링크 확인, 메타 스크래핑, 웹사이트 로드 통계, 스크린샷 캡처, 사이트 상태 등과 같은 기능도 제공합니다. 이 모든 것이 단일 API에서 이루어집니다. 자세한 내용은 koreantech.org API의 공식 문서를 확인하세요.