자바스크립트 JSON-RPC의 개념과 사용 방법

10 Sep 2023

javascript

개요

JSON-RPC는 원격 프로시저 호출(Remote Procedure Call, RPC)의 프로토콜 중 하나로, JSON 데이터 형식을 사용하여 네트워크를 통해 함수 호출을 처리하는 방법을 제공합니다. 자바스크립트에서 JSON-RPC를 사용하면 웹 브라우저와 서버 간의 통신을 간편하게 구현할 수 있습니다. 이 글에서는 자바스크립트에서 JSON-RPC를 어떻게 사용하는지에 대해서 알아보겠습니다.

JSON-RPC의 기본 구조

JSON-RPC는 웹 브라우저와 서버 간의 통신을 위해 JSON 데이터 형식을 기반으로 한 프로토콜입니다. 클라이언트는 JSON 형식으로 요청 메시지를 생성하고, 서버는 요청을 처리하고 그에 대한 응답 메시지를 전송합니다. 이때 요청과 응답은 모두 JSON-RPC의 특정 형식을 따라야 합니다.

JSON-RPC의 형식은 다음과 같습니다:

{
  "jsonrpc": "2.0",
  "method": "함수_이름",
  "params": [파라미터_목록],
  "id": 요청_식별자
}

jsonrpc: JSON-RPC 버전을 나타내며 반드시 “2.0”으로 설정합니다.
method: 호출할 함수의 이름을 지정합니다.
params: 함수에 전달할 파라미터의 목록을 배열 형태로 지정합니다.
id: 요청을 구분하기 위한 식별자입니다. 응답 메시지에서도 이 식별자를 사용하여 요청을 매칭합니다.

서버는 요청을 받은 후, 해당하는 함수를 실행하고, 결과를 다음과 같이 응답합니다:

{
  "jsonrpc": "2.0",
  "result": 결과,
  "id": 요청_식별자
}

jsonrpc: JSON-RPC 버전을 나타냅니다.
result: 함수의 실행 결과를 나타냅니다.
id: 요청 식별자와 매칭하기 위한 식별자입니다.

예제 코드

자바스크립트에서 JSON-RPC를 사용하기 위해서는 fetch() 함수나 AJAX를 이용하여 서버로 요청을 전송해야 합니다. 다음은 JSON-RPC를 사용하여 서버에 함수를 호출하는 예제 코드입니다:

// JSON-RPC 요청 생성 함수
function createJsonRpcRequest(method, params) {
  return JSON.stringify({
    jsonrpc: "2.0",
    method: method,
    params: params || [],
    id: Date.now().toString() // 간단하게 현재 시간을 요청 식별자로 사용하는 예시입니다.
  });
}

// 서버로 JSON-RPC 요청 보내는 함수
function sendJsonRpcRequest(url, method, params) {
  const request = createJsonRpcRequest(method, params);

  return fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: request
  })
    .then(response => response.json())
    .then(data => {
      if (data.error) {
        throw new Error(data.error.message);
      }
      return data.result;
    });
}

// JSON-RPC 요청 보내기 예제
sendJsonRpcRequest("http://example.com/api", "add", [1, 2])
  .then(result => {
    console.log("결과:", result);
  })
  .catch(error => {
    console.error("에러:", error);
  });

위의 예제 코드에서 createJsonRpcRequest() 함수를 이용하여 JSON-RPC 요청 메시지를 생성하고, sendJsonRpcRequest() 함수를 이용하여 서버로 요청을 전송합니다. 서버는 요청을 받아 해당 함수를 실행하고 그에 대한 응답을 전송합니다.

결과를 받아와서 처리하기 위해 fetch() 함수를 사용하였으며, 응답의 형식을 JSON으로 변환하여 처리하고, 결과를 반환합니다. 에러 처리를 위해 catch()를 사용하여 발생한 에러를 콘솔에 출력합니다.

결론

JSON-RPC는 자바스크립트를 이용하여 클라이언트와 서버 간의 통신을 간편하게 구현할 수 있는 프로토콜입니다. JSON 형식을 기반으로 하기 때문에 사용하기도 쉽고, 다양한 플랫폼에서 지원하고 있습니다. 이 글에서는 JSON-RPC의 기본 개념과 자바스크립트에서의 사용 방법을 알아보았습니다. JSON-RPC를 사용하면 다양한 웹 애플리케이션에서 서버와의 통신을 효율적으로 처리할 수 있으니, 앞으로 활용해보시기 바랍니다.