[javascript] Toastr를 사용하여 알림 메시지 카운트 표시하기

20 Dec 2023

javascript

애플리케이션에서 알림 메시지를 표시할 때 사용자에게 현재 보유한 알림의 수를 시각적으로 나타내는 것은 매우 중요합니다. 여기서는 Toastr 라이브러리를 사용하여 알림 메시지의 카운트를 표시하는 방법에 대해 알아보겠습니다.

Toastr 라이브러리란?

Toastr는 사용자에게 시각적 피드백을 제공하기 위한 경량의 JavaScript 알림 라이브러리입니다. 이 라이브러리를 사용하면 간단한 스타일링과 손쉬운 구성이 가능하며, 다양한 형식의 알림을 표시할 수 있습니다.

Toastr를 사용하여 알림 메시지를 표시하고, 알림 메시지가 추가될 때마다 카운트를 표시하는 기능을 구현하기 위해서는 다음과 같은 단계를 따르면 됩니다.

알림 메시지 표시와 카운트 표시하기

Toastr 라이브러리 설치: 먼저 Toastr 라이브러리를 프로젝트에 설치합니다. 다음과 같이 npm을 사용하여 설치할 수 있습니다.
```
 npm install toastr
```

Toastr 초기화: Toastr를 사용하기 위해 HTML 파일에 스타일 및 스크립트 파일을 추가하고, Toastr를 초기화합니다.

 <link href="path/to/toastr.css" rel="stylesheet"/>
 <script src="path/to/toastr.js"></script>
 <script>
 toastr.options.positionClass = 'toast-top-right';
 </script>

알림 메시지 표시와 카운트 표시 구현: 알림 메시지가 추가될 때마다 카운트를 업데이트하고, Toastr를 사용하여 알림 메시지를 표시합니다.

 let notificationCount = 0;

 function showNotification(message) {
     notificationCount++;
     updateNotificationCount();
     toastr.info(message);
 }

 function updateNotificationCount() {
     // 카운트를 UI에 표시하는 로직을 추가
     // 예: document.getElementById('notificationCount').innerText = notificationCount;
 }

위 코드 예제에서는 showNotification 함수를 사용하여 알림 메시지를 표시하고, updateNotificationCount 함수를 사용하여 알림 메시지의 카운트를 업데이트합니다. 이때, 특정 HTML 요소를 사용하여 카운트를 표시할 수 있습니다.

Toastr를 사용하여 알림 메시지를 표시하고, 알림 메시지의 카운트를 시각적으로 표시하는 방법에 대해 알아보았습니다.

참고 자료

Toastr 공식 문서: Toastr Documentation