[유용한 툴] Slack Incoming Webhook 사용 방법

# Slack(이하 슬랙)은 웹 또는 앱 소프트웨어 개발 협업에서 가장 많이 사용하는 툴 중 하나 입니다.  또한 슬랙에서 제공하는 다양한 API들 또한 슬랙을 더 매력적으로 느끼게 해주는 요소입니다. 그 중에서도 Webhook은 웹이나 앱 개발 환경에서 사용자 이벤트를 추적하거나 알림을 받고 싶은 경우, 복잡한 설정 없이 쉽게 사용할 수 있어 아주 유용합니다. 오늘은 이를 설정하는 방법을 소개하려고 합니다

Sending messages using Incoming Webhooks

(※ 문서가 잘 정리되어 있으므로 위의 페이지를 따라서 진행해도 큰 무리 없이 Webhook을 사용할 수 있습니다)

1. Webhook 활성화 및 Workspace, 채널 선택

- 아래의 이미지와 같이 웹훅을 사용할 앱을 선택합니다. 슬랙 앱 하위 메뉴 중에 아래의 이미지와 같은 Incoming Webhooks를 선택한 후, 활성화 시킵니다

 

- Incoming Webhooks를 활성화 한 후에 스크롤을 아래로 내려보면 다음과 같은 내용이 보입니다. 'Add New Webhook to Workspace' 메뉴를 선택해서 새로운 웹훅 URL을 발급 받으실 수 있습니다. 기존에 발급 받은 웹훅 URL이 있을 경우, URL과 발송 되는 슬랙 채널이 표시됩니다.

- 생성 메뉴를 실행한 후에, 웹훅 메세지를 받을 Workspace와 채널을 선택합니다

- 선택을 완료하면, Webhook을 보내기 위한 URL이 생성 됩니다.

 

2. Webhook 보내기

- Axios나 XMLHttpRequest, Fetch등의 방법을 사용해서 POST 메세지를 보내면 됩니다

const axios = require('axios');

//위에서 생성된 Webhook URL
// https://hooks.slack.com/services/...

const SLACK_WEBHOOK_URL = 'your_slack_webhook_url_here';

async function sendSlackMessage(text) {
  const payload = {
    text: text,
    attachments: [
      {
        title: 'Attachment Title',
        text: 'Attachment content',
        color: 'good', // "good" (green), "warning" (yellow), "danger" (red), or a hex color code (e.g., "#439FE0")
      },
    ],
  };

  try {
    const response = await axios.post(SLACK_WEBHOOK_URL, payload);
    console.log('Message sent to Slack successfully', response.status);
  } catch (error) {
    console.error('Error sending message to Slack', error.message);
  }
}

---