[javascript] SweetAlert의 일정 시간마다 자동 실행 기능

24 Nov 2023

javascript

먼저, SweetAlert 라이브러리를 프로젝트에 추가하는 방법부터 알아보겠습니다. SweetAlert는 npm이나 CDN을 통해 설치할 수 있습니다. 여기서는 CDN을 통한 설치방법을 설명하겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SweetAlert Example</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.min.css">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.min.js"></script>
  <script>
    // SweetAlert 사용 예제
    Swal.fire('Hello SweetAlert!', 'SweetAlert 사용법을 알아봅시다', 'success');
  </script>
</body>
</html>

위 코드에서 SweetAlert 라이브러리를 사용하기 위해 먼저 CSS 파일과 JavaScript 파일을 CDN을 통해 로드하고 있습니다. 그리고 Swal.fire() 함수를 통해 SweetAlert 팝업을 생성하고 있습니다.

이제 일정 시간마다 SweetAlert를 자동으로 실행하는 방법을 알아보겠습니다. JavaScript의 setInterval() 함수를 사용하면 일정 시간마다 특정 함수를 반복 실행할 수 있습니다. 이를 이용하여 SweetAlert를 일정 시간마다 실행하는 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SweetAlert Example</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.min.css">
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.2/dist/sweetalert2.min.js"></script>
  <script>
    function showAlert() {
      Swal.fire('Hello SweetAlert!', '일정 시간마다 실행되는 SweetAlert', 'success');
    }
    
    setInterval(showAlert, 2000); // 2초마다 showAlert 함수를 실행합니다.
  </script>
</body>
</html>

위 코드에서 showAlert() 함수는 SweetAlert를 생성하는 코드를 담고 있습니다. 그리고 setInterval(showAlert, 2000) 코드를 통해 2초마다 showAlert() 함수를 실행하도록 설정하고 있습니다.

이제 위 코드를 실행하면 페이지가 로드된 후 2초마다 SweetAlert가 자동으로 실행되는 것을 확인할 수 있습니다.

이와 같이 SweetAlert의 일정 시간마다 자동 실행 기능을 구현할 수 있습니다. 이 기능을 활용하면 사용자에게 주기적으로 정보나 알림을 제공하는데 유용하게 활용할 수 있습니다.

참고 자료:

SweetAlert 공식 문서: https://sweetalert2.github.io/
setInterval() 함수 MDN 문서: https://developer.mozilla.org/ko/docs/Web/API/WindowOrWorkerGlobalScope/setInterval