[WEB] 웹 훅이란? (feat. slack webhook API)

Web hook 과 Polling

Polling: 엔드포인트에 이벤트가 발생했는지 주기적으로 요청을 보내는 방식 → 비효율적

Webhook: 엔드포인트에서 발생한 이벤트가 우리의 앱에 수신되는 형태 → 이벤트에 대한 핸들러

*엔트포인트란 발생한 이벤트가 어디로 전달되어야 하는가에 대한 것. 한 마디로 이벤트의 목적지이다.

슬랙 API에 incoming webhooks라는 것이 있는데, 이를 통해 외부 시스템에서 슬랙으로 메시지를 쏴줄 수 있다. 즉, 외부 시스템에서 어떤 이벤트가 발생하여 웹 훅이 실행되면 웹 훅 내부에서 슬랙의 웹 훅 엔드포인트로 post 요청을 쏘는 것이다. 이를 통해 슬랙 채널에 메시지를 보낼 수 있다.

이미지 출처 및 참고 블로그

그래서 웹 훅이 뭐야?

웹 훅은 역방향 API라고도 한다. 일반적으로 API는 클라이언트가 서버를 호출하지만, 웹훅의 경우 웹 훅을 서버측에 등록하면 서버에서 특정 이벤트가 발생했을 때 클라이언트를 호출하게 된다.

Slack의 incoming web hook을 통해 간단한 알림 봇 만들기

위의 api를 통해 특정 이벤트가 발생하면 알림을 보내주는 간단한 알림 봇을 만들 수 있다.

우선 알림 봇이 필요한 채널에 들어가서 Incoming WebHooks(수신 웹 후크) 앱을 추가한다.

우리는 위에서 보이는 웹후크 URL만 있으면 알림을 보낼 수 있다.

보내고자 하는 메시지를 postData에 저장해 두었고, headers에는 'Content-Type': 'application/json' 을 꼭 추가해 주도록 한다.

그런 다음 POST 로 요청을 보내기만 하면 된다!

슬랙의 메시지 첨부 파일 부분을 보면 다양한 서식을 지정해 줄 수 있으니 참고하자.

API 테스트 해보기

POSTMAN을 사용해서 API를 손쉽게 테스트할 수 있다. POST 방식으로 요청을 보내야 하므로 선택한 뒤, url에는 아까 기억해둔 웹 훅 url을 넣어준다.

다음으로는 Header에 Content-Type: application/json 을 추가해 준 뒤,

Body에는 메시지 내용을 적으면 된다. 간단하게 테스트 해 볼 예정이므로 슬랙에서 예시로 제공한 메시지를 그대로 복사 붙여넣기 했다.

(만약 붙여넣은 내용에 에러가 뜬다면 따옴표를 잘 확인해보자. 쌍따옴표를 써야 하고 한/영 차이인지는 모르겠지만 기울어져 보이는 따옴표가 아닌( ” ) 정방향의 따옴표( “ )를 사용해야 한다. **)

마지막으로 Send 버튼을 누르면 Incomig web hook을 추가했던 채널로 알림이 오는 것을 확인할 수 있다.

알림 봇으로 사용하려면?

아래의 코드는 간단하게 버튼을 누르면 슬랙으로 누른 사람의 정보를 볼 수 있는 api를 짜고, 그 일부를 가져온 것이다. 해당 코드는 sendMessage라는 함수 내부에 내용이고, /api/user/alerm url로 연결된 라우터에서 sendMessage 함수를 호출하게 된다.

const sendMessage = async ({ userName, userPhone }) => {
	const postData = {
		attachments: [
			{
				title: '알림 봇이 알림을 보냈습니다!',
				pretext: '아래의 유저 정보를 확인해보세요.',
				color: '#ffffff',
				fields: [
					{
						title: '이름',
						value: userName,
						short: true,
					},
					{
						title: '연락처',
						value: userPhone,
						short: true,
					},
				],
			},
	],};

	const res = await axios.post(
		${웹 훅 url},
		postData,
		{
			headers: {
				'Content-Type': 'application/json',
			},
		}
	);
	if (res && res.data) {
		if(res.data === 'ok') {
			return true;
		}
	}
}

exports.sendMessage = sendMessage;
---

// 버튼 클릭시 아래의 url로 axois 요청을 보낸다.
router.post('/api/user/alerm', async (req, res) => {
	try {
		// ... 다른 내용들

		slack.sendMessage({ userName, userPhone });
		return res.json(true);
	} catch {
		return res.json(false);
	}
});

이후 postman을 통해 위의 API를 호출해보자. 캡쳐 화면은 위의 예시와 맞아 떨어지지 않아 주소와 body에 보낼 데이터 값을 편집해서 넣어두었다.

https://{localhost 또는 실제 서비스 되는 주소}/api/user/alerm 의 주소로 보내도록 하고 body에는 필요한 데이터인 userName, userPhone을 넣어준다.

send 버튼을 누르면 요청이 가게 되고, slack.sendMessage() 함수가 실행된다. 이 함수 내부에서 웹 훅을 사용해 슬랙으로 알림을 보낼 수 있고, 알림 보내기에 성공했다면 응답으로 'ok'를 받을 수 있다.

우리는 sendMessage함수 하단에서 위의 응답을 확인해서 성공 시 true를 반환하도록 했으므로 postman에서 하단 응답으로 true가 적혀있는 것을 확인할 수 있다.

• BOJ 36
• Algorithm 12
• CodingTest 11
• Web 9
• Javascript 8
• Vue 7
• React 7
• DBProject 4
• Python 3
• Tech-interview 3
• Express 3
• Next 3
• Github 2
• Django 2
• C 1
• C++ 1
• WebGame 1