[javascript] SweetAlert와 jQuery 연동 방법

24 Nov 2023

javascript

SweetAlert는 사용자에게 예쁜 경고창을 제공하는 JavaScript 라이브러리입니다. SweetAlert를 jQuery와 함께 사용하면 더욱 간편하고 편리하게 경고창을 출력할 수 있습니다. 이번 글에서는 SweetAlert와 jQuery를 연동하는 방법에 대해 알아보겠습니다.

SweetAlert 설치하기

먼저, SweetAlert를 사용하기 위해 해당 라이브러리를 설치해야 합니다. SweetAlert는 CDN을 통해 쉽게 설치할 수 있습니다. HTML 파일의 <head> 태그 안에 아래의 코드를 추가하세요.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

jQuery 연동하기

SweetAlert와 jQuery를 연동하기 위해서는 SweetAlert 뒤에 jQuery 라이브러리를 추가로 가져와야 합니다. 아래의 코드를 사용하여 jQuery 라이브러리를 다운로드하거나 CDN을 통해 가져올 수 있습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

SweetAlert와 jQuery 연동하기

SweetAlert와 jQuery를 연동하는 방법은 매우 간단합니다. SweetAlert가 로드된 후에 jQuery와 함께 사용하면 됩니다.

아래의 예시 코드를 참고하여 SweetAlert와 jQuery를 연동해 봅시다.

<!DOCTYPE html>
<html>
<head>
  <title>SweetAlert와 jQuery 연동 예제</title>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // SweetAlert의 경고창을 출력하는 예제
      $('# showAlert').click(function() {
        Swal.fire('Hello!', 'SweetAlert와 jQuery 연동 예제입니다.', 'success');
      });
    });
  </script>
</head>
<body>
  <button id="showAlert">경고창 출력하기</button>
</body>
</html>

위의 코드는 버튼을 클릭하면 SweetAlert 경고창이 나타나는 예제입니다. SweetAlert의 fire 메서드를 사용하여 경고창을 출력하고, jQuery의 click 메서드를 사용하여 버튼 클릭 이벤트를 처리합니다.

이제 SweetAlert와 jQuery를 함께 사용할 수 있는 연동 방법을 알게 되었습니다. SweetAlert를 통해 사용자에게 예쁜 경고창을 보여주고 jQuery를 사용하여 이벤트를 처리할 수 있습니다.

더 많은 SweetAlert 옵션 및 jQuery 이벤트 처리 방법에 대해서는 공식 문서를 참조하시기 바랍니다.

SweetAlert 공식 문서: https://sweetalert2.github.io/
jQuery 공식 문서: https://jquery.com/