저는 웹훅이 처음이라니까요?

안녕하세요! 조엘입니다!

"처음이라니까요" 시리즈 아홉 번째 토픽은 웹훅입니다. 🎡🎡
우테코 레벨3는 프로젝트 기획부터 개발까지 경험해보도록 구성이 되어있는데요!
이번 프로젝트를 경험하면서 웹훅이라는 것을 많이 썼어요.

"깃헙에서 PR이 머지되면 젠킨스가 돌아가도록 웹훅을 사용하자!"
"중요한 에러가 터지면 슬랙에 알림을 주도록 웹훅을 사용하자!"

팀원들과 함께 웹훅을 사용해봤지만, 사실 전 웹훅이 뭔지 몰랐답니다. 😅
이번 기회에 한 번 정리해보도록 할게요!


*** 웹훅이란? ***
웹훅의 정의부터 알아봅시다. 위키피디아가 정의한 웹훅은 다음과 같아요.

A webhook in web development is a method of augmenting or altering the behavior of a web page or web application with custom callbacks. These callbacks may be maintained, modified, and managed by third-party users and developers who may not necessarily be affiliated with the originating website or application. The term "webhook" was coined by Jeff Lindsay in 2007 from the computer programming term hook.[1]
The format is usually JSON. The request is done as an HTTP POST request.

웹훅은 웹 개발 방법으로, 커스텀 콜백을 활용하여 웹 사이트의 행동을 보강하거나 변경하는 방법입니다.
이 콜백들은 웹 사이트와 직접적으로 관련이 없는 제 3자에 의해 유지되거나, 수정되거나, 관리될 수 있습니다.
요청은 HTTP POST 방식으로 이뤄지며, 주로 JSON을 활용합니다.

웹 사이트의 행동을 보강하거나 변경한다는데, 무엇이 부족해서 웹훅이 등장했을까요? 🤔
우리가 일반적으로 사용하는 웹 사이트의 어떤 문제를 해결하고자 등장했을까요? 🤔


*** 왜 필요하지? ***
웹훅은 웹앱에서 발생한 이벤트 정보를 "실시간"으로 제공하기 위해서 필요해요.

REST API로 구축된 웹 서비스의 경우, 하나의 요청에 따라 하나의 응답을 제공해요.
이러한 구조로 인해 피치 못하게 발생하는 문제들이 있었는데요.
어떠한 이벤트가 발생했는지를 조회하기 위해서는 서버로의 요청이 선행되어야 했던 것이죠.

예시를 한 번 들어볼게요.
서버에 예상치 못한 예외가 발생했을 때, 개발자인 제가 어떻게 이를 알 수 있을까요?

1번 방법으로, 예외 상황을 확인하는 백엔드 API를 구축하는 방법이 있어요.
해당 API로 요청을 보내 서버에 예상치 못한 예외가 발생했는지를 조회해볼 수 있어요.
하지만 요청을 보내야 응답을 받을 수 있다는 점이 단점이에요.
궁금할 때마다 서버에 요청을 보내야 하니 비효율적이고요.

2번 방법으로, 예외 상황이 발생하면 웹훅을 통해 알려주는 것이에요.
서버 측에서 직접 개발자가 소식을 받아볼 수 있는 엔드포인트로 요청을 보내는 것이죠.
개발자는 가만히 있다가 서버가 직접 요청을 보내오면 예외 상황을 확인하면 되는 것이에요.

1번 방법 Polling, 2번 방법 Webhook

서버가 요청을 보내는 클라이언트의 역할을 한다고 느껴지기도 하는데요!
그러다 보니 웹훅을 Reverse API, HTTP PUSH API, Web Callback 등으로 부르기도 해요.

많은 사람들이 사용하는 메신저 Slack에서 알맞은 엔드포인트에 요청이 들어오면 알림을 주도록 웹훅을 지원하는데요.
실습을 통해 알아보아요. 👏👏


*** Slack 웹훅 사용해보기 ***
검색 기능을 만들고 있는데, 사용자들이 어떠한 검색어를 입력했는지 실시간으로 받아보고 싶어요.
이를 Slack 웹훅을 사용해서 구현해보도록 할게요!

1. Slack에서 'Slack 찾아보기 > 앱' 선택

2. '내 도구와 연결' 창에서 'Incoming WebHooks' 검색 후 클릭

3. Slack 웹 페이지에서 'Incoming WebHooks' 앱 추가 승인

4. 웹훅 URL을 할당받기 (해당 URL이 외부에 공개되면 Slack 측에서 웹훅 URL을 변경합니다!)

5. 웹훅 URL에 어떠한 방식으로 요청을 보내야 하는지 살펴보기 (JSON 페이로드에 'text'를 담아 POST 방식 전송)

6. 백엔드 로직에 사용자 검색어를 담은 POST 요청을 보내도록 구현하기

@Service 
public class WebhookService { 
    @Value("${slack.url}") 
    private String slackUrl; 
    
    private final RestTemplate restTemplate = new RestTemplate(); 
    
    public void search(String message) { 
    	sendSlackMessage(message); 
    } 
    
    private void sendSlackMessage(String message) { 
    	Map<String, String> body = new HashMap<>(); 
        body.put("text", message + " 검색되었습니다."); 
        restTemplate.postForObject(slackUrl, body, String.class); 
    } 
}

다음과 같은 스텝을 거치면, Slack 웹훅을 활용한 검색 기록 알리미가 완성됩니다!

 

참고

- https://leffept.tistory.com/329
- https://sddev.tistory.com/9
- https://simsimjae.medium.com/%EC%9B%B9%ED%9B%85%EC%9D%B4%EB%9E%80-e41cf1ba92f0