너의 선택은? 프로젝트를 진행하면서 Alert 사용이 많아지는걸 느껴진다. 그런데 브라우저의 기본 알림창은 보면 수수하게 느껴져 바꿔야 겠다는 생각이 들었다. 그래서 찾다 보니 SweetAlert라는 컴포넌트가 있다는걸 알게 되었다.
SweetAlert의 공식 사이트이다.
https://sweetalert2.github.io/
SweetAlert2
A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
sweetalert2.github.io
이곳에서 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를 완성하려 한다.
'내일배움캠프' 카테고리의 다른 글
| 너의 선택은? 프로젝트를 마무리하며 회고록 (0) | 2023.07.24 |
|---|---|
| 너의 선택은? 중간 진행 사항 정리 (0) | 2023.07.20 |
| 백오피스 프로젝트를 시작하며 (0) | 2023.07.17 |
| 9주차 후발대 강의 요약 (0) | 2023.07.16 |
| 뉴스피드 프로젝트를 마무리하며 회고록 (0) | 2023.07.08 |