Sweetalert로 예쁜 알림창, 경고창을 띄우자

기존에 Alert는 되게 구렸다.

 

기존Alert

 

SweetAlert

구린걸 싫어하는 개발자들이 SweetAlert이라는 것을 만들었다.

 

https://sweetalert2.github.io

SweetAlert2

 

---

 

사용법과 예시는 공식페이지에 잘 나와있어서 간단하게만 소개하겠다.

 

우선 script 태그를 선언해서 sweetalert 패키지를 다운로드 받아주자.

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

 

그리고는 사용하고 싶은 디자인을 선택한다.

https://sweetalert2.github.io/#examples

여기에서 Try me를 눌러가면서 선택하면 된다.

 

선택을 했다면 코드에 그대로 복사 붙혀넣기 해주자..

아래 예시코드가 있다.

See the Pen Sweetalert2 by Jirong (@jirongkim) on CodePen.

 

Button 태그를 이용해서 onClick 이라는 이벤트가 발생할 때 javascript의 설정해놓은 함수를 실행하게끔 하는 코드이다.

Swal은 Sweet Alert의 줄임말이다. 홈페이지의 Swal을 javascript 부분에 붙혀놓아야 동작한다.