[javascript] Cytoscape.js에서 서버 측 데이터와의 상호작용을 구현하는 방법은 무엇인가요?

24 Nov 2023

javascript

// 필요한 패키지를 가져옵니다.
const cytoscape = require('cytoscape');
const axios = require('axios');

// Cytoscape.js 인스턴스를 생성합니다.
const cy = cytoscape();

// 서버에서 데이터를 가져오는 함수를 정의합니다.
async function fetchDataFromServer() {
  try {
    const response = await axios.get('/api/data'); // 서버의 데이터를 가져옵니다.
    const data = response.data; // 가져온 데이터를 변수에 할당합니다.

    // Cytoscape.js에서 데이터를 추가하거나 업데이트합니다.
    cy.json({ elements: data });
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// 페이지 로드 시 데이터를 가져옵니다.
fetchDataFromServer();

위의 예제 코드는 axios 패키지를 사용하여 서버에서 데이터를 가져오는 방법을 보여줍니다. /api/data 엔드포인트로 GET 요청을 보내고, 응답으로 받은 데이터를 Cytoscape.js의 json 메서드를 사용하여 그래프에 추가하거나 업데이트합니다.

이 예제는 간단한 데이터 가져오기의 예시이며, 실제로 서버와의 상호작용은 요구사항에 따라 다를 수 있습니다. 서버에서 데이터를 가져오는 방법은 서버 프레임워크, 데이터베이스 등에 따라 달라질 수 있습니다. 그러므로 실제 구현에 따른 서버와의 통신 방법을 고려해야 합니다.