[javascript] SweetAlert와 카카오톡 메시지 전송 기능
이번 글에서는 SweetAlert 라이브러리와 카카오톡 메시지 전송 기능에 대해 알아보겠습니다.
SweetAlert 소개
SweetAlert는 사용자에게 더욱 직관적이고 아름다운 경고 메시지를 제공해주는 JavaScript 라이브러리입니다. 기본 경고창의 디자인과 기능을 업그레이드하여 사용자 경험을 향상시킬 수 있습니다.
SweetAlert 설치
SweetAlert는 npm을 통해 설치할 수 있습니다. 아래의 명령어를 사용하여 SweetAlert를 프로젝트에 추가합니다.
npm install sweetalert
SweetAlert 사용법
SweetAlert를 사용하려면 import 문을 사용하여 라이브러리를 가져와야 합니다. 다음은 SweetAlert를 사용하여 경고 메시지를 표시하는 간단한 예제입니다.
import Swal from 'sweetalert';
Swal.fire({
title: '알림',
text: '메시지를 전송하시겠습니까?',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: '전송',
cancelButtonText: '취소'
}).then((result) => {
if (result.isConfirmed) {
// 전송 처리 로직 추가
sendKakaoTalkMessage();
}
});
위 예제에서는 SweetAlert의 fire 함수를 호출하여 경고 메시지를 표시하고, 확인 버튼을 클릭하면 sendKakaoTalkMessage 함수를 호출하여 카카오톡 메시지를 전송합니다.
카카오톡 메시지 전송 기능
카카오톡 메시지 전송은 KakaoTalk API를 사용하여 구현할 수 있습니다. 아래는 Node.js에서 카카오톡 메시지를 전송하는 간단한 예제입니다.
import axios from 'axios';
function sendKakaoTalkMessage() {
const apiUrl = 'https://kapi.kakao.com/v2/api/talk/memo/default/send';
axios.post(apiUrl, {
template_object: {
object_type: 'text',
text: '안녕하세요, 카카오톡 메시지입니다.'
}
}, {
headers: {
'Authorization': 'Bearer YOUR_KAKAOTALK_ACCESS_TOKEN'
}
}).then((response) => {
console.log(response.data);
}).catch((error) => {
console.error(error);
});
}
위 예제에서는 axios를 사용하여 카카오톡 API에 POST 요청을 보내고, YOUR_KAKAOTALK_ACCESS_TOKEN을 사용자의 액세스 토큰으로 대체합니다. text 속성에 원하는 메시지를 입력하여 카카오톡 메시지를 전송할 수 있습니다.