[JAVASCRIPT] SweetAlert2 사용 방법(alert 창 꾸미기)

오늘은 최종프로젝트에서 기존 자바스크립트의 alert창 대신 많이 사용했던
이쁘고 간편한 alert인 sweetalert2 에 대해 간단하게 소개해보고자 한다.

​https://sweetalert2.github.io/#download

sweetAlert은 다음과 같이 기존의 alert 창보다 다양한 디자인과 색감으로 디자인이 된 alert 창이다.

단지 아쉬운 것이라면 우리가 직접 커스터마이징 해서 쓸 수 있는 것은 아니고

정해진 형식을 우리가 끌어다가 내용만 바꿔서 사용하는 방법인 것 같다.

(사실 다른방법으로 커스터마이징을 할 수 있는데 우리가 못 쓰는 것일수도 있다...)

사용방법은 아주 굉장히 심플하고 간단하다.

그런 다음 위에 첨부해둔 홈페이지를 직접 들어가게 되면 위의 사진처럼 사용할 수 있는 코드들이 잔뜩 나오는데

이 중에서 원하는 alert창의 코드를 복사해서 본인의 프로젝트에 마음껏 사용하면 된다!!

내가 제일 많이 사용한 alert창이다. 유용하게 많이 쓰인다.

나는 주로 위 사진의 yes, cancel 기능을 가진 alert창을 많이 사용했는데

주로 어떤식으로 사용했는지를 보자면 다음과 같다

  	function deleteBoard(seq){
		Swal.fire({
		  title: '글을 삭제하시겠습니까???',
		  text: "삭제하시면 다시 복구시킬 수 없습니다.",
		  icon: 'warning',
		  showCancelButton: true,
		  confirmButtonColor: '#3085d6',
		  cancelButtonColor: '#d33',
		  confirmButtonText: '삭제',
		  cancelButtonText: '취소'
		}).then((result) => {
		  if (result.value) {
              //"삭제" 버튼을 눌렀을 때 작업할 내용을 이곳에 넣어주면 된다. 
		  }
		})
	}

deleteBoard() 라는 자바스크립트 함수를 실행시키면 다음과 같은 alert창이 뜨게 된다.