[javascript] SweetAlert의 경고창 기능

24 Nov 2023

javascript

SweetAlert은 JavaScript 라이브러리로써, 사용자에게 보다 시각적으로 매력적인 경고창을 제공하는 도구입니다. 기본 브라우저의 alert() 함수 대신에 SweetAlert을 사용하면 사용자의 경험을 개선하고 더욱 흥미로운 사용자 인터페이스를 제공할 수 있습니다.

SweetAlert 설치

SweetAlert은 npm을 통해 쉽게 설치할 수 있습니다. 다음 명령을 사용하여 SweetAlert을 설치합니다:

npm install sweetalert2

SweetAlert 사용 방법

다음은 SweetAlert를 사용하여 경고 창을 표시하는 간단한 예제입니다:

import Swal from 'sweetalert2';

Swal.fire({
  title: '경고',
  text: '이 작업을 수행하시겠습니까?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: '예',
  cancelButtonText: '아니오',
}).then((result) => {
  if (result.isConfirmed) {
    // 예 버튼을 클릭한 경우 실행할 코드
    console.log('사용자가 예 버튼을 클릭했습니다.');
  } else if (result.dismiss === Swal.DismissReason.cancel) {
    // 아니오 버튼을 클릭한 경우 실행할 코드
    console.log('사용자가 아니오 버튼을 클릭했습니다.');
  }
});

위의 예제에서는 SweetAlert의 fire() 함수를 호출하여 경고창을 표시하고, 사용자의 응답에 따른 처리를 위해 then() 메서드를 사용합니다. 사용자가 ‘예’ 버튼을 클릭한 경우에는 isConfirmed 속성을 확인하여 해당하는 코드를 실행하고, ‘아니오’ 버튼을 클릭한 경우에는 dismiss 속성을 확인하여 해당하는 코드를 실행합니다.

다양한 경고창 스타일

SweetAlert은 다양한 경고창 스타일을 제공합니다. 아래는 일부 예입니다:

성공 메시지

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

에러 메시지

Swal.fire({
  title: '에러',
  text: '작업을 수행하는 동안 에러가 발생했습니다.',
  icon: 'error',
});

정보 메시지

Swal.fire({
  title: '정보',
  text: '작업에 대한 추가 정보입니다.',
  icon: 'info',
});

질문 메시지

Swal.fire({
  title: '질문',
  text: '작업을 수행하시겠습니까?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: '예',
  cancelButtonText: '아니오',
});

참고 자료

SweetAlert 공식 문서: https://sweetalert2.github.io/