SweetAlert SweetAlert2 알림창을 더 이쁘게, 더 신속하게

오늘 알려드릴 내용은 SweetAlert라는 자바스크립트 라이브러리입니다. 칙칙한 Alert를 제 입맛대로 꾸밀 수도있고 관리할수 있기 때문에,

제가하는 웹페이지에 도입하고 싶었습니다. 

 

SweetAlert는 1이랑 2 두개의 버젼이 있습니다.

1과 2의 차이는 더 다양한 기능들이 생긴 차이와 Composer를 이용해 컨트롤러단에서 사용할수있냐 없냐로 나뉠것같습니다. 

 

 

 

 

일단 SweetAlert의 설치법과 사용법에 대해서 간단히 알려드리겠습니다.

 

 

Composer 설치

1. composer require realrashid/sweet-alert

 

Composer를 이용해서 sweetAlert를 설치해줍니다. 컨트롤러단에서 사용하기위함입니다. 단순히 cdn을 이용해  js로도 사용가능합니다.

 

2. config/app.php 로 이동해서 

Provider에 추가해줍니다.

Provider

그리고 aliases에도 Alert라는 이름으로 추가해줍니다.

 

Aliases

설정 후에 php artisan cache:clear 로 적용해줍니다.

설치와 셋팅은 벌써 끝났습니다. 이렇게 보고나니까 굉장히 간단하네요.

 

이제 실제로 사용해볼까요?

 

 

컨트롤러단

사용할 컨트롤러로 들어와 use RealRashid\SweetAlert\Facades\Alert; 를 작성합니다.

 

그리고 사용할 Alert를 Alet::alert("Hello World"); 로 작성하고나서

 

사용할 레이아웃페이지 에서 include해줍니다. 이러면 자동으로 컨트롤러에서 사용한 Alert를 웹화면에 띄우게 됩니다.

 

 

기존 Alert / SweetAlert

그리고 다른방법으로 alert("Title"); 이런식으로도 가능합니다. ㅎㅎ

그리고 사용하는 페이지의 위치를 설정하고 이런식으로 Toast도 날려줄수있습니다.

다양한 방법들은 제가 나중에 정리해서 올려드리겠습니다.

 

 

확실히 더 깔끔하고 보기 좋은 것 같습니다. 그리고 제 입맛대로 바꿀수 있는 장점은 확실히 제일 큰 장점이 아닐까 싶습니다. 

이런식으로 SweetAlert를 내부 컨트롤러단이나 미들웨어로 사용가능한 장점이 있었네요.

 

 

 

SweetAlert2

 

이번에는 업그레이드된 SweetAlert2를 사용해보겠습니다 . 더 많은 기능들과 UI가 추가된 케이스라서 사용해보면 좋을것같습니다.

 

 

npm install sweetalert2을 이용해 설치해서 파일들을 관리할수도있고

 

CDN 을 이용해서도 sweetAlert2를 사용할수 있습니다. 

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

 

더욱 쉬운 방법은 CDN 이지만 저는 제 입맛대로 나중에 바꾸고 싶어서 npm을 이용해 사용했습니다.

 

 설치가 끝나고나면 npm install과 npm run dev도 같이 진행해 설치를 완료해줍니다.

그리고 나서 app.js 를 통해 모든 웹화면에서 사용하기 위해서  resources/js/bootstrap.js로 이동해줍니다.

 

 

그리고 상단의 try 부분에  const Swal = window.Swal = require('sweetalert2'); 를 작성해주시면 셋팅완료입니다.

간단하죠?

 

이제 웹화면에서 한번 확인해볼까요?

사용할 웹페이지에서 Script문을 작성해줍니다.

Swal.fire("안에 내용"); 을 해주시면 

 

 

 

 

 

이렇게 sweetAlert2 도 사용 가능합니다. 

간단한 Alert창만 띄웠지만 아주 다양한 유형과 형식들이 있습니다. 

동적으로 입력값을 받아서 처리할수도있고 다양한 선택지가있습니다.

 

기존의 alert보다 더 깔끔하고 아름다운 SweetAlert를 사용하시면 좋을 것같습니다. 감사합니다.