P5.js를 사용하여 REST API와 통신하기

P5.js는 JavaScript를 기반으로한 훌륭한 라이브러리로, 그래픽을 그리거나 애니메이션을 구현하는데 널리 사용됩니다. 그런데 때로는 P5.js 애플리케이션에서 외부 REST API와 통신해야 할 때가 있습니다. 이번 글에서는 P5.js에서 REST API와의 통신을 어떻게 구현할 수 있는지 알아보겠습니다.

1. XMLHttpRequest 사용하기

P5.js에서 REST API와 통신을 구현하기 위해 가장 흔히 사용되는 방법은 XMLHttpRequest 객체를 사용하는 것입니다. 이 객체를 사용하여 서버로 요청을 보내고 응답을 받아올 수 있습니다. 아래는 P5.js에서 XMLHttpRequest를 사용하여 GET 요청을 보내고 응답을 받아오는 예제입니다.

function setup() {
  createCanvas(400, 400);
  
  // GET 요청 보내기
  let xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.send();

  // 응답 받기
  xhr.onload = function() {
    if (xhr.status === 200) {
      let response = JSON.parse(xhr.responseText);
      console.log(response);
    }
  }
}

function draw() {
  background(220);
  // ... 그리기 로직 ...
}

위 예제에서 XMLHttpRequest를 사용하여 GET 요청을 보내고, 응답이 도착하면 xhr.onload 이벤트 핸들러에서 응답을 처리합니다.

2. fetch API 사용하기

P5.js에서 REST API와 통신을 좀 더 간단하게 구현하기 위해 fetch API를 사용할 수도 있습니다. fetch를 사용하면 XMLHttpRequest보다 더 직관적이고 간단하게 REST API와 통신할 수 있습니다. 아래는 fetch API를 사용하여 GET 요청을 보내고 응답을 받아오는 예제입니다.

function setup() {
  createCanvas(400, 400);
  
  // GET 요청 보내기
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

function draw() {
  background(220);
  // ... 그리기 로직 ...
}

위 예제에서 fetch 함수를 사용하여 GET 요청을 보내고, 응답이 도착하면 response.json() 메서드를 통해 JSON 형태로 변환한 후 응답을 처리합니다. fetch 함수는 Promise를 반환하므로, then 메서드를 이용해 비동기적으로 응답 처리를 할 수 있습니다.

3. axios 라이브러리 사용하기

더 간편하게 REST API와 통신하기 위해 axios 라이브러리를 사용할 수도 있습니다. axios는 XMLHttpRequest와 fetch보다 더 사용하기 쉽고 직관적인 API를 제공합니다. 아래는 axios를 사용하여 GET 요청을 보내고 응답을 받아오는 예제입니다.

function setup() {
  createCanvas(400, 400);
  
  // GET 요청 보내기
  axios.get('https://api.example.com/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

function draw() {
  background(220);
  // ... 그리기 로직 ...
}

위 예제에서 axios.get 함수를 사용하여 GET 요청을 보내고, 응답이 도착하면 then 메서드를 통해 응답을 처리합니다. axios는 자체적으로 JSON 파싱을 처리하므로, 응답 객체의 .data 속성을 통해 JSON 데이터에 접근할 수 있습니다.

P5.js에서 REST API와의 통신을 구현하는 여러 가지 방법을 살펴보았습니다. XMLHttpRequest, fetch, axios 등 다양한 방법 중에서 자신에게 가장 편리한 방법을 선택하여 사용하시면 됩니다.