SweetAlert은 JavaScript 기반의 팝업 라이브러리로서, 사용자에게 다양한 스타일과 옵션을 가진 팝업을 제공합니다. 이 글에서는 SweetAlert를 사용하여 확인 후에 페이지를 이동하는 방법을 알아보겠습니다.

SweetAlert 설치

먼저, SweetAlert를 사용하기 위해서는 SweetAlert 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 설치할 수 있습니다.

npm install sweetalert

또는 CDN을 통해 직접 SweetAlert를 불러올 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/sweetalert@11"></script>

SweetAlert 확인 후 페이지 이동

SweetAlert의 확인 버튼을 클릭한 후에 페이지를 이동시키기 위해서는, SweetAlert의 then 함수를 사용하여 페이지 이동 코드를 작성해야 합니다. 아래의 예제에서는 SweetAlert로 확인을 누르면 “https://example.com”로 페이지가 이동하도록 설정해보겠습니다.

Swal.fire({
  title: '이동하시겠습니까?',
  showCancelButton: true,
  confirmButtonText: '확인',
  cancelButtonText: '취소'
}).then((result) => {
  if (result.value) {
    window.location.href = "https://example.com";
  }
});

위의 코드에서 Swal.fire 함수는 SweetAlert 팝업을 생성하고, then 함수는 확인 버튼을 눌렀을 때 실행되는 콜백 함수입니다. 콜백 함수 내에서 window.location.href를 사용하여 페이지를 이동할 수 있습니다.

SweetAlert 팝업에서 취소 버튼을 누를 경우에는 페이지 이동이 실행되지 않습니다.

SweetAlert 팝업 스타일 및 옵션 설정

SweetAlert는 다양한 스타일 및 옵션을 설정할 수 있습니다. 예를 들어, 팝업의 제목, 내용, 버튼 텍스트, 아이콘 등을 변경할 수 있습니다. 자세한 내용은 SweetAlert의 공식 문서를 참고하세요.

결론

SweetAlert의 확인 후 페이지 이동 기능은 사용자에게 페이지 이동을 알리고 확인을 받은 후에 페이지를 이동시킬 때 유용하게 사용할 수 있는 기능입니다. SweetAlert의 다양한 스타일과 옵션을 사용하여 자신의 웹사이트에 맞는 팝업을 만들어보세요.

참고 문서

• SweetAlert 공식 문서