React에서 Slack채널에 메세지 보내기(Slack api 최신버전)

반응형

slack 에서 api 를 업데이트 해서 웹에서 슬랙 채널에 메세지를 보내는 방법이 굉장히 간단해졌습니다.

slack api

1. 슬랙 앱 만들기

 

Incoming webhook을 사용하기 위해서는 slack app을 만들어야합니다.

App Name 에 원하는 앱 이름을 넣어줍니다. 저는 이미 있기 때문에 임시로 만들었습니다.

그리고 slack workspace 를 선택해주시면 됩니다.

 

 

 

아래 사진이 있는 곳으로 가서 incoming Webhooks 를 on 해줍니다.

그 아래에 있는 Add New Webhook to Workspace 버튼을 클릭해줍니다.

 

클릭하면 채널을 선택하는 화면이 나오는데, 웹에서 메세지를 보낼 슬랙 채널을 선택해주면 됩니다.

슬랙은 크게 Workspace 로 나뉘고, 그 안에서는 channel 로 구분되고 있습니다. 그래서 메세지를 보낼 특정 채널을 지정해줘야하는 것입니다.

채널을 지정해주면 아래와 같은 화면을 확인할 수 있습니다.

기존에는 메세지를 보낼 채널 리스트를 api channels 를 통해서 받아와서 postMessage api 를 통해서 메세지를 보냈었는데, 저 WebhookUrl 하나로 메세지를 보낼 수 있게 되었습니다.

2. React 프로젝트에서 메세지 보내기

아래 코드에서 url 부분만 사용하시는 분의 webhookurl 을 넣어주시면 sendMessage 함수로 메세지를 보낼 수 있습니다.

import axios from 'axios';

const headers = {
    'Content-Type': 'application/json',
};

export const sendMessage = async ({ text }) => {
    try {
        const { data } = await axios({
            method: 'post',
            url: "https://cors-anywhere.herokuapp.com/" + url , // url에 webhookurl 을 넣어주세요.
            headers,
            data: {
                blocks: [
                    {
                        type: 'section',
                        text: {
                            type: 'mrkdwn',
                            text,
                        },
                    },
                ],
            },
        });
        return data;
    } catch (error) {
        console.error(error);
    }
};

프론트 즉 클라이언트에서 보낼 때는 아마 CORS를 발생시킬텐데요.

CORS를 해결하는 방법중에 프록시 서버를 거쳐서 요청하는 방법이 있는데, 저는 그렇게 해결했습니다.

슬랙 메세지를 보내는 기능은 서비스에서 여러 기능과 조합해서 사용할 수 있을 것 같습니다.

3. 결과

메세지를 보내면 아래와 같이 슬랙의 채널에 메세지가 오는 것을 확인할 수 있습니다.