[javascript] SweetAlert와 회원 정보 수정 기능

24 Nov 2023

javascript

회원 정보를 수정하는 기능을 구현할 때, SweetAlert를 사용하여 사용자에게 경고창을 보여줄 수 있습니다. SweetAlert는 사용자에게 더 강력한 시각적 효과를 제공하며, 보다 사용자 친화적인 경고창을 구현할 수 있게 해줍니다.

SweetAlert란?

SweetAlert는 JavaScript로 작성된 경고창 라이브러리로, 사용자로 하여금 액션을 취하기 전에 꼭 필요한 정보를 제공하고, 경고 메시지의 디자인적인 면에서도 기본 브라우저의 경고창과는 다른 강력한 시각 효과를 제공합니다.

SweetAlert의 사용을 위해, SweetAlert 공식 사이트에서 최신 버전의 스크립트 파일을 다운로드하고 HTML의 <head> 태그 안에 추가해야 합니다.

회원 정보 수정 기능

회원 정보 수정 기능을 구현하기 위해, 다음과 같은 코드를 작성할 수 있습니다.

// 회원 정보 수정 버튼 클릭 이벤트
document.getElementById('editButton').addEventListener('click', function() {
  // SweetAlert로 경고창 생성
  swal({
    title: "회원 정보 수정",
    text: "정말로 회원 정보를 수정하시겠습니까?",
    icon: "warning",
    buttons: true,
    dangerMode: true,
  })
  .then((willEdit) => {
    if (willEdit) {
      // 회원 정보를 수정하는 로직 추가
      swal("회원 정보가 수정되었습니다.", {
        icon: "success",
      });
    } else {
      swal("회원 정보 수정이 취소되었습니다.");
    }
  });
});

위 코드에서 editButton은 회원 정보 수정 버튼의 ID이며, swal() 함수를 호출하여 SweetAlert 경고창을 생성합니다. 경고창이 보여지고 사용자가 확인 또는 취소를 선택하면, then() 메서드가 호출되며 사용자가 어떤 액션을 취했는지에 따른 콜백 함수를 처리할 수 있습니다. 회원 정보를 수정하고 나면, SweetAlert 경고창을 통해 정보가 수정되었다는 안내 메시지를 사용자에게 보여줍니다.

SweetAlert란?

회원 정보 수정 기능

참고 자료