[javascript] SweetAlert의 성공창 기능

24 Nov 2023

SweetAlert는 많은 웹 개발자들이 사용하는 Javasript 알림 라이브러리입니다. 이 라이브러리는 일반적인 웹 브라우저의 alert 창보다 더 스타일리시하고 사용자 친화적인 알림 창을 만들어줍니다.

SweetAlert에는 여러 가지 유용한 기능이 있는데, 그 중 하나는 성공창을 보여주는 기능입니다. 사용자가 어떤 작업을 성공적으로 수행했을 때 성공창을 표시하여 사용자에게 시각적인 피드백을 제공할 수 있습니다.

SweetAlert 설치

이 라이브러리를 사용하기 위해서는 먼저 SweetAlert를 설치해야합니다. SweetAlert는 npm을 통해 간편하게 설치할 수 있습니다.

npm install sweetalert

혹은 CDN을 통해 외부에서 라이브러리를 로드할 수 있습니다.

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

SweetAlert로 성공창을 표시하는 방법은 매우 간단합니다. SweetAlert 객체의 fire 메서드를 사용하여 성공창을 표시할 수 있습니다.

Swal.fire({
  icon: 'success',
  title: '성공',
  text: '작업이 성공적으로 완료되었습니다.'
})

위의 예제에서는 icon 속성에 'success' 값을 설정하여 성공 아이콘을 표시합니다. title 속성에는 성공창의 제목을, text 속성에는 성공 메시지를 설정할 수 있습니다.

SweetAlert는 다양한 아이콘과 다양한 옵션을 제공하므로, 필요에 따라 성공창의 스타일이나 내용을 자유롭게 변경할 수 있습니다.