[javascript] Toastr를 사용하여 알림 메시지 타이머 설정하기

Toastr는 JavaScript로 구현된 경고 및 알림 메시지를 쉽게 표시할 수 있는 라이브러리입니다. 이 라이브러리를 사용하여 알림 메시지를 표시하고, 메시지가 사라지는 시간을 설정하는 방법을 살펴보겠습니다.

1. Toastr 라이브러리 설치

먼저 Toastr 라이브러리를 설치하고 프로젝트에 추가합니다. 다음 명령어를 사용하여 Toastr를 설치합니다.

npm install toastr

또는 CDN을 통해 Toastr를 추가할 수도 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

2. 알림 메시지 표시 및 타이머 설정

Toastr를 사용하여 알림 메시지를 표시하고 타이머를 설정하는 예제 코드는 다음과 같습니다.

// 알림 메시지 표시
toastr.success('저장되었습니다', '알림');

// 타이머 설정
toastr.options.timeOut = 3000; // 3초 후에 메시지가 사라짐

위 코드에서 toastr.success 함수를 사용하여 성공 메시지를 표시하고, toastr.options.timeOut 속성을 사용하여 메시지가 사라지는 시간을 설정합니다.

이제 Toastr를 사용하여 알림 메시지를 표시하고 타이머를 설정하는 방법을 알게 되었습니다. Toastr는 다양한 스타일과 옵션을 제공하여 더 많은 사용자 정의가 가능합니다.

더 많은 Toastr 옵션 및 기능에 대한 정보는 Toastr 공식 문서를 참조하십시오.

위의 내용을 통해 Toastr를 사용하여 알림 메시지의 타이머를 설정하는 방법에 대해 배웠습니다.