SweetAlert2로 예쁜 Toast 알림 만들기｜간단한 JS 코드 예제 포함

사용자에게 간단한 메시지를 자연스럽게 전달하고 싶다면 Toast 알림이 제격입니다. SweetAlert2 라이브러리를 활용하면 스타일도 예쁘고 구현도 쉬워요. 이 포스팅에서는 SweetAlert2로 간단한 Toast 알림을 만드는 방법을 소개합니다.

SweetAlert2란?

기본 alert()를 예쁘게 꾸며주는 JavaScript 라이브러리 입니다. 반응형이라 실용적이고, 깔끔하고, 여러가지 기능이 있는데, 사용하기에도 간편합니다.

👉 관련 포스팅 : 예쁜 alert 모달창 사용법 SweetAlert2

sweetalert2 toast 알림 기본 코드

Swal.fire({
  toast: true,
  position: 'top-end',
  icon: 'success',
  title: '저장되었습니다!',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
});

Swal.fire({
  toast: true,
  position: 'top-end',
  icon: 'success',
  title: '저장되었습니다!',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
});

옵션 설명

• toast : true 토스트 스타일로 표시
• position : 위치 지정 (top-end, top-start 등)
• icon : 아이콘 (success, error, warning, info)
• title : 표시할 메시지
• showConfirmButton : 확인 버튼 숨기기(false)
• timer : 자동 닫힘 시간(ms)
• timerProgressBar : 진행 바 표시

데모 실행

마무리

sweetalert2 toast 알림은 사용자의 반응에 관한 결과를 심플하게 알려주는 형태의 알림으로 기본적인 알림과 조금 다른 형태의 알림입니다. 알림 확인 후 사용자의 클릭 또는 선택이 필요 없이 결과를 알려주고 특정 시간이 지나면 알림이 사라지는 형태의 알림입니다.

• 👉 관련 포스팅 : SweetAlert2와 Fetch API 연동｜사용자 입력 후 서버 요청 처리 예제
• 👉🏻 관련 포스팅 : SweetAlert2에서 입력값 받아오기｜사용자 입력 처리 방법과 예제
• 👉🏼 관련 포스팅 : SweetAlert2 confirm 사용법｜확인/취소 처리와 콜백 활용 예제
• 👉🏽 관련 포스팅 : SweetAlert2 확인창 후 콜백 함수 실행하는 방법 (이벤트 처리 예제 포함)
• 👉🏾 관련 포스팅 : SWAL 사용법! SweetAlert2 예쁜 팝업 정복하기
• 👉🏿 관련 포스팅 : 눈 아이콘으로 로그인 비밀번호 확인하는 방법

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”