슬랙 웹훅 연동하기 - doesn't have a bot user to install 오류 해결 및 typescript 연동 예제

웹훅이란? 

한 시스템에서 이벤트가 발생했을 때, 다른 시스템에 자동으로 알림이나 데이터를 보내주는 방법

 

웹훅은 여러 플랫폼 (슬랙,텔레그램,디스코드등)에서 제공을 하고 있지만 그중에서 slack의 웹훅 연동을 해보겠습니다.

1.메세지 수신용 채널 생성

우선 웹훅으로 전달 될 메세지를 수신받을 채널을 하나 생성해줍니다.

채널생성

---

2.https://api.slack.com/apps 슬랙 페이지 접속

---

3.From scratch로 앱생성

• from a manifest는 이미 기존에 있는 메니페스트 설정을 바탕으로 웹훅을 설정하는 페이지이고 
• from scratch는 처음부터 ui를 통해서 웹훅의 설정을 하는 방식입니다.

ui 설정모드

 

---

4.생성할 App 이름 설정

슬랙 웹훅의 명칭을 지정해주시고 워크스페이스를 아래에서 선택하여 지정해주시면 됩니다.

app 생성

 

---

5. Incoming Webooks 클릭 후 Activate On으로 변경

Incoming Webooks는 외부에서 슬랙으로 데이터를 보내는 이벤트 설정을 관리하는 설정입니다.

초기에는 이 설정이 Off로 되어 있으니 Incoming Webooks을 클릭한뒤 Activate On 설정으로 변경해주시면 됩니다.

Incoming webhooks on

---

6.Add new Webhook 클릭

Add new Webhook 버튼은 해당 웹훅의 이벤트로 수신받는 데이터를 어떠한 채널에 연동 시킬것인지 설정하는 화면입니다.
채널 설정을 위해서 해당 버튼을 클릭하시면 됩니다.

add new webhook 클릭

 

 

---

6."doesn't have a bot user to install" 오류 발생

doesn't have a bot user to install의 원인은  해당 Slack 앱(App)에 봇 사용자(Bot User)가 구성되어 있지 않기 때문입니다.

Slack의 앱 개발 방식에서는 Incoming Webhook을 사용할 때도 앱에 봇 사용자를 연결하도록 요구하는 경우가 많습니다.
봇 사용자가 있어야 Slack 워크스페이스에 앱을 설치하고 메시지를 게시할 수 있는 권한을 부여할 수 있기 때문입니다.

사용자가 Slack App을 생성했지만, 좌측 메뉴의 App Home으로 이동하여 봇의 Display Name을 설정하는 단계를 건너뛰거나 빠뜨린 경우 Slack은 앱에 봇 사용자가 제대로 구성되지 않았다고 판단합니다.

"doesn't have a bot user to install" 오류 발생

---

6-1. doesn't have a bot user to install 오류 해결

Display Name을 지정하는 것은 Slack API 상에서 앱과 연결된 봇 사용자 객체를 생성하고 구성하게 됩니다.  이름을 설정하고 저장해야 비로소 앱에 설치할 봇 사용자가 존재하게 되어 오류가 나지 않습니다.

display name 생성

---

7.채널 연동

위의 오류를 해결하고 나게 되면 다시 <6>의 "Add new Webhook" 클릭을 하게 되면 아래와 같이 채널연동화면이 제대로 뜨게 됩니다. 
이때 아까 채널 연동 테스트를 위해 만들어 두었던 "개인테스트" 채널을 설정하고 install 웹훅연동 버튼을 클릭하면 됩니다.

채널연동

---

8.웹훅 url 카피 후 테스트 메세지 전송

위의 과정이 제대로 되었다면 웹훅 url이 정상적으로 생성되었을 겁니다. 해당 copy 버튼을 눌러서 테스트를 진행하면 됩니다.
제대로 연동이 되었는진 아래의 타입스크립 예제를 통해 보겠습니다.

ㅇurl 복사

---

9.타입스크립트 슬랙 웹훅전송 예제

위에서 복사한 url을 webhookUrl변수에 넣으면 됩니다. 똑같이 api 호출하는 형식으로 호출하시면 됩니다.

호출 방식은 post로 호출하셔야하고 payload에 전송하고싶은 텍스를 넣으면됩니다.

이제 코드를 한번 실행해서 제대로 동작하는지 확인을 해보겠습니다.

const webhookUrl =

  "https://hooks.slack.com/내 url 넣기";

async function main() {

  const payload = { text: "Hello, World!" };

  const response = await fetch(webhookUrl, {

    method: "POST",

    headers: { "Content-Type": "application/json" },

    body: JSON.stringify(payload),

  });

  const bodyText = await response.text();

  if (!response.ok) {

    throw new Error(

      `Slack Webhook 요청 실패: ${response.status} ${response.statusText} - ${bodyText}`

    );

  }

  console.log("Slack 메시지 전송 성공", bodyText || response.status);

}

main().catch((err) => {

  console.error(err);

  process.exit(1);

});

---

10.테스트 결과

위의 코드를 실행하여 슬랙의 테스트 결과화면입니다. 이전의 위에서 연동한 개인테스트 채널에 방금 실행한 스크립트 코드로 테스트했을 때 정상적으로 "Hello, World!"가 수신된걸로 보아 웹훅이 연동이 제대로 동작한것을 확인 할 수 있습니다.

"Hello, World!"가 2개 있는건 제가 2번실행해서 그렇습니다.

---

이로써 간단하지만 간단하지않은 슬랙 웹훅 설정입니다. 이걸 통해서 에러 실시간 모니터링이라던가 각종 모니터링 혹은 이벤트들을 바로바로 알림을 통해서 전달받을수 있어 다양한 활용이 가능한 웹훅 기능입니다.
실무에서도 적용시키기 매우 편리해서 개인적으로도 자주 사용중입니다