웹 애플리케이션에서 사용자에게 알림 메시지를 보여주고 싶을 때 Toastr는 매우 유용한 라이브러리입니다. Toastr는 경고, 성공, 정보, 오류 등 다양한 종류의 알림을 손쉽게 표시할 수 있습니다. 하지만 기본적으로 Toastr는 아이콘을 제공하지 않습니다. 이 블로그 글에서는 Toastr 알림 메시지에 아이콘을 추가하는 방법을 알아보겠습니다.

Toastr 설치하기

먼저, Toastr를 설치해야 합니다. npm을 이용하여 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/css/toastr.min.css" rel="stylesheet">

Toastr에 아이콘 추가하기

Font Awesome 아이콘 라이브러리 추가하기

우선, Font Awesome 아이콘 라이브러리를 추가해야 합니다. 아이콘을 사용하려면 Font Awesome의 CSS를 HTML 파일에 추가해야 합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-.../all.min.css" rel="stylesheet">

Toastr 설정

Toastr를 사용하기 전, 알림 메시지에 아이콘을 추가하기 위해 toastr.options 객체를 통해 설정을 추가할 수 있습니다.

toastr.options = {
    "closeButton": true,
    "progressBar": true,
    "positionClass": "toast-top-right",
    "showDuration": "300",
    "hideDuration": "1000",
    "timeOut": "5000",
    "extendedTimeOut": "1000",
    "iconClasses": {
        error: 'toast-error',
        info: 'toast-info',
        success: 'toast-success',
        warning: 'toast-warning'
    }
};

위의 예제에서 iconClasses 속성을 이용하여 각 알림 유형에 따른 아이콘 클래스를 설정할 수 있습니다.

알림 메시지 표시

이제, Toastr로 알림 메시지를 표시하면 설정한 아이콘이 함께 나타납니다.

toastr.success('메시지 내용', '제목');
toastr.error('메시지 내용', '제목');
toastr.info('메시지 내용', '제목');
toastr.warning('메시지 내용', '제목');

마무리

위의 단계를 따라하면 Toastr를 사용하여 알림 메시지에 아이콘을 추가할 수 있습니다. 알림 메시지에 아이콘을 함께 이용하면 사용자에게 더 직관적으로 메시지를 전달할 수 있습니다.

더 많은 아이콘 옵션을 사용하고 싶다면 Font Awesome 사이트를 방문하여 원하는 아이콘을 찾아보세요.