[javascript] SweetAlert의 삭제창 기능

24 Nov 2023

javascript

SweetAlert은 사용자에게 예쁜 경고창을 보여주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 간단하면서도 멋진 경고창을 만들 수 있습니다. 이번에는 SweetAlert를 사용하여 삭제창 기능을 구현하는 방법을 알아보겠습니다.

SweetAlert 설치하기

SweetAlert를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음과 같이 npm을 사용하여 SweetAlert를 설치할 수 있습니다.

npm install sweetalert

SweetAlert 삭제창 구현

SweetAlert를 통해 삭제창을 구현하기 위해서는 다음과 같은 단계를 따르면 됩니다.

SweetAlert 라이브러리를 로드합니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10"></link>
  </head>
  <body>
    <!-- 웹 애플리케이션 내용 -->
  </body>
</html>

삭제 이벤트가 발생했을 때 SweetAlert을 호출합니다. 예를 들어, 삭제 버튼을 클릭했을 때 SweetAlert 창을 띄우는 함수를 작성합니다.

function showDeleteAlert() {
  Swal.fire({
    title: '삭제 확인',
    text: '정말로 삭제하시겠습니까?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '삭제하기',
    cancelButtonText: '취소'
  }).then((result) => {
    if (result.isConfirmed) {
      // 삭제 요청을 처리하는 로직을 추가합니다.
      deleteItem();
      Swal.fire(
        '삭제 완료',
        '항목이 성공적으로 삭제되었습니다.',
        'success'
      );
    }
  });
}

삭제 이벤트가 발생되었을 때, SweetAlert의 확인 버튼이 클릭되면 삭제 요청을 처리하는 로직을 작성합니다. 위 예시 코드에서는 deleteItem() 함수가 삭제 요청을 처리하는 함수라고 가정합니다.

function deleteItem() {
  // 삭제 요청을 처리하는 로직을 작성합니다.
  // ...
}

이제 삭제 버튼 클릭 시 showDeleteAlert() 함수를 호출하도록 이벤트 핸들러를 등록합니다. 예를 들어, jQuery를 사용하여 삭제 버튼에 클릭 이벤트를 추가하는 예시 코드는 다음과 같습니다.

$('.delete-button').on('click', showDeleteAlert);

SweetAlert를 사용하면 간단하면서도 사용자 친화적인 경고창을 손쉽게 구현할 수 있습니다. 위의 예시를 참고하여 SweetAlert를 사용하여 삭제창을 구현해보세요.

참고 자료

SweetAlert 공식 문서: https://sweetalert2.github.io/
SweetAlert GitHub 저장소: https://github.com/sweetalert2/sweetalert2