[javascript] P5.js에서 서버와의 통신을 어떻게 구현하나요?

04 Dec 2023

javascript

P5.js는 JavaScript 기반의 크리에이티브 코딩 라이브러리로서, 웹 애플리케이션 개발에 매우 유용합니다. 서버와의 통신은 P5.js 애플리케이션에서 외부 리소스에 액세스하거나 데이터를 전송하기 위해 중요한 요소입니다. 이번 포스트에서는 P5.js에서 서버와의 통신을 구현하는 방법을 알아보겠습니다.

XMLHttpRequest를 사용한 AJAX 호출

P5.js에서 서버와의 통신을 위해 XMLHttpRequest 객체를 사용할 수 있습니다. 아래는 예시 코드입니다.

function setup() {
  // 서버에 요청을 보낼 URL 설정
  var url = "https://api.example.com/data";

  // XMLHttpRequest 객체 생성
  var xhr = new XMLHttpRequest();

  // 서버 응답을 받았을 때 실행할 함수 지정
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 서버 응답을 json 형식으로 파싱
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    }
  };

  // 서버 요청 전송
  xhr.open("GET", url, true);
  xhr.send();
}

위의 예시 코드에서는 setup 함수 안에서 XMLHttpRequest 객체를 생성하고, 서버로 GET 요청을 보내는 방법을 보여줍니다. 서버의 응답이 성공적으로 도착하면 onload 함수가 실행되어 응답을 처리합니다. 이 코드를 통해 서버로부터 데이터를 받아와서 처리할 수 있습니다.

Fetch API를 사용한 AJAX 호출

XMLHttpRequest 외에도 P5.js에서는 Fetch API를 사용하여 서버와의 통신을 수행할 수도 있습니다. Fetch API는 간편한 사용법과 더 나은 프로미스 기반의 비동기 처리를 제공합니다. 아래는 Fetch API를 사용한 예시 코드입니다.

function setup() {
  // 서버에 요청을 보낼 URL 설정
  var url = "https://api.example.com/data";

  // 서버 요청 전송
  fetch(url)
    .then(function(response) {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("서버 응답 에러");
      }
    })
    .then(function(data) {
      console.log(data);
    })
    .catch(function(error) {
      console.log(error);
    });
}

위의 코드에서는 fetch 함수를 사용하여 서버에 GET 요청을 보내고, 프로미스 체인을 통해 응답을 처리합니다. 응답이 성공적으로 도착하면 JSON 형식으로 응답을 파싱하고 데이터를 콘솔에 출력합니다. 에러가 발생하면 catch 블록에서 에러를 처리합니다.

이처럼 P5.js에서는 XMLHttpRequest와 Fetch API 두 가지 방법으로 서버와의 통신을 구현할 수 있습니다. 각각의 방법은 장단점을 가지고 있으므로 상황에 맞게 선택하여 사용하시면 됩니다.

참고 자료: