Chartist는 JavaScript 기반의 강력한 그래프 라이브러리입니다. 이를 사용하여 웹 페이지에서 다양한 종류의 그래프를 생성할 수 있습니다. 그러나 때로는 서버에서 데이터를 가져와 그래프를 업데이트해야 할 수도 있습니다. 이 블로그 포스트에서는 Chartist와 서버 간의 데이터 통신 방법을 알아보겠습니다.
XMLHttpRequest를 사용한 데이터 요청
가장 일반적인 방법은 JavaScript의 XMLHttpRequest 객체를 사용하여 서버로부터 데이터를 요청하는 것입니다. 아래 예제 코드를 통해 간단한 데이터 요청 방법을 확인해 보겠습니다.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 데이터를 가져와서 그래프를 업데이트하는 로직을 작성합니다.
}
};
xhr.send();
위의 코드에서는 /api/data 엔드포인트에 GET 요청을 보냅니다. 요청이 완료되면 onload 이벤트 핸들러가 호출됩니다. 이 중 200 상태 코드인 경우에는 서버에서 받은 데이터를 JSON 형태로 변환하고 그래프를 업데이트하는 로직을 작성할 수 있습니다.
Axios 라이브러리 사용하기
XMLHttpRequest를 사용하는 것이 번거로운 경우에는 Axios라는 간편한 HTTP 라이브러리를 사용할 수도 있습니다. 아래 예제 코드를 통해 Axios를 사용한 데이터 요청 방법을 확인해 보겠습니다.
axios.get('/api/data')
.then(function(response) {
var data = response.data;
// 데이터를 가져와서 그래프를 업데이트하는 로직을 작성합니다.
})
.catch(function(error) {
console.error(error);
});
Axios를 사용하면 Promises를 사용하여 코드를 더 깔끔하게 작성할 수 있습니다. GET 요청이 성공하면 .then() 메소드가 호출되고, 실패하면 .catch() 메소드가 호출됩니다.
SSE(Server-Sent Events) 사용하기
실시간으로 데이터를 수신하는 또 다른 방법은 SSE (Server-Sent Events)입니다. SSE는 서버에서 클라이언트로 데이터를 전송하는 단방향 통신 방법입니다. Chartist와 함께 SSE를 사용하려면 다음과 같은 코드를 작성할 수 있습니다.
var source = new EventSource('/api/data');
source.onmessage = function(event) {
var data = JSON.parse(event.data);
// 데이터를 가져와서 그래프를 업데이트하는 로직을 작성합니다.
};
EventSource 객체를 생성하고 데이터를 수신할 엔드포인트를 지정합니다. onmessage 이벤트 핸들러를 통해 데이터를 수신하고 처리할 수 있습니다.
결론
Chartist와 서버 간의 데이터 통신은 XMLHttpRequest, Axios, SSE와 같은 다양한 방법을 사용할 수 있습니다. 어느 방법을 선택할지는 프로젝트의 요구 사항과 개발 환경에 따라 다를 수 있습니다. 각 방법에 대해 자세히 알아보고 프로젝트에 적합한 방법을 선택해보세요.