자바스크립트에서 JSON 데이터를 사용하여 웹 크롤링 데이터를 처리하는 방법

10 Sep 2023

javascript

웹 크롤링은 인터넷 상의 데이터를 수집하고 분석하는 프로세스를 말합니다. 크롤링한 데이터를 처리하기 위해 자바스크립트에서는 JSON(JavaScript Object Notation) 데이터를 사용할 수 있습니다. JSON은 데이터를 저장하고 전송하기 위한 경량화된 형식으로 널리 사용되며, 자바스크립트에서 내장된 JSON 객체를 활용하여 쉽게 데이터를 처리할 수 있습니다.

JSON 데이터 불러오기

JSON 데이터를 처리하기 위해서는 먼저 데이터를 불러와야 합니다. 웹 크롤링을 통해 얻은 JSON 데이터를 자바스크립트로 가져오는 방법을 알아보겠습니다.

// JSON 데이터가 있는 URL
const url = 'https://example.com/data.json';

// AJAX를 사용하여 JSON 데이터 가져오기
fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터를 가공하거나 사용하는 로직 작성
    console.log(data);
  })
  .catch(error => {
    console.error('데이터를 가져오는데 실패했습니다: ', error);
  });

위 코드에서는 fetch 함수를 사용하여 URL에서 JSON 데이터를 비동기적으로 가져옵니다. 가져온 데이터는 response.json() 메서드를 통해 JSON 형식으로 변환되고, 이후 then 메서드를 사용하여 데이터를 가공하거나 필요한 처리를 할 수 있습니다.

JSON 데이터 처리하기

JSON 데이터를 성공적으로 가져왔다면, 이제 해당 데이터를 원하는 형태로 가공하고 활용할 수 있습니다. 예를 들어, 웹 크롤링한 데이터에서 특정 정보를 추출하거나 필터링하는 방법을 알아보겠습니다.

// JSON 데이터 가공하기
fetch(url)
  .then(response => response.json())
  .then(data => {
    const filteredData = data.filter(item => item.price > 10000);
    const formattedData = filteredData.map(item => {
      return {
        name: item.name,
        price: item.price * 0.9
      };
    });

    console.log(formattedData);
  })
  .catch(error => {
    console.error('데이터를 가져오는데 실패했습니다: ', error);
  });

위 코드에서는 가져온 JSON 데이터를 필터링하여 가격이 10000보다 큰 데이터만 추출한 후, 각 데이터의 가격을 10% 할인된 가격으로 변환하여 새로운 형태의 데이터로 가공하고 있습니다.

JSON 데이터 활용하기

JSON 데이터를 가져오고 처리했다면, 이제 해당 데이터를 원하는 방식으로 활용할 수 있습니다. 예를 들어, 데이터를 웹 페이지에 동적으로 표시하거나 다른 서비스와 연동하여 활용하는 방법을 살펴보겠습니다.

fetch(url)
  .then(response => response.json())
  .then(data => {
    const table = document.getElementById('data-table');

    data.forEach(item => {
      const row = document.createElement('tr');
      const nameCell = document.createElement('td');
      const priceCell = document.createElement('td');

      nameCell.textContent = item.name;
      priceCell.textContent = item.price.toLocaleString();

      row.appendChild(nameCell);
      row.appendChild(priceCell);
      table.appendChild(row);
    });
  })
  .catch(error => {
    console.error('데이터를 가져오는데 실패했습니다: ', error);
  });

위 코드에서는 JSON 데이터를 테이블 형태로 표시하는 예를 보여줍니다. 데이터를 가져와서 행과 열로 변환하여 동적으로 <table>에 추가하는 방식으로 데이터를 시각적으로 표현하고 있습니다.

결론

자바스크립트에서 JSON 데이터를 사용하여 웹 크롤링 데이터를 처리하는 방법을 알아보았습니다. JSON 데이터를 불러오고 처리한 후, 원하는 형태로 가공하거나 활용할 수 있습니다. 이를 통해 수집한 데이터를 효율적으로 활용하여 다양한 서비스나 분석에 활용할 수 있습니다.

이외에도 JSON 데이터를 다루는 다양한 기능과 라이브러리가 존재하므로, 프로젝트나 요구사항에 맞게 적절한 방법을 선택하여 활용해보시기 바랍니다.