[javascript] SweetAlert와 이메일 전송 기능

24 Nov 2023

javascript

이번 포스트에서는 JavaScript의 SweetAlert 라이브러리를 사용하여 사용자에게 메시지를 보여주고, 이메일을 전송하는 기능을 구현하는 방법에 대해 알아보겠습니다.

SweetAlert란?

SweetAlert는 사용자에게 보다 멋진 경고, 확인, 알림 메시지를 보여주기 위해 디자인된 팝업창 라이브러리입니다. 기본적인 JavaScript 알림창보다 사용성이 높고 디자인적으로도 훨씬 우수합니다. SweetAlert는 쉽게 사용할 수 있으며, 다양한 환경에서 호환성이 좋은 라이브러리입니다.

SweetAlert 설치하기

SweetAlert를 사용하기 위해 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 많은 방법이 있지만 여기서는 npm 패키지 매니저를 통해 설치하는 방법을 소개하겠습니다. 아래 명령을 터미널에서 실행하여 패키지를 설치합니다.

npm install sweetalert

SweetAlert 사용하기

SweetAlert를 사용하기 위해 먼저 해당 라이브러리를 import합니다.

import Swal from 'sweetalert2';

이제 SweetAlert로 메시지 팝업을 만들어보겠습니다. 예를 들어, 사용자에게 간단한 안내 메시지를 보여주는 기능을 구현해보겠습니다.

Swal.fire({
  title: '안내',
  text: '메시지를 보냈습니다!',
  icon: 'success',
});

위의 코드에서 title은 팝업의 제목을 나타내고, text는 메시지 내용을 나타냅니다. icon은 알림창에 보여줄 아이콘 종류를 설정합니다. 위의 예제에서는 성공 아이콘을 사용하였습니다.

이메일 전송 기능 구현하기

이메일 전송 기능을 구현하기 위해서는 서버 측에서 이메일을 보낼 수 있는 API가 필요합니다. 이 예제에서는 Node.js와 Express를 사용하여 간단한 이메일 전송 API를 만들어보겠습니다.

먼저, Express 애플리케이션의 /send-email 엔드포인트를 작성합니다.

const express = require('express');
const nodemailer = require('nodemailer');
const app = express();

app.post('/send-email', (req, res) => {
  const { to, subject, text } = req.body;

  // 이메일 전송 로직 구현

  res.send('이메일이 전송되었습니다.');
});

app.listen(3000, () => {
  console.log('서버가 시작되었습니다.');
});

위 코드에서는 /send-email 엔드포인트를 정의하고, 클라이언트로부터 to, subject, text 파라미터를 받습니다. 이후 이메일을 전송하는 로직을 구현하고, 응답으로 “이메일이 전송되었습니다.”라는 메시지를 보냅니다.

이제 클라이언트 측에서 AJAX 요청을 통해 서버에 이메일 전송 요청을 보낼 수 있습니다.

const sendEmail = () => {
  const emailData = {
    to: 'example@example.com',
    subject: '테스트 이메일',
    text: '안녕하세요, 이메일 전송 테스트입니다.',
  };

  $.ajax({
    url: '/send-email',
    method: 'POST',
    data: emailData,
    success: () => {
      Swal.fire({
        title: '이메일 전송',
        text: '이메일이 성공적으로 전송되었습니다.',
        icon: 'success',
      });
    },
    error: () => {
      Swal.fire({
        title: '이메일 전송',
        text: '이메일 전송에 실패하였습니다.',
        icon: 'error',
      });
    },
  });
};

위의 코드에서는 sendEmail 함수를 통해 AJAX 요청을 보내고, 성공 시 SweetAlert를 사용하여 메시지를 표시합니다. 실패한 경우에도 SweetAlert를 사용하여 실패 메시지를 보여줍니다.

이렇게 SweetAlert와 이메일 전송 기능을 구현하는 방법을 알아보았습니다. SweetAlert를 사용하면 보다 사용자 친화적인 알림창을 만들 수 있으며, 이메일 전송 API와 결합하여 웹 애플리케이션에 다양한 기능을 추가할 수 있습니다. SweetAlert와 이메일 전송 기능을 활용하여 사용자에게 더 좋은 경험을 제공해보세요!

SweetAlert란?

SweetAlert 설치하기

SweetAlert 사용하기

이메일 전송 기능 구현하기

참고 자료