API and webhook automation

API·웹훅 자동화

Notify a system of an event with a webhook, then act through an API.

···
html
<div class="wh-demo"><div class="wh-row"><div class="wh-box">ORDER<br><b>#4821</b></div><div class="wh-wire"><i></i></div><div class="wh-box">WEBHOOK<br><b id="wh-attempt">ATTEMPT 1</b></div><div class="wh-wire"><i></i></div><div class="wh-box">CRM<br><b id="wh-result">WAITING</b></div></div><div class="wh-log" id="wh-log">EVENT ID 4821 · SENDING</div></div>
css
:root{--font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif}.wh-demo{width:min(94%,650px);font:800 clamp(13px,3.5vmin,16px)/1.25 var(--font-sans)}.wh-row{display:flex;align-items:center}.wh-box{flex:1;min-width:0;text-align:center;border:2px solid var(--line);background:var(--surface);padding:clamp(9px,2.5vmin,23px) 2px}.wh-box b{display:block;color:var(--accent);margin-top:5px}.wh-wire{width:clamp(17px,6vmin,60px);height:3px;background:var(--line);position:relative}.wh-wire i{position:absolute;width:clamp(9px,2vmin,16px);aspect-ratio:1;background:var(--accent);border-radius:50%;top:50%;transform:translateY(-50%);animation:wh-move 2.4s linear infinite}.wh-wire:nth-of-type(4) i{animation-delay:.7s}.wh-log{margin-top:clamp(10px,3vmin,25px);padding:clamp(8px,2vmin,16px);background:var(--fg);color:var(--bg);text-align:center}@keyframes wh-move{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:80%;opacity:0}}
js
const states=[['ATTEMPT 1','WAITING','EVENT ID 4821 · SENDING'],['FAILED','WAITING','TIMEOUT · RETRY QUEUED'],['ATTEMPT 2','WAITING','SAME EVENT ID · RETRY'],['DELIVERED','UPDATED','IDEMPOTENT · ONE RECORD']];let i=0;function render(){document.querySelector('#wh-attempt').textContent=states[i][0];document.querySelector('#wh-result').textContent=states[i][1];document.querySelector('#wh-log').textContent=states[i][2]}render();setInterval(()=>{i=(i+1)%states.length;render()},1100);

A webhook tells another system when an event happens, while an API lets it read data or request an action. Together they can turn a completed order into a customer-record update.

In the demo an order event is delivered, the first attempt fails, and a retry with the same event ID records it only once. Real systems need signature checks, retries, and duplicate handling too.

Receiving a webhook does not prove the follow-up action completed. Track processing status separately to detect loss and repeated work.

When to use

Use it to connect events and actions across systems, including failure and duplicate paths.

Open as page ↗