SweetAlert는 JavaScript로 작성된 경고 창 대화 상자입니다. SweetAlert를 사용하면 사용자에게 시각적으로 매력적인 경고 창을 제공할 수 있습니다. 이러한 경고 창에는 제목, 내용, 아이콘 및 다양한 버튼이 포함될 수 있습니다.

이 글에서는 SweetAlert를 사용하여 경고 창을 표시하고 타이머 기능을 구현하는 방법에 대해 알아보겠습니다.

SweetAlert 라이브러리 가져오기

먼저, SweetAlert를 사용하기 위해 해당 라이브러리를 가져와야 합니다. 아래의 링크를 통해 SweetAlert 라이브러리를 다운로드하거나 CDN을 이용할 수 있습니다.

SweetAlert 다운로드

SweetAlert 경고 창 표시하기

SweetAlert를 사용하여 경고 창을 표시하려면 Swal 객체의 fire 메소드를 호출해야 합니다. 아래는 간단한 SweetAlert 경고 창 예제입니다.

Swal.fire({
  title: "경고!",
  text: "사용자 이름을 입력하세요.",
  icon: "warning",
  confirmButtonText: "확인"
});

위 코드에서 title은 경고 창의 제목을, text는 내용을, icon은 경고 아이콘을, confirmButtonText는 확인 버튼의 텍스트를 설정합니다.

타이머 기능 사용하기

SweetAlert를 사용하여 경고 창을 표시한 후 일정 시간이 지나면 자동으로 닫히도록 타이머 기능을 추가할 수 있습니다. 아래는 타이머 기능을 추가한 예제입니다.

Swal.fire({
  title: "경고!",
  text: "사용자 이름을 입력하세요.",
  icon: "warning",
  confirmButtonText: "확인",
  timer: 3000, // 3초 후 자동으로 닫힘
  timerProgressBar: true, // 타이머 진행 상황 표시
  onClose: () => {
    console.log("경고 창이 닫혔습니다.");
  }
});

위 코드에서 timer는 경고 창이 자동으로 닫히기까지의 시간을 밀리초 단위로 설정합니다. timerProgressBar는 경고 창에 타이머 진행 상황을 표시할지 여부를 설정합니다. onClose는 경고 창이 닫힌 후 실행할 콜백 함수를 정의합니다.

타이머 기능을 사용하면 일정 시간 동안 경고 창을 표시한 후 자동으로 닫히므로, 사용자의 조작이 필요한 경우에 유용합니다.

결론

SweetAlert를 사용하여 경고 창을 표시하고 타이머 기능을 구현하는 방법에 대해 알아보았습니다. 이러한 기능을 활용하면 사용자에게 시각적으로 매력적인 경고 창을 제공할 수 있습니다. 참고로, SweetAlert에는 다양한 옵션과 설정이 있으니 공식 문서를 참조하시기 바랍니다.

참고 문서: SweetAlert 공식 문서