[javascript] Toastr를 사용하여 알림 메시지 스타일링하기

20 Dec 2023

javascript

웹 애플리케이션에서 알림 메시지를 스타일링할 때 Toastr를 사용할 수 있습니다. Toastr는 사용하기 쉽고 맞춤 설정이 가능한 알림 라이브러리로, 사용자에게 시각적 알림을 제공하는 데 도움이 됩니다.

Toastr 라이브러리 설치

먼저, Toastr 라이브러리를 설치하여 사용할 수 있습니다. 아래는 npm을 사용하여 Toastr를 설치하는 방법입니다.

npm install toastr

Toastr 알림 메시지 표시하기

다음으로, Toastr를 사용하여 간단한 알림 메시지를 표시하는 방법을 살펴보겠습니다.

import toastr from 'toastr';
import 'toastr/build/toastr.min.css';

toastr.success('알림 메시지가 성공적으로 표시되었습니다.');
toastr.error('오류가 발생했습니다. 다시 시도해주세요.');
toastr.info('추가 정보를 제공하는 알림 메시지.');
toastr.warning('사용자에게 경고하는 알림 메시지.');

위 코드에서, toastr.success, toastr.error, toastr.info, toastr.warning와 같은 메서드를 사용하여 각각의 알림 타입에 해당하는 메시지를 표시할 수 있습니다.

Toastr 옵션 설정

Toastr를 사용할 때 옵션을 설정하여 알림 메시지의 외형 및 동작을 사용자 정의할 수 있습니다.

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": true,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}

위 코드에서는 toastr.options를 사용하여 다양한 옵션을 설정할 수 있습니다.

Toastr를 사용하여 알림 메시지를 스타일링하여 사용자에게 시각적인 피드백을 제공할 수 있습니다.

참고문헌:

Toastr 라이브러리: https://github.com/CodeSeven/toastr