웹 스크래핑은 웹 페이지나 웹 애플리케이션에서 데이터를 추출하는 프로그래밍 기술입니다. 자바스크립트의 fetch API를 사용하면 간편하게 웹 스크래핑을 할 수 있습니다. fetch API는 비동기적으로 네트워크 요청을 보내고 응답을 처리하는 기능을 제공합니다.

fetch API 소개

fetch API는 브라우저에서 제공하는 기본적인 HTTP 요청을 처리하는 API입니다. 다음은 fetch API로 GET 요청을 보내는 예제입니다.

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 예제에서는 fetch 함수에 URL을 인자로 전달해 GET 요청을 보냅니다. 응답은 Promise 객체로 반환되며, then 메소드를 사용해 응답 데이터를 처리합니다. response.json() 메소드는 비동기적으로 응답 데이터를 파싱하여 자바스크립트 객체로 변환합니다.

웹 스크래핑 예제

다음은 fetch API를 사용해 간단한 웹 스크래핑을 수행하는 예제입니다. 예제에서는 ‘https://example.com’ 웹 페이지에서 제목과 본문을 추출합니다.

fetch('https://example.com')
  .then(response => response.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const title = doc.querySelector('h1').innerText;
    const body = doc.querySelector('p').innerText;
    console.log('Title:', title);
    console.log('Body:', body);
  })
  .catch(error => console.error(error));

위 예제에서는 fetch 함수로 ‘https://example.com’ 웹 페이지를 가져옵니다. 응답은 response.text() 메소드로 텍스트 형태로 변환되어 반환됩니다. 이 텍스트를 DOMParser를 사용해 HTML 문서로 파싱한 뒤, querySelector 메소드를 사용해 원하는 요소를 선택합니다. 마지막으로 선택된 요소의 innerText 속성을 통해 제목과 본문을 추출합니다.

요약

자바스크립트 fetch API를 사용하면 간단하게 웹 스크래핑을 할 수 있습니다. fetch 함수를 사용해 네트워크 요청을 보내고, 응답 데이터를 Promise 객체로 처리하면 됩니다. 이를 통해 웹 페이지의 데이터를 추출하여 활용할 수 있습니다. 하지만 웹 스크래핑은 사이트의 이용 약관에 따라 제한을 받을 수 있으므로, 항상 조심해야 합니다.