Webhook에 대해서

시작하며

slack의 webhook 이미지

API는 인터넷 세계에서 세상을 연결하는 기반이 됐다. 가장 일반적으로 접하는 Rest API 외에도 다양한 방법으로 데이터를 송수신하는 방법이 있는데 ( webhook, websocket.. ) 이번 포스팅에서는 webhook에 대해서 알아보려고 한다.

 

API

API는 Application Programming Interface의 약자로 다양한 소프트웨어 간의 상호 작용을 의미한다. 예를 들어 날씨 앱을 만든다고 하자. 날씨 앱을 켜는 순간 기상청으로부터 날씨에 대한 데이터를 제공받고 이를 표시하도록 구현할 텐데, 이때 날씨 앱과 기상청 서버와의 데이터 통신하는 과정을 API를 통해 데이터를 주고받는다고 표현할 수 있다.

 

이런 식으로 날씨 앱(Client)에서 기상청(Server)에 API 요청을 보내 서버에서 응답값을 보내주는 일반적인 방법을 REST API라고 부르며, 일반적으로 많이 접하게 된다. API의 종류는 다양한데, 그중의 하나인 webhook에 대해서 다뤄보도록 하자.

 

Webhook

A webhook is an event-based API endpoint responsible for triggering internal functions to look up information in real-time when a specific event occurs. - snipcart

 

웹훅(Webhook)은 이벤트 기반의 API endpoint라고 한다. 일반적인 REST API 방법은 클라이언트가 서버에 요청을 보내 응답을 받는 방식으로 이루어진다. 하지만 웹훅의 경우 서버에서 특정 이벤트가 발생하면 그것을 캐치하여 클라이언트에게 응답을 보내는 방식이다. 즉, 이벤트를 발생시키는 것은 다른 제 3자가 될 수 있고, 웹훅 서버는 이벤트를 캐치하면 내부적으로 동작하게 되는 것이다.

 

webhook을 이해하기 위해 다른 방법인 API Polling 방법과 비교하며 진행해보자. polling 방법은 정상적으로 데이터를 수신할 때까지 API 서버에 계속적으로 HTTP API를 보내는 것을 의미한다. 이렇게 정기적인 간격으로 API 요청을 보내는 방법은 서버 리소스와 대역폭을 사용하기 때문에 다른 기술이 권장되는 편이다. 

 

webhooks vs polling

어떤 경우에 웹훅을 사용할까? 예시를 몇 개 들면 다음과 같은 상황에서 웹훅을 사용하게 된다.

 

• SNS 업데이트 : 새로운 게시글 추가로 인한 알림
• 주문 및 결제 처리 : 주문이 생성되면 주문 정보를 백엔드로 전달, 백엔드 로직을 자동화
• 실시간 데이터 스트리밍 : 주식 시장 데이터, 날씨 업데이트, 실시간 뉴스 등

 

위 사진에서 오른쪽(Polling)은 주기적으로 Application에서 API server에 요청을 보내는 반면, 왼쪽(Webhook)은 이벤트가 발생하면 server 쪽에서 Application에게 데이터를 제공한다. 여기까지 내용을 살펴보면 대략 어떤 부분에서 웹훅을 사용해야 하는지 감이 오지 않는가? Polling 방식과 Webhook 방식을 비교한 표는 아래와 같다.

 

	Polling	Webhook
Communication Model	Polling 방법은 Pull 받는 방식	Webhook은 Push하는 방식
Request Origin	Polling 요청은 client가 만든다. 일정한 간격으로 새로운 이벤트가 발생했는 지 아닌 지 요청하는 방식	Webhook 요청은 server가 만든다. 웹훅은 자동적으로 이벤트가 발생하면 작동된다.
Resource Efficiency	Polling은 비효율적이고, 필요하지 않을 때에도 요청을 한다.	Webhook 요청은 새로운 정보가 있을 때만 만들어진다.
Real-Time Updates	Polling은 항상 요청 사이에 interval이 있고, 이러한 interval로 인한 실시간 업데이트를 받아오는 데에 딜레이가 생긴다.	Webhook은 실시간으로 작동하는 서버에 기반하여 만들어지기 때문에, 알림에 딜레이가 없다.

 

특정 상황에서 webhook은 굉장히 훌륭한 소프트웨어 기술 중 하나이다. 웹훅은 일반적인 API Request & Response 방법을 이용하여 실시간 데이터를 받아오려는 Polling 방식의 한계점을 극복한 기술로써 적재적소에 사용한다면 좋다.

 

다음은 직접 간단하게 webhook을 구현하는 과정을 나타내었다. 

 

node를 통한 webhook 구현

 이번에는 자바스크립트를 통해서 webhook을 구현하려고 한다. 앞서 말했듯이 웹훅은 이벤트 기반으로 작동한다. 따라서 이벤트를 만드는 서버(event-make-server)와 이벤트를 캐치하여 서버(event-catch-server)를 나누어 구현할 것이다.

 node로 구현하기 때문에 라이브러리는 간단하게 express, body-parser, axios를 쓰도록 한다.

 

기본 세팅

node 환경에서 스크립트를 동작시키기 위해 다음과 같이 세팅한다.

# npm setting
npm init -y

# depedency install
npm install express body-parser axios

 

event-catch-server

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
const PORT = 3000;

app.use(bodyParser.json());

app.post("/webhook", (req, res) => {
  console.log("Received webhook:", req.body);
  // internal service logic ..
  res.sendStatus(200);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

 

event-make-server

const axios = require("axios");

const webhookUrl = "http://localhost:3000/webhook";
const payload = {
  key1: "webhook client",
  key2: "send data",
};

async function getWebhookData(webhookUrl, payload) {
  console.log(await axios.post(webhookUrl, payload));
}

getWebhookData(webhookUrl, payload);

 

실행 결과

 node 런타임을 통해서 이벤트 캐치 서버를 실행 시킨 후, 이벤트를 만드는 스크립트를 실행시키면 다음과 같은 결과가 나온다. 중요한 포인트는 일반적인 Polling 방식에는 Request를 보내는 주체가 Client였다면, Webhook 방식에는 일반적으로 Request를 보내는 주체가 server이다. 

 기술적인 관점만 보자면 단순한 RESTful API에서 Post 메서드 API를 호출하는 쪽이 Client에서 Server로 바뀐 것이고, 이런 하나의 차이점을 확장하여 보다 많은 장점을 누릴 수 있게 되는 것이다.

 

웹훅의 확장성 

These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application. - wikipedia

 

웹훅(These)과 같은 콜백은 제 3자 유저나 개발자에 의해서 관리될 수 있다는 것인데, 웹훅은 이벤트를 캐치하는 API end-point이기 때문에 이벤트의 발생이 분리되어 있다. 웹훅과 같은 시스템은 주로 공지사항을 알리는 데에 유용하게 사용되기 때문에 slack 및 discord bot과 같은 경우 webhook API가 구현이 되어 있다.

 

• slack webhook docs : https://api.slack.com/messaging/webhooks
• discord developer portal webhook docs : https://discord.com/developers/docs/resources/webhook

실시간으로 발생한 이벤트를 전달하는 클라이언트로써 discord bot 및 slack bot을 사용한다면, 위와 같은 공식 webhook docs를 확인하여, custom webhook을 통해 데이터를 전달하는 방법도 좋을 것이다.

 

마치며

웹훅을 쏘는 서버 쪽에서 데이터가 잘 전송되는 지 확인하는 사이트로는 다음과 같은 사이트가 있다.

• webhook.site : https://webhook.site/

Webhook.site - Test, transform and automate Web requests and emails

 

 

참고

• [AWS] API란 무엇입니까? : https://aws.amazon.com/ko/what-is/api/
• [snipcart] Webhook vs. API: How Do They Compare? : https://snipcart.com/blog/webhook-vs-api
• [salesforcecodex] : https://stories.salesforcecodex.com/2022/09/interview-tips/difference-between-webhook-and-api-polling/