SweetAlert2에 대해서 그리고 적용

너의 선택은? 프로젝트를 진행하면서 Alert 사용이 많아지는걸 느껴진다. 그런데 브라우저의 기본 알림창은 보면 수수하게 느껴져 바꿔야 겠다는 생각이 들었다. 그래서 찾다 보니 SweetAlert라는 컴포넌트가 있다는걸 알게 되었다.

 

SweetAlert의 공식 사이트이다.
https://sweetalert2.github.io/

SweetAlert2

 

이곳에서 Alert 기능에 대해서 테스트 해볼 수 있으니 참고하면 좋을것이다.

 

SweetAlert의 기본 코드는 이렇다

Swal.fire('Any fool can use a computer')

실행 시켜보면 이렇게 뜨는걸 확인할 수 있다. 기본 알림창보다 스타일이 적용 되어있어 눈이 즐겁다.

 

다운 받으려면 npm은 이렇다.

npm install sweetalert2

하지만 나는 cdn방식으로 적용할 것이기에 이것을 HTML 헤더에 넣어줬다.

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

SweetAlerts는 React와 Vue 그리고 Angular에도 적용이 가능하다.

 

이것을 활용해 프로젝트에도 적용시켜 보기좋은 ui를 완성하려 한다.