react에서 slack으로 메시지 보내기 (incoming webhook)

✔️ 필요성

react에서 slack으로 메시지를 보내야하는데 22년 4월 기준으로 최신 방법을 기록해본당. slack incoming webhook은 왜이렇게 방법이 많이 바뀌는건지 구글링해봐도 옛날 글 뿐이다ㅠ

 

 

✔️ DOCS

https://api.slack.com/messaging/webhooks

Sending messages using Incoming Webhooks

 

 

기본적으로는 여기 DOCS에 나와있는대로 새롭게 Slack App을 만들고, Incoming Webhooks를 On 해주고,

 

 

Add New Webhook to WorkSpace 버튼을 눌러서 Webhook URL을 받을 수 있다

 

URL이 이런 포맷인 것을 확인해주자!

 

 

✔️ 문제 해결

CORS error다 400에러다 온갖 에러를 다 물리치고 성공한 케이스. content type은 이유는 잘 모르지만 꼭 아래처럼 설정해줘야 가능했다 :)

const SLACK_WEBHOOK_URL = 'https://hooks.slack.com/services/TA...'

export const sendSlackMessage = async (message: any, url: string = SLACK_WEBHOOK_URL) => {
	const headers = {
		'Content-Type': 'application/x-www-form-urlencoded',
	}
	try {
		await axios({
			method: 'post',
			url,
			data: { text: '테스트입니다' },
			headers: headers,
		})
	} catch (err) {
		console.warn(err)
	}
}

 

 

 slack창에 메시지가 아래와 같이 왔다 :)