[javascript] SweetAlert와 비밀번호 찾기 기능

24 Nov 2023

javascript

이번 포스팅에서는 SweetAlert라이브러리를 사용하여 비밀번호 찾기 기능을 구현하는 방법에 대해 알아보겠습니다. SweetAlert는 사용자에게 아름답고 유저 친화적인 경고와 알림 창을 제공하는 JavaScript 라이브러리입니다.

SweetAlert 설치

먼저, SweetAlert를 설치해야합니다. 아래의 명령어를 사용하여 npm으로 SweetAlert 패키지를 설치할 수 있습니다.

npm install sweetalert

비밀번호 찾기 기능 구현

비밀번호 찾기 기능을 구현하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

이메일을 입력하는 폼을 제작합니다.
이메일을 입력받고 서버로부터 비밀번호 재설정 이메일을 보내는 요청을 보냅니다.
비밀번호 재설정 이메일을 성공적으로 보냈는지 여부에 따라 SweetAlert로 알림창을 띄웁니다.

// HTML
<form id="password-reset-form">
  <input type="email" id="email" placeholder="이메일을 입력하세요">
  <button type="submit">비밀번호 찾기</button>
</form>

// JavaScript
document.getElementById('password-reset-form').addEventListener('submit', function(e){
  e.preventDefault();
  
  const email = document.getElementById('email').value;
  
  fetch('/api/password-reset', {
    method: 'POST',
    body: JSON.stringify({ email }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if(response.ok) {
      Swal.fire('이메일 전송 성공', '비밀번호 재설정 이메일이 전송되었습니다.', 'success');
    } else {
      Swal.fire('이메일 전송 실패', '이메일 전송 중 오류가 발생했습니다.', 'error');
    }
  });
});

위의 코드에서 SweetAlert는 Swal.fire 함수를 사용하여 알림창을 띄우고 있습니다. 첫 번째 매개변수는 제목, 두 번째 매개변수는 내용, 세 번째 매개변수는 알림창의 유형입니다. 이 예제에서는 성공적일 때는 ‘success’를, 실패할 때는 ‘error’를 사용하였습니다.

마무리

SweetAlert 라이브러리는 사용자에게 직관적이고 사용하기 편리한 알림창을 제공하여 비밀번호 찾기와 같은 기능 구현에 유용하게 사용할 수 있습니다. JavaScript와 함께 SweetAlert를 사용하면 보다 다양한 알림창을 만들어 사용자에게 좋은 사용자 경험을 제공할 수 있습니다.

GitHub 저장소: SweetAlert
공식 문서: SweetAlert 문서

참고: 이 포스팅에서는 SweetAlert2를 사용하였습니다. SweetAlert 버전 1.X을 사용하는 경우 참고 문서를 확인하시기 바랍니다.