SSE 활용해서 비동기 프로그레스바 구현

.progressbar {
    z-index: 100;
    border-style: solid;
    border-color: black;
    border-width: 0.2rem;
    height: 1.5rem;
    width: 18rem;
    margin-top: 0.95rem;
    display: none;
}

.progressbar > div {
    background-color: red;
    width: 0%;
    /* Adjust with JavaScript */
    height: 1.6rem;
}



.errorCount{
    color: red;
}

     <div class="user md-flex">
              <div class="progressbar">
                <div class="progressbar-move"></div>
              </div>
              <div class="progress-status">

              </div>
              <span class="errorCount">0</span>
              <div>
                <span>안녕하세요 <u><c:out value="${sessionScope.userName == null ? '관리자' : userName}"/></u>님</span>
                <button class="btn_red_bg_w" onclick="javascript:location.href='/logout.do'">로그아웃</button>
              </div>
            </div>

let progress = {
    init : function() {
        this.receive();
    },

    receive: function() {
        const eventSource = new EventSource("http://localhost:9090/sse");
        eventSource.addEventListener("Progress", (event) => {
            const result = JSON.parse(event.data);
            progress.render.excecuteProgress(result);
        });

        // eventSource.addEventListener("Error", (event) => {
        //     console.log("API call Error", event.data);
        // });

        eventSource.onopen = (event) => {
            console.log("connection opened")
        }

        eventSource.onerror = error => {
            eventSource.close();
        };

    },




    render : {

        excecuteProgress: function (result) {
            console.log("received:", result);

            let status="";

            $(".errorCount").text(result.errorCount);

            status = " <span>" + result.status  + "%</span>\n" +
                "<span>" + result.target + "/" + result.totalUpload   + "</span>\n";
            // + "<span>"+ result.errorCount + "</span>";

            $(".progressbar").css({"display": "block"});
            $(".progress-status").html(status);
            progress.render.moveBar(result.status, result.totalUpload);


        }, // e: targetAnalysisPt.render.executeAnalysisAi(int) : Object


        moveBar: function (status, total) {

            $('.progressbar-move').css({"width": status + "%"});

            console.log("status", status);
            if(status === 100 || total === 0){

                //$('.progressbar-move').hide();
                $(".progressbar").fadeOut(1000);
                $(".progress-status").fadeOut(1000);
            }


        }, // e: targetAnalysisPt.render.executeAnalysisAi(int) : Object

    }


}

<script>
$(document).ready(function () {
    progress.init();
});
</script>