https://www.youtube.com/watch?v=x90ES9zTz0s
웹훅이 뭘까?- https://claude.ai/chat/a7536931-df32-45ae-b373-79b948e6de41
웹훅은 "전화 알림"과 비슷해요.
일반적인 방법: 엄마가 집에 오셨는지 계속 창문 밖을 보면서 확인하기 (매우 피곤!) 웹훅 방법: 엄마가 집에 도착하면 직접 "도착했어!" 하고 알려주기 (훨씬 편해!)
Step 1: 기본 개념 이해하기
등장인물 3명:
- 보내는 앱 (예: 유튜브) - 중요한 일이 생기면 알려주는 친구
- 받는 앱 (예: 당신의 디스코드 봇) - 알림을 받고 행동하는 친구
- 웹훅 URL - 알림을 받을 주소 (우편함 주소 같은 것)
예시:
- 유튜브에 새 영상 올라옴 → 자동으로 디스코드에 알림 전송
- 쇼핑몰에서 주문 들어옴 → 자동으로 재고 관리 시스템 업데이트
Step 2: 웹훅 설정하기 (받는 쪽)
2.1 웹훅 URL 만들기
javascript
// 간단한 웹훅 받는 서버 만들기
const express = require('express');
const app = express();
// JSON 데이터를 받을 수 있게 설정
app.use(express.json());
// 웹훅을 받을 주소 만들기
app.post('/webhook', (req, res) => {
console.log('웹훅 받았어요!', req.body);
// "잘 받았어요!" 답장 보내기
res.status(200).send('성공!');
});
app.listen(3000);당신의 웹훅 URL: https://yoursite.com/webhook
2.2 보안 설정하기
비밀번호 만들기 (매우 중요!):
javascript
app.post('/webhook', (req, res) => {
// 비밀 암호 확인하기
const secret = req.headers['x-webhook-secret'];
if (secret !== '나만의비밀암호123') {
return res.status(401).send('누구세요?');
}
// 진짜 친구면 처리하기
console.log('안전하게 받았어요!', req.body);
res.status(200).send('성공!');
});Step 3: 웹훅 보내기 (보내는 쪽)
3.1 이벤트 발생 감지
javascript
// 무언가 중요한 일이 생겼을 때
function onNewOrder(order) {
// 웹훅으로 알려주기!
sendWebhook(order);
}3.2 웹훅 전송하기
javascript
async function sendWebhook(data) {
const webhookUrl = 'https://partner.com/webhook';
try {
const response = await fetch(webhookUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Webhook-Secret': '비밀암호123'
},
body: JSON.stringify({
event: 'new_order',
timestamp: new Date().toISOString(),
data: data
})
});
if (response.ok) {
console.log('웹훅 전송 성공!');
}
} catch (error) {
console.error('전송 실패:', error);
}
}Step 4: 웹훅 데이터 처리하기
4.1 받은 데이터 읽기
javascript
app.post('/webhook', (req, res) => {
const event = req.body.event;
const data = req.body.data;
// 이벤트 종류별로 다르게 처리
if (event === 'new_order') {
handleNewOrder(data);
} else if (event === 'payment_success') {
handlePayment(data);
}
res.status(200).send('처리 완료!');
});
function handleNewOrder(orderData) {
console.log('새 주문!', orderData);
// 재고 줄이기, 이메일 보내기 등
}Step 5: 에러 처리하기 (중요!)
5.1 재시도 로직
보내는 쪽:
javascript
async function sendWebhookWithRetry(data, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
try {
const response = await fetch(webhookUrl, {
method: 'POST',
body: JSON.stringify(data),
timeout: 5000 // 5초 제한
});
if (response.ok) {
return true; // 성공!
}
// 실패하면 잠시 기다렸다가 다시 시도
await sleep(1000 * Math.pow(2, i)); // 1초, 2초, 4초...
} catch (error) {
console.log(`시도 ${i + 1} 실패`);
}
}
console.error('모든 재시도 실패!');
return false;
}5.2 실패한 웹훅 저장하기
javascript
const failedWebhooks = [];
async function sendWebhookSafely(data) {
const success = await sendWebhookWithRetry(data);
if (!success) {
// 나중에 다시 보낼 수 있게 저장
failedWebhooks.push({
data: data,
timestamp: new Date(),
retryCount: 0
});
}
}Step 6: 테스트하기
6.1 간단한 테스트 도구
bash
# 커맨드라인에서 웹훅 테스트
curl -X POST https://yoursite.com/webhook \
-H "Content-Type: application/json" \
-H "X-Webhook-Secret: 비밀암호123" \
-d '{"event":"test","message":"테스트 중!"}'6.2 테스트 페이지 만들기
javascript
// 테스트용 간단한 HTML 페이지
app.get('/test', (req, res) => {
res.send(`
<html>
<body>
<h1>웹훅 테스트</h1>
<button onclick="testWebhook()">웹훅 보내기</button>
<script>
async function testWebhook() {
const response = await fetch('/webhook', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({event: 'test'})
});
alert(response.ok ? '성공!' : '실패!');
}
</script>
</body>
</html>
`);
});Step 7: 실전 예제
예제 1: GitHub 웹훅
javascript
// GitHub에서 새 커밋이 푸시되면 알림 받기
app.post('/github-webhook', (req, res) => {
const event = req.headers['x-github-event'];
if (event === 'push') {
const commits = req.body.commits;
console.log(`새 커밋 ${commits.length}개!`);
commits.forEach(commit => {
console.log(`- ${commit.message} by ${commit.author.name}`);
});
}
res.status(200).send('Thanks GitHub!');
});예제 2: 결제 웹훅
javascript
// 결제 완료 시 처리
app.post('/payment-webhook', (req, res) => {
const { orderId, amount, status } = req.body;
if (status === 'success') {
// 주문 상태 업데이트
updateOrderStatus(orderId, 'paid');
// 고객에게 이메일 보내기
sendConfirmationEmail(orderId);
// 배송 시작
startShipping(orderId);
}
res.status(200).send('처리 완료');
});핵심 팁 정리
✅ 항상 해야 할 것:
- 비밀 키로 보안 확인하기
- 빠르게 응답하기 (200 OK)
- 실패한 웹훅 재시도하기
- 로그 남기기
❌ 하면 안 되는 것:
- 웹훅에서 오래 걸리는 작업하기
- 보안 확인 안 하기
- 에러 처리 안 하기
- 테스트 안 하고 배포하기
요약: 웹훅은 "어떤 일이 생겼을 때 자동으로 알려주는 시스템"이에요. 계속 확인하지 않아도 중요한 일이 생기면 바로 알 수 있어서 매우 편리하답니다!
댓글 없음:
댓글 쓰기