[javascript] jQuery를 사용하여 이메일 보내기 및 메시지 알림 구현하기

01 Dec 2023

javascript

이 글에서는 jQuery를 사용하여 웹 페이지에서 이메일을 보내는 기능과 메시지 알림을 구현하는 방법을 알아보겠습니다.

이메일 보내기 기능 구현하기

jQuery를 사용하여 이메일을 보내기 위해서는 서버 측에서 이메일을 전송하는 API가 필요합니다. 이 예제에서는 EmailJS를 사용하여 API를 구성하도록 하겠습니다.

먼저, emailjs 라이브러리를 프로젝트에 추가합니다. HTML 파일의 <head> 태그 안에 다음 코드를 추가합니다.

<script src="https://cdn.emailjs.com/dist/email.min.js"></script>

다음으로, EmailJS의 init 메소드를 호출하여 API 인증 정보를 설정합니다. 이 예제에서는 Gmail을 사용하여 이메일을 보낼 것이므로, Gmail 계정의 사용자 인증 정보가 필요합니다. 이 인증 정보는 EmailJS 웹 사이트에서 생성할 수 있습니다.

<script>
  (function(){
    emailjs.init("your_user_id");
  })();
</script>

이제, 이메일을 보낼 form을 HTML 파일에 추가합니다.

<form id="emailForm">
  <input type="text" id="name" name="name" placeholder="이름">
  <input type="email" id="email" name="email" placeholder="이메일">
  <textarea id="message" name="message" placeholder="메시지"></textarea>
  <button type="submit">이메일 보내기</button>
</form>

마지막으로, jQuery를 사용하여 이메일 폼이 제출되면 이메일을 보내는 기능을 추가합니다.

<script>
  $(function(){
    $("#emailForm").submit(function(event){
      event.preventDefault();
      
      var templateParams = {
        to_name: $("#name").val(),
        from_name: $("#email").val(),
        message: $("#message").val()
      };
      
      emailjs.send("your_service_id", "your_template_id", templateParams)
        .then(function(response) {
          alert("이메일이 전송되었습니다.");
        }, function(error) {
          console.error("이메일 전송 중 오류가 발생했습니다.", error);
        });
    });
  });
</script>

위의 코드에서 “your_user_id”, “your_service_id”, “your_template_id”는 각각 EmailJS 웹 사이트에서 생성한 사용자 ID, 서비스 ID, 템플릿 ID로 대체해야 합니다.

메시지 알림 구현하기

jQuery를 사용하여 메시지 알림을 구현하는 방법은 여러 가지가 있습니다. 예를 들어, Bootstrap의 알림 컴포넌트를 사용하거나, Toast 플러그인을 사용할 수 있습니다.

간단한 메시지 알림을 구현하기 위해 Toast 플러그인을 사용하는 예제를 보겠습니다.

먼저, toastr 라이브러리를 프로젝트에 추가합니다. HTML 파일의 <head> 태그 안에 다음 코드를 추가합니다.

<link href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>

다음으로, 메시지 알림이 나타날 공간을 HTML 파일에 추가합니다.

<div id="notification"></div>

마지막으로, jQuery를 사용하여 메시지 알림을 표시하는 함수를 작성합니다.

<script>
  function showToast(message, type){
    toastr.options = {
      "positionClass": "toast-bottom-right",
      "timeOut": 3000,
      "closeButton": true,
      "progressBar": true,
      "newestOnTop": true
    };

    toastr[type](message);
  }
</script>

위의 코드에서 showToast 함수는 message와 type을 매개변수로 받으며, toastr 플러그인을 사용하여 메시지 알림을 표시합니다. type은 “success”, “info”, “warning”, “error” 중 하나일 수 있으며, 메시지 알림의 스타일을 결정합니다.

이제, 예를 들어 이메일이 성공적으로 전송되었을 때 메시지 알림을 표시하는 코드를 작성할 수 있습니다.

<script>
  $(function(){
    $("#emailForm").submit(function(event){
      event.preventDefault();
      
      var templateParams = {
        to_name: $("#name").val(),
        from_name: $("#email").val(),
        message: $("#message").val()
      };
      
      emailjs.send("your_service_id", "your_template_id", templateParams)
        .then(function(response) {
          showToast("이메일이 전송되었습니다.", "success");
        }, function(error) {
          console.error("이메일 전송 중 오류가 발생했습니다.", error);
          showToast("이메일 전송 중 오류가 발생했습니다.", "error");
        });
    });
  });
</script>

위의 코드에서 showToast 함수를 사용하여 이메일 전송 성공 또는 실패에 따라 메시지 알림을 표시합니다.

이제 jQuery를 사용하여 이메일 보내기 및 메시지 알림 기능을 구현할 수 있습니다. 이 예제 코드를 참고하여 웹 페이지에 필요한 기능을 추가해보세요.