[Js Library] toastr, alert lib 사용하기, 깔끔하게 토스트 메시지

안녕하세요. 최근 이쁜 웹페이지를 만들기 위해 노력중에 있습니다. 아무래도 백엔드 개발을 주 포지션으로 하다 보니 웹페이지를 디자인할때면 머리가 멍해질 때가 많습니다. 고민 끝에 css를 직접 작성하는 방향보다 웹상에 존재하는 좋은 lib를 가져와서 활용하기로 하였습니다. 이번 포스팅에서 알아볼 lib는 토스트 메시지 처리에 최적화 된 toastr js입니다.

 

toastr.js lib 가져오기

https://codeseven.github.io/toastr/

Toastr by CodeSeven

위의 주소로 들어가 윈도우 유저는 zip파일로 맥은 tar.gz로 다운받아주세요. cdn도 잘 찾아보면 있었던 것으로 기억합니다.

 

 

toastr.js 사용하기

1. toastr 간단히 출력하기

javascript

const container = angular.module("container", []);
container.controller("container-controller", async ($scope,$timeout)=> {

    $scope.toastr_test = async ()=>{
        toastr.success("success world");
        toastr.error("error world");
        toastr.info("info world")
        toastr.warning("warning world");

    }
})

 

html

<div class="container" ng-app="container" ng-controller="container-controller">
    <button class="btn btn-primary" ng-click="toastr_test()">테스트</button>

</div>

 

 

제가 angular js 로 버튼 클릭 이벤트를 처리하여서 $scope 함수는 무시하여도 괜찮습니다. 쉽게말해 버튼을 클릭시 저 toastr_test 함수를 실행토록 하였습니다.

 

 

toastr 함수는 총 4개로 success,error,info,warning으로 각 상황에 맞게 메시지를 날리도록 하였습니다.

 

위와 테스트 버튼을 누르면 토스트 메시지가 잘 나오는 모습을 볼 수 있습니다.

 

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

토스트 메시지의 설정을 변경할 수 있는데 가장 많이 사용하는 것이 timeOut인 것 같습니다. 그 외에 설정은 상황에 맞게 값을 세팅해주시면 됩니다. 설정에 대한 자세한 정보는 공식 github 페이지에서 확인해보세요

 

https://github.com/CodeSeven/toastr

GitHub - CodeSeven/toastr: Simple javascript toast notifications