[javascript] SweetAlert의 알림창 기능

SweetAlert는 웹 애플리케이션에 사용자에게 예쁜 미리 만들어진 알림창을 보여주기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 기본적인 경고, 성공, 오류 등의 알림창을 쉽게 만들 수 있습니다.

설치

SweetAlert를 사용하기 위해서는 먼저 프로젝트에 해당 라이브러리를 설치해야 합니다. npm을 사용하는 경우, 다음과 같이 명령을 실행하세요:

npm install sweetalert2

사용 방법

SweetAlert를 사용하기 위해, 먼저 HTML 파일에 SweetAlert의 스타일시트와 스크립트를 추가해야 합니다:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="sweetalert2.min.css">
</head>
<body>
  <!-- ... -->
  <script src="sweetalert2.min.js"></script>
</body>
</html>

다음은 SweetAlert를 사용하여 경고창을 보여주는 간단한 예제 코드입니다:

Swal.fire('경고!', '이 작업을 실행하시겠습니까?', 'warning');

위 코드는 “경고!”라는 타이틀과 “이 작업을 실행하시겠습니까?”라는 메시지를 포함한 경고창을 보여줍니다. ‘warning’은 경고 아이콘을 나타내며, 이외에도 ‘success’, ‘error’, ‘info’ 등의 다양한 아이콘을 사용할 수 있습니다.

SweetAlert 라이브러리는 다양한 옵션을 제공하며, 자세한 사용 방법은 공식 문서를 참조하시기 바랍니다[^1^].

결론

SweetAlert를 사용하면 깔끔하고 예쁜 알림창을 쉽게 구현할 수 있습니다. 이제 여러분의 웹 애플리케이션에 SweetAlert를 적용해보세요!

참고 자료