[Jquery] 비동기 프로그래밍을 위한 Promise와 Deferred Object

웹 개발업무를 하면서 Javascript, Jquery를 사용하는 것은 반 필수적인 실정에서, 비동기 프로그래밍은 불가피한 요소다.

콜백함수를 사용한 비동기식 처리 모델은 JavaScript에서 빈번히 사용된다. 비동기식 처리 모델이란 처리가 종료하면 호출될 함수(콜백 함수)를 미리 parameter로 전달하고 처리가 종료하면 콜백 함수를 호출하는 것이다.

jQuery Deferred는 각각의 비동기식 처리에 Promise 객체를 연계하여 그 상태를 전파하는 것으로 promise를 구현한 jQuery 객체이다. 브라우저 호환성과 편의성을 고려하여 만든 Promise 모듈이라고 생각하면 무리가 없을 듯하다.

jQuery Deferred에서 각각의 비동기식 처리를 Deferred 객체로 wrapping한다. Deferred 객체는 상태를 가지고 있는데 이는 비동기식 처리의 상태가 변경되는 시점에 특정 함수(resolve(), reject())를 호출하여 Deferred 객체에 상태를 부여하기 때문이다. deferred.state()로 상태를 확인할 수 있다.

Deferred object state (Deferred.state()의 반환값) pending : 처리 중 resolved : 처리 성공 rejected : 처리 실패

 

성공/실패시 함수 호출 구조

오른쪽 코드에서 try 구문이 정상적으로 끝난 후 deferred.resolve()는 성공적으로 함수가 끝난 것이므로 왼쪽 코드의. done funciton으로 가게 되고 try진행 중 에러가 발생해서 catch로 가게 되면 deferred.reject()가 호출되는데 이는. fail function으로 가게 된다.. always function은 try이든 catch든 항상 실행되는 구문이다.

사실callback_settingTimepicker(); 이 부분이. done function 안에 있어야 되는데 실수임..

 

 

내가 고민하게된 상황은 스크립트단 function에서 HTML 문자열을 append 한 이후에

해당 문자열 안에 있는 input 태그에 timepicker class를 적용해야 하는 일이었다. 따라서 append가 수행되는 function이 끝난 후에 timepicker class가 적용되어야 하므로 비동기 프로그래밍이 필요한 상황이었다.

위의 사진에서 주간, 야간 버튼을 누르면 왼쪽으로 체크된 tr이 이동하는 시스템인데, 이동하고 나서 아래 사진과 같이 timepicker가 적용되어야 한다.

그래서 아래와 같이 코딩했다!

<!-- HTML -->
<a href="javaScript:void(0);" id="tab_1_mov_ngt" class="btn_sm" param1="acdntTable" param2="wrkrTable" onclick="fn_wrkrSetting(this)"> < 주간 </a>
 
/* script */
 
//주간,야간 파라미터 값 셋팅
    function fn_wrkrSetting(obj){
        fn_rscuntWrkshtWrkr($(obj).attr('param1'),$(obj).attr('param2')).done(function(){
            callback_settingTimepicker();
        }).fail(function(error){
            errorFunction();
        }).always(function(){
            
        })
    }
 
 // 근무조 추가/제거
    function fn_rscuntWrkshtWrkr(nowTable,nxtTable) {
        const deferred = $.Deferred();
        try{
        /*
               HTML append 코드
        */
 
            deferred.resolve();
        }
        catch{
            deferred.reject();
        }
        return deferred.promise();
    }
    //야간,주간 근무자 추가후 timepicker 셋팅
    function callback_settingTimepicker(){
        $('.timepicker').timepicker({
            timeFormat: 'H:i',
            step:1
        });
    }
    //콜백 에러 function
    function errorFunction(){
        alert('error')
    }

중요한 점은 deferred 객체를 함수 내에서 선언 후 promise를 사용하려면 deferred.promise()를 return 해줘야 된다는 점이다. (30 Line)

 

 

즐거운 코딩하세여