SweetAlert2를 활용하여 알림창 변경방법

자바스크립트,디자인,프론트엔드,백엔드,오픈소스라이브러리,공식문서,깃허브

기본 알림창을 변경하여 자신의 웹을 바꿔보자

최근 포트폴리오를 준비하면서 사이트를 만드는데 자바스크립트 등으로 만들어져 있는 오픈소스 라이브러리에 대한 관심도가 많아져 검색을 하다 보니 정말 다양하고 좋은 기능들이 많이 있기도 하고 신기한 기능들이 많이 있었습니다. 그중에서 사이트에 적용을 하면 괜찮을 것 같은 알림창(Alert)관련한 오픈소스를 여러분에게 소개를 해드리려고 합니다.

목차

SweetAlert2 [#]

우리가 보통 홈페이지를 이용하다 보면 자주 볼 수 있는 알림 창의 경우 보통 아래의 모양처럼 나오는 것을 확인을 할 수 있습니다.

SweetAlert를 사용하게 되면 위와 같은 기본 알림창의 디자인을 바로 변경하여 사용할 수 있습니다 바로 아래처럼 사용을 할 수 있습니다.

See the Pen SweetAlertSample by yeonghwan (@odinbox) on CodePen.

 

 

사용방법

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
[jsdelivr CDN:https://www.jsdelivr.com/package/npm/sweetalert2]

$npm install sweetalert2

1. sweetalert2 js를 사용을 하기 위해 js를 로드합니다.

<script src="sweetalert2.all.min.js"></script>

2. 별도의 스타일을 사용을 할 경우 CSS를 포함을 할 수 있습니다.

<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">

또는

import Swal from 'sweetalert2'
const Swal = require('sweetalert2')

사용자가 원할 경우 JS와 CSS를 별도로 가져올 수 있습니다.
import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

3. 설정은 끝났습니다 Alert를 호출하세요

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})

JS 프레임워크들에서 사용이 가능합니다.

React, Vue, Angular

 

sweetalert2 홈페이지를 접속을 하게 되면 상단 부분에 예제와 함께 다양한 정보를 알 수 있도록 문서를 제공하고 있습니다. 각종 메서드와 테마 그리고 버튼들이 있어 해당 문서를 함께 보시면서 사용을 하시면 될 것 같습니다. 혹시나 사용을 하시려고 하는데 모르는 사항이 있다면 댓글을 남겨주시면 답변을 드리도록 하겠습니다.