728x90
Toastr.js는 브라우저에서 간단하고 세련된 알림 메시지를 표시할 수 있도록 도와주는 JavaScript 라이브러리입니다. 성공, 정보, 경고, 오류 등의 메시지를 비동기적으로 사용자에게 전달할 때 유용하며, 커스터마이징도 용이합니다. 이 글에서는 Toastr.js의 기본 사용법과 주요 기능, 그리고 다양한 활용 예제를 살펴보겠습니다.
Toastr.js의 주요 특징
- 간단한 API: 메서드 호출만으로 알림 메시지를 표시할 수 있습니다.
- 다양한 메시지 타입: 성공(success), 정보(info), 경고(warning), 오류(error) 메시지를 지원합니다.
- 풍부한 옵션: 위치, 시간, 스타일 등 다양한 설정을 통해 커스터마이징이 가능합니다.
- 외부 CSS 지원: Bootstrap 등의 CSS 프레임워크와도 잘 통합됩니다.
Toastr.js 설치
Toastr.js를 사용하려면 먼저 라이브러리를 설치해야 합니다. CDN을 통해 간단히 로드하거나, NPM을 이용해 설치할 수 있습니다.
CDN 방식:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
NPM 설치:
npm install toastr
기본 사용법
Toastr.js를 사용하려면 toastr 객체를 호출하면 됩니다. 아래는 각 메시지 타입에 대한 기본 사용 예제입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toastr.js Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<button onclick="showSuccess()">성공 메시지</button>
<button onclick="showError()">오류 메시지</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
function showSuccess() {
toastr.success('작업이 성공적으로 완료되었습니다!', '성공');
}
function showError() {
toastr.error('작업 중 오류가 발생했습니다.', '오류');
}
</script>
</body>
</html>
주요 옵션 설정
Toastr.js는 기본적으로 사용하기 쉽지만, 세부 설정을 통해 알림 메시지를 원하는 대로 커스터마이징할 수 있습니다.
옵션 설정 방법:
// 글로벌 설정
toastr.options = {
"closeButton": true, // 닫기 버튼 표시 여부
"debug": false, // 디버그 모드 활성화 여부
"newestOnTop": true, // 최신 알림을 상단에 표시
"progressBar": true, // 진행 표시줄 활성화
"positionClass": "toast-top-right", // 알림 표시 위치
"preventDuplicates": false, // 중복 알림 방지 여부
"onclick": null, // 클릭 이벤트 핸들러
"showDuration": "300", // 알림 표시 애니메이션 지속 시간 (ms)
"hideDuration": "1000", // 알림 숨기기 애니메이션 지속 시간 (ms)
"timeOut": "5000", // 알림 표시 시간 (ms)
"extendedTimeOut": "1000", // 사용자가 마우스를 올렸을 때의 추가 표시 시간 (ms)
"showEasing": "swing", // 표시 애니메이션 이징 함수
"hideEasing": "linear", // 숨기기 애니메이션 이징 함수
"showMethod": "fadeIn", // 표시 애니메이션 메서드
"hideMethod": "fadeOut" // 숨기기 애니메이션 메서드
};
예제:
// 사용자 지정 설정 적용
function showCustomMessage() {
toastr.options = {
"closeButton": true,
"progressBar": true,
"positionClass": "toast-bottom-left",
"timeOut": "7000"
};
toastr.info('이것은 사용자 지정 알림 메시지입니다.', '알림');
}
다양한 활용 예제
1. 버튼 클릭 시 알림 표시:
<button onclick="toastr.warning('잠시 후 다시 시도해주세요.', '경고');">경고 메시지</button>
2. 서버 응답 기반 알림:
fetch('/api/some-endpoint')
.then(response => {
if (response.ok) {
toastr.success('서버 요청이 성공했습니다.', '성공');
} else {
toastr.error('서버 요청에 실패했습니다.', '오류');
}
});
3. 사용자 입력 검증:
function validateInput(input) {
if (!input) {
toastr.error('입력값이 비어 있습니다.', '오류');
} else {
toastr.success('입력이 유효합니다.', '성공');
}
}LIST
'Develop' 카테고리의 다른 글
| Git에 대한 상세 설명 및 사용 방법 (1) | 2024.12.24 |
|---|---|
| [JavaScript] 엑셀 Excel 생성하기: XLSX 라이브러리 사용 예제 (1) | 2024.12.18 |
| [PostgreSQL] 나누기 연산 소수점 계산하기 (4) | 2024.12.16 |
| [JavaScript] history pushState 와 replaceState 이해하기 (6) | 2024.12.11 |
| [JavaScript] a 링크에서 이동 없이 JavaScript 함수만 실행하기 (7) | 2024.11.29 |