웹 스크래핑은 웹 페이지에서 데이터를 추출하는 프로세스를 의미합니다. 자바스크립트는 웹 스크래핑을 수행하기 위해 널리 사용되는 프로그래밍 언어입니다. JSON(JavaScript Object Notation)은 데이터를 교환하기 위해 자주 사용되는 형식입니다. 이 글에서는 자바스크립트에서 JSON 데이터를 사용하여 웹 스크래핑하는 방법에 대해 알아보겠습니다.

1. 웹 페이지에서 JSON 데이터 가져오기

웹 페이지에서 JSON 데이터를 가져오기 위해 fetch 함수를 사용할 수 있습니다. fetch 함수는 네트워크 요청을 보내고 응답을 받아오는 작업을 수행합니다. 다음은 fetch 함수를 사용하여 웹 페이지에서 JSON 데이터를 가져오는 예제입니다:

fetch('http://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터를 이용하여 원하는 작업 수행
    console.log(data);
  })
  .catch(error => {
    // 에러 처리
    console.error('Error:', error);
  });

위의 예제에서, fetch 함수는 ‘http://example.com/data.json’ URL에서 JSON 데이터를 가져옵니다. then 메서드를 사용하여 응답을 JSON 형식으로 변환하고, 변환된 JSON 데이터를 이용하여 자바스크립트에서 필요한 작업을 수행할 수 있습니다.

2. JSON 데이터 파싱하기

JSON 데이터를 가져왔다면, 이를 파싱하여 원하는 정보를 추출할 수 있습니다. 자바스크립트에서는 JSON.parse 함수를 사용하여 JSON 문자열을 파싱할 수 있습니다. 다음은 JSON 데이터를 파싱하는 예제입니다:

const json = '{"name":"John", "age":30, "city":"New York"}';
const data = JSON.parse(json);

console.log(data.name); // John
console.log(data.age); // 30
console.log(data.city); // New York

위의 예제에서, JSON.parse 함수를 사용하여 json 문자열을 파싱하고 파싱된 객체를 data 변수에 저장하였습니다. 이후 해당 객체에서 원하는 정보를 추출할 수 있습니다.

3. 웹 스크래핑 예제

이제 웹 스크래핑을 위해 JSON 데이터를 가져오고 파싱하는 과정을 하나의 예제로 살펴보겠습니다. 다음은 ‘http://example.com/users.json’ URL에서 사용자 데이터를 가져와 출력하는 예제입니다:

fetch('http://example.com/users.json')
  .then(response => response.json())
  .then(data => {
    for (const user of data.users) {
      console.log(user.name);
      console.log(user.email);
    }
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 예제에서, fetch 함수를 사용하여 ‘http://example.com/users.json’ URL에서 JSON 데이터를 가져옵니다. 해당 데이터는 사용자 정보를 담고 있는 배열 users를 포함하고 있습니다. for 반복문을 사용하여 각 사용자의 이름과 이메일을 출력하였습니다.

결론

자바스크립트에서 JSON 데이터를 사용하여 웹 스크래핑하는 방법에 대해 알아보았습니다. fetch 함수를 사용하여 웹 페이지에서 JSON 데이터를 가져오고, JSON.parse 함수를 사용하여 JSON 데이터를 파싱하여 원하는 정보를 추출할 수 있습니다. 이를 응용하여 다양한 웹 스크래핑 작업을 수행할 수 있습니다.