SweetAlert 꾸미기

 

사용자에게 전달할 정보를 간단하게 알려주거나 , 디버깅 또는 로그를 확인 하거나 , 사용자에게 빠르게 입력을 받을때에도 유용하게 사용되는 alert () 함수는 자바스크립트에서 사용되는 함수로서 유용하게 이용된다.

 

 

요렇게 표현 할 수 있지만 우리는 사용자 UI 를 위해 SweetAlert 를 사용해 조금더 예쁘게 표현 해보자 !

 

https://sweetalert.js.org/guides/#getting-started

 

 

CDN 추가

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

 

alert 대신 swal 로 사용 !

사용 방식은, alert 대신 swal을 사용해줘야 한다.

swal('타이틀', '내용', '아이콘'); 형식으로 작성

 

 

주의 !

이런 식으로 만 작성하면 OK 버튼을 클릭하기도 전에, 지정해놨던 경로로 순식간에 넘어가버린다 (alert창을 못 볼 정도로 빠르게 이동해버릴 수 있다. ) 그래서 swal 작성 후,. then을 붙여서 그다음에 동작할 코드를 작성해줘야 한다.

 

swal('로그인 성공!',data.login.result.name+"님 로그인되었습니다.",'success') 
  .then(function(){ location.href="${pageContext.request.contextPath}/main.do"; }) 

} else { 
swal('로그인 실패!',"아이디와 비밀번호를 확인해 주세요",'warning'); 
};

 

 

 

이렇게. then(function() { }) 안에 원하는 코드 (위에선 OK 버튼 클릭하면 메인 페이지로 경로 이동)를 추가하면 잘 작동되는 걸 확인할 수 있다.