[웹디자인] 예쁜 Alert 창을 사용하자! SweetAlert2

자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다.

Alert는 사용자에게 알림을 주고자 할 때 사용하는데요.

자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공하고 있습니다.

하지만 우리는 이런 알림창보다 더 예쁜 알림 창을 원하죠.

SweetAlert2!!

sweetalert2.github.io/

해당 링크로 들어가면 사이트가 워낙 관련 내용을 잘 설명해줘서 제가 뭐 자세히 설명해 드릴 것이 없지만,

기본적으로 어떤 기능이 있는지 간단하게 소개해 드리겠습니다.

1. 세팅하기

1) npm으로 설치하기

npm에 다음과 같이 입력하면 SweetAlert2가 설치됩니다.

npm install sweetalert2
yarn add sweetalert2

2. 예쁜 기본 Alert 사용하기

기본적으로 Alert 형식을 사용하고 싶다면 아래의 코드를 참조하면 되겠습니다.

$().ready(function () {
	$("#alertStart").click(function () {
		Swal.fire({
        		icon: 'success', // Alert 타입
			title: 'Alert가 실행되었습니다.', // Alert 제목
			text: '이곳은 내용이 나타나는 곳입니다.', // Alert 내용
		});
	});
});

3. Toast로 사용하기

SweetAlert를 사용하다 보면 창이 너무 크다는 생각을 하실 수 있습니다.

"조금 작은 알림 창이 있다면 어떨까?"라는 생각이 드시는 여러분을 위해 toast 기능을 알려 드리겠습니다.

const Toast = Swal.mixin({
    toast: true,
    position: 'center-center',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

Toast.fire({
    icon: 'success',
    title: 'toast 알림이 정상적으로 실행 되었습니다.'
})

P.S. SweetAlert2 각 타입 소개

SweetAlert2에는 아래와 같이 5가지 타입을 지원하기 때문에 용도에 맞게 잘 활용하시면 되겠습니다.