> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/logic/api-http.md).

# API 호출하기 ( HTTP 요청 로직 )

외부에서 제공하는 API 를 Http 요청 로직을 이용하면 호출 할 수 있습니다. 

이번 가이드에서는 웨이브온 폼에 문의 입력시 [Make.com](https://make.com/) 에서 제공하는 API 를 이용하여 슬랙 메세지를 보내는 방법을 알아 보겠습니다. 이를 응용하면 외부 시스템이 제공하는 다양한 기능(이메일, 문자 등등)을 활용하실 수 있습니다. 

### 1. 외부에서 제공하는 API 확인

외부에서 제공하는 API 명세 확인이 필요합니다. 이번 예제에서는 [make.com](https://make.com/) 이라는 자동화 솔루션을 이용하며, 만약 다른 시스템을 이용 희망하신다면 해당  외부 시스템이 제공하는 API 명세서를 확인이 필요합니다.

API 명세는 아래와 같이 구성되어 있습니다.

* 호출 URL ( 예를들어 <https://api.waveon.io/v1/test-api> )
* 호출 메서드 ( GET, POST )
* 전송 데이터 ( 예를들어 message : "입력 되었습니다." )

[make.com](https://make.com/) 에서는 WebHook 이라는 형태로 API 를 제공합니다.  웹훅을 만드는 상세 과정은 가이드를 참고하시면 되시며 여기에서는 간략하게 소개합니다.

#### 1) make.com 에서 + 버튼을 눌러 Webhooks 를 선택 하여 웹훅을 만듭니다.

<figure><img src="/files/lUmbh0XWdocoQMEU0B8y" alt=""><figcaption></figcaption></figure>

#### 2) Copy address to clipboard 를 눌러 웹훅의 호출 URL 을 복사 합니다.

<figure><img src="/files/F69vk2YACZ1SUqbNS29u" alt=""><figcaption></figcaption></figure>

#### 3) 웨이브온 에서 필요한 곳에 "HTTP 요청" 로직을 추가 합니다. 이번 가이드에서는 폼이 입력 되었을때 실행하려고, 폼을 클릭했을때 넣었습니다.

<figure><img src="/files/IR16CiofJh5Grm55rLSi" alt=""><figcaption></figcaption></figure>

우측 Result 2 를 보시면 "HTTP 요청" 로직이 있습니다. URL 부분이 복사한 URL을 넣고, Query String 으로는 text, 문의 입력 발생 과 같이 넣습니다.&#x20;

또는 다른 엘리먼트의 값을 가져와서 넣을수도 있습니다. value 입력창을 마우스 클릭 해서 커서가 켜지면 아래 스크린샷 에서 보시는 것 처럼 왼쪽에 다른 엘리먼트 요소의 내용을 가져올수 있는 팝업창이 뜹니다.&#x20;

<figure><img src="/files/Hv29tgW4GmS94LmHGcIS" alt=""><figcaption></figcaption></figure>

예를들어 입력 폼의 "문의사항" 에 입력된 내용을 가져오고 싶다면 차례대로 "입력 폼 선택 (AppForm)" -> "문의 사항 선택" -> "value 선택" 을 하면 자동으로 입력이 됩니다.

<div><figure><img src="/files/9yXjxyTpNDpXiw2bcUog" alt=""><figcaption></figcaption></figure> <figure><img src="/files/2I3VW9X1EHkavNyLT0mH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/tEQ9G753BYbGvVDkJDS3" alt=""><figcaption></figcaption></figure></div>

이렇게 설정하시면 제작하신 페이지의 폼에 문의사항이 입력 되었을때 문의사항에 입력된 값이 HTTP 요청을 통해 전송됩니다.

#### 4) 다시 make.com 으로 이동하고 테스트를 진행합니다. "Redetermine data structure" 버튼을 누르고 웨이브온 랜딩페이지에 문의를 한번 입력해 주세요. 그러면  스스로 데이터를 파악 하기 때문에 따로 설정하실 필요가 없습니다.

<figure><img src="/files/fp31FvXHi4CirHgvzU5n" alt=""><figcaption></figcaption></figure>

#### 5) 이제 설정이 완료 되었습니다. 앞으로 로직이 실행될때마다 make.com 의 웹훅이 실행되며 여기서 자유롭게 다른 동작을 추가하실수 있습니다. 저희는 폼에 데이터가 입력 될 때마다 슬랙의 메세지가 전송되도록 설정 하였습니다. make.com 에서는 이메일, 문자 등등 다양한 연동을 지원하기 때문에 원하시는 대로 수정하여 사용 하실 수 있습니다.

<figure><img src="/files/9rPzWW3uzr3APrNN5swb" alt=""><figcaption></figcaption></figure>