자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다.
Alert는 사용자에게 알림을 주고자 할 때 정말 자구 사용하는 컴포넌트 입니다.
다음과 같이 자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공하고 있습니다.
하지만 우리는 이런 알림창보다 더 예쁜 알림 창을 원하죠.
SweetAlert2 라이브러리는기존의 alert 창보다 다양한 디자인과 색감으로 디자인이 된 alert 창 입니다.
또한 한 종류만 있는게 아니라 alert, confirm, prompt 입력창 역시 지원하며, 여러 주제에 따라 다양한 이쁜 알람창을 따로 css작업없이 고퀄리티의 애니메이션 창을 구성할수 있습니다.
이번 시간에는 SweetAlert2 라이브러리의 기본 사용법에 대한 포스팅을 진행합니다.
설치하기
🔗CDN 링크
상단의 링크로 들어가서 아래의 이미지 빨간 박스 표시된 js와 css파일만 다운로드 하시면 됩니다!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>설치하기
import Swal from "sweetalert2";
를 상단에 적어서 import 해온다.
- 기본구조
Swal.fire({
icon: 'info',
title: '로그인 후 이용 가능합니다.',
text: '로그인 하시겠습니까?',
})기본 팝업창. 이 안에 추가 내용을 넣을 수 있다.
icon에는 기본 이모지들을 넣을 수 있다
icon의 종류 success, error ,warning, info, question 이 있다.
- 예, 아니오 버튼
Swal.fire({
icon: 'info',
title: '로그인 후 이용 가능합니다.',
text: '로그인 하시겠습니까?',
showCancelButton: true,
confirmButtonText: '예',
cancelButtonText: '아니오',
confirmButtonColor: '#429f50',
cancelButtonColor: '#d33',
})showCancelButton : true
-> 취소 버튼을 추가할 수 있다.(기본은 확인버튼만 있음.)
confirmButtonText: '예'
-> 확인버튼 문구 수정가능
cancelButtonText: '아니오'
-> 취소버튼 문구 수정가능
confirmButtonColor: '#429f50'
-> 확인버튼 색 지정
cancelButtonColor: '#d33'
-> 취소버튼 색 지정
- 버튼 눌렀을 때의 상태 처리
.then(result => {
if (result.isConfirmed) {
location.href = routes.login
} else if (result.isDismissed) {
location.href = routes.home
}
})swal({}).then
으로 확인버튼 눌렀을때와 취소버튼 눌렀을때 이동, 확인 완료창 띄우기 등을 시행할 수 있다.
그런데 navigate가 작동하지 않는 부분은 추후에 확인필요
🔗SweetAlert 공식홈페이지
🔗SweetAlert 사용 참고 블로그
