웹후크는 다양한 시스템을 통합하고 실시간으로 알림을 보내는 강력한 도구입니다. 이를 통해 기존 API에서 발생하는 것처럼 새로운 것이 있는지 확인하기 위해 지속적인 요청을 할 필요 없이 이벤트가 발생할 때 하나의 애플리케이션이 다른 애플리케이션에 자동으로 알릴 수 있습니다. 이 게시물에서는 Webhook의 작동 방식과 구성 방법을 이해하고 Webhook의 개발 및 테스트를 용이하게 하는 Webhook.site 도구를 사용하는 실제 예를 살펴보겠습니다.

웹후크란 무엇입니까?

간단히 말하면 웹훅은 이벤트가 발생할 때마다 서비스가 특정 URL로 HTTP 요청을 보낼 수 있도록 하는 메커니즘입니다. API를 사용할 때처럼 변경 사항을 확인하기 위해 서버에 반복적으로 쿼리할 필요 없이 웹훅은 이벤트가 발생하자마자 애플리케이션에 알립니다. 이를 통해 시간과 리소스가 절약되고 시스템 간의 상호 작용이 더욱 효율적으로 이루어집니다.

웹훅 사용의 전형적인 예는 결제 서비스입니다. 거래가 완료되면 시스템은 결제 상태를 알리는 웹훅을 애플리케이션에 보냅니다. 여기에서 애플리케이션은 주문 상태 업데이트, 이메일로 영수증 보내기 등의 정보를 처리할 수 있습니다.

웹후크는 어떻게 작동하나요?

1. 웹훅 구성: 알림을 받을 URL을 등록합니다. 이 URL은 웹훅을 보내는 서비스에서 관련 이벤트가 발생할 때마다 호출됩니다.

2. 이벤트 발생: 구성된 이벤트(예: 트랜잭션, 데이터 업데이트, 레코드 생성)가 발생하면 서비스가 등록된 URL에 대한 HTTP 요청을 트리거합니다.

3. 웹훅 처리: 애플리케이션이 이 요청을 수신하고 정보를 처리합니다. 예를 들어 데이터베이스의 데이터를 업데이트하거나 사용자에게 응답을 보내거나 기타 필요한 작업을 수행할 수 있습니다.

4. 요청 응답: 웹훅을 처리한 후 애플리케이션은 요청이 올바르게 수신되고 처리되었음을 알려 주기 위해 HTTP 상태 코드(예: 200 OK)로 응답해야 합니다.

Webhook.site를 사용한 실제 예

실제 애플리케이션에서 웹후크를 구성하기 전에 로컬 또는 개발 환경에서 테스트하는 것이 좋습니다. 이를 위한 훌륭한 도구는 Webhook.site입니다. 웹후크를 제출하여 미리 보고 디버깅할 수 있는 임시 URL을 제공하므로 데이터가 수신되는 방식을 정확하게 확인할 수 있습니다.

Webhook.site를 사용하여 웹훅 수신을 테스트해 보겠습니다.

1. Webhook.site에 액세스 중:

   • Webhook.site로 이동합니다.
   • 사이트에서 자동으로 고유한 URL(예: https://webhook.site/unique-url)을 생성합니다. 이는 알림을 수신하는 데 사용할 URL입니다.

2. 웹훅 전송 구성:

   • 웹훅을 트리거하는 시스템이 있다고 상상해 보세요. Webhook.site에서 제공한 URL로 요청을 보내도록 이 시스템을 구성합니다.
   • 로컬에서 테스트하려면 cURL 또는 Postman과 같은 도구를 사용하여 웹후크 보내기를 시뮬레이션하고 생성된 URL로 요청을 보낼 수 있습니다.

이제 이 URL로 웹훅 전송을 시뮬레이션하는 Node.js 코드를 구현해 보겠습니다.

Node.js의 웹훅 구현 예

다음은 웹훅을 수신하도록 엔드포인트를 구성하는 방법과 axios(또는 다른 HTTP 라이브러리)를 사용하여 웹훅을 보내는 방법의 예입니다.

const express = require('express');
const axios = require('axios');
const app = express();

// Middleware para processar o body das requisições como JSON
app.use(express.json());

// Endpoint que recebe os webhooks
app.post('/webhook-receiver', (req, res) => {
  const event = req.body;

  // Processar o evento (aqui você adiciona a lógica que desejar)
  console.log('Webhook recebido:', event);

  // Retornar um status de sucesso para o serviço que enviou o webhook
  res.status(200).send('Evento processado com sucesso');
});

// Simulando o envio de um webhook para o Webhook.site
const webhookURL = 'https://webhook.site/unique-url';  // Substitua pela sua URL do Webhook.site

const sendWebhook = async () => {
  try {
    const payload = {
      event: 'payment_completed',
      data: {
        orderId: '12345',
        amount: 100.0,
        currency: 'USD'
      }
    };

    const response = await axios.post(webhookURL, payload);
    console.log('Webhook enviado com sucesso:', response.status);
  } catch (error) {
    console.error('Erro ao enviar webhook:', error);
  }
};

app.listen(3000, () => {
  console.log('Servidor rodando na porta 3000');

  // Enviar o webhook após o servidor iniciar
  sendWebhook();
});

이 예에서는:

• 웹훅 수신을 시뮬레이션하는 /webhook-receiver 엔드포인트를 만들었습니다.
• 우리는 axios를 사용하여 Webhook.site로 웹훅 전송을 시뮬레이션하고 가상 결제의 데이터가 포함된 페이로드를 전달합니다.
• Webhook.site는 알림을 수신하고 패널에 요청 콘텐츠를 표시합니다.

웹후크의 모범적인 보안 관행

웹후크에는 데이터를 URL로 직접 전송하는 작업이 포함되므로 몇 가지 보안 예방 조치를 취하는 것이 중요합니다.

1. 원본 검증: 요청이 실제로 예상된 서비스에서 오는지 확인합니다. 많은 서비스에서는 요청의 신뢰성을 검증하는 데 사용할 수 있는 암호화 서명(예: HMAC 사용)을 제공합니다.

2. HTTPS 사용: 항상 HTTPS를 사용하도록 웹훅 엔드포인트를 구성하여 서비스와 애플리케이션 간의 통신이 암호화되도록 합니다.

3. 인증: HTTPS 외에도 일부 애플리케이션에서는 추가 보안 계층으로 인증 토큰 또는 키를 포함하기 위해 웹훅 요청이 필요합니다.

4. 속도 제한: 특정 기간 동안 서버가 처리할 수 있는 요청 수에 대한 제한을 구현하여 짧은 시간 내에 너무 많은 요청으로 애플리케이션이 과부하되는 것을 방지합니다.

웹훅과 웹훅 비교 아피스

사람들은 종종 웹훅을 API와 혼동합니다. 주요 차이점은 다음과 같습니다.

• API: 활성 상태입니다. 애플리케이션은 서버에 요청하고 응답으로 데이터를 받습니다. 정보를 "검색"해야 합니다.
• 웹후크: 수동적입니다. 이벤트가 발생하면 서버는 자동으로 애플리케이션에 정보를 보냅니다. 묻지 않고도 정보를 "수신"합니다.

웹후크는 결제 시스템, 이벤트 알림, 다양한 서비스 간 통합 등 실시간 알림이 필요한 시나리오에서 특히 유용합니다.

결론

웹후크는 다양한 시스템이 실시간으로 자동 통신할 수 있도록 하는 간단하고 효율적인 방법입니다. Webhook.site와 같은 도구를 사용하면 웹훅을 프로덕션에 통합하기 전에 테스트하고 디버깅할 수 있습니다. 또한 모범적인 보안 관행을 따르면 원치 않는 액세스로부터 엔드포인트를 보호할 수 있습니다.

현대적인 애플리케이션을 개발 중이고 다양한 서비스를 통합해야 하는 경우 웹후크는 이들 간의 통신을 자동화하는 탁월한 솔루션입니다.

웹훅에 관해 질문이 있거나 흥미로운 경험이 있다면 댓글로 공유해 주세요!