이번에는 JavaScript 라이브러리인 Toastr를 사용하여 사용자에게 알림 메시지를 보여주는 방법에 대해 알아보겠습니다.

1. Toastr 라이브러리 설치

먼저, Toastr 라이브러리를 프로젝트에 설치해야 합니다. npm을 사용하는 경우에는 아래 명령을 사용하여 설치할 수 있습니다.

npm install toastr

또는 CDN을 이용하고자 하는 경우에는 다음과 같이 해당 링크를 HTML 파일에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.css">

2. Toastr 메시지 표시

Toastr를 사용하여 간단한 메시지를 표시하는 방법은 아래와 같습니다.

// Success 메시지 표시
toastr.success('성공적으로 저장되었습니다.');

// Error 메시지 표시
toastr.error('오류가 발생했습니다.');

// Info 메시지 표시
toastr.info('추가 정보를 제공합니다.');

// Warning 메시지 표시
toastr.warning('경고: 지금 당장 처리해야 할 일이 있습니다.');

3. Toastr 옵션 설정

Toastr 메시지에 대한 옵션을 설정하여 원하는 스타일과 동작을 적용할 수 있습니다. 예를 들면, 메시지 위치, 닫기 버튼 등을 커스터마이징할 수 있습니다. 아래는 간단한 설정 예시입니다.

toastr.options = {
  "positionClass": "toast-top-right",
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000"
}

위 설정은 메시지를 화면 오른쪽 상단에 표시하고, 메시지가 나타나는 시간과 사라지는 시간을 각각 0.3초와 1초로 설정하며, 메시지가 사라지는 시간은 추가로 1초가 더 소요된다고 지정한 것입니다.

이렇게 Toastr 라이브러리를 사용하여 간단하게 사용자에게 메시지를 전달할 수 있습니다.

더 많은 옵션과 기능에 대해서는 Toastr 공식 문서를 참고해 주세요.

Toastr 공식 문서