웹 크롤링은 인터넷 상의 정보를 수집하거나 분석하기 위해 웹 페이지를 자동으로 탐색하는 작업입니다. 자바스크립트의 fetch API는 웹 크롤링을 수행하는 데 있어서 강력한 도구입니다. 이 블로그 글에서는 fetch API를 사용하여 웹 크롤링을 어떻게 수행하는지 알아보겠습니다.

fetch API란?

fetch API는 브라우저 내장 기능으로, 네트워크 통신을 위한 강력한 메커니즘을 제공합니다. 기본적으로 HTTP 요청을 보내고 응답을 받을 수 있는 기능을 제공하며, JSON, 이미지, 텍스트 등 다양한 리소스를 요청하고 처리할 수 있습니다. fetch API의 간단하고 직관적인 인터페이스는 많은 개발자들이 선호하는 이유 중 하나입니다.

fetch API로 웹 페이지 내용 가져오기

웹 크롤링을 시작하기 위해 fetch API를 사용하여 웹 페이지의 HTML 내용을 가져올 수 있습니다. 아래는 fetch API를 사용하여 특정 URL의 웹 페이지 내용을 가져오는 간단한 예제입니다.

fetch('http://example.com')
  .then(response => response.text())
  .then(html => {
    // 웹 페이지 내용을 처리하는 코드 작성
    console.log(html);
  })
  .catch(error => {
    // 에러 처리 코드 작성
    console.error(error);
  });

위 예제에서는 fetch 함수에 웹 페이지의 URL을 전달하여 서버에 요청을 보내고, 응답을 받은 후에는 .then 메서드를 사용하여 응답을 처리합니다. 첫 번째 .then 메서드에서는 응답 객체의 text 메서드를 호출하여 HTML 내용을 텍스트 형식으로 가져옵니다.

웹 페이지에서 데이터 추출하기

fetch API를 사용하여 웹 페이지의 내용을 가져왔다면, 이제 데이터를 추출하는 작업을 수행할 수 있습니다. 일반적으로 웹 페이지에서 데이터를 추출하기 위해 DOM 조작 기술인 CSS 선택자나 XPath를 사용합니다. 이를 위해 자바스크립트에서는 querySelector나 evaluate와 같은 메서드를 사용할 수 있습니다.

아래 예제는 fetch API를 사용하여 웹 페이지 내용을 가져온 후, 특정 CSS 선택자를 사용하여 웹 페이지에서 특정 요소의 내용을 추출하는 예제입니다.

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

위 예제에서는 DOMParser 객체를 사용하여 HTML 문자열을 파싱한 후, querySelector 메서드를 사용하여 웹 페이지의 h1 요소에서 내용을 추출합니다. 추출한 내용은 textContent 속성을 통해 가져올 수 있습니다.

요약

이번 블로그 글에서는 자바스크립트의 fetch API를 사용하여 웹 크롤링을 수행하는 방법에 대해 알아보았습니다. fetch API를 사용하면 간단하고 직관적인 방식으로 웹 페이지의 내용을 가져오고 필요한 데이터를 추출할 수 있습니다. 웹 크롤링은 다양한 분야에서 유용하게 활용될 수 있으며, fetch API는 이를 효과적으로 수행하기 위한 강력한 도구입니다.

더 많은 fetch API의 기능과 활용에 대해서는 MDN web docs를 참고해주세요.

Happy web scraping!