내가 이해하기 쉽게 정리하는 프로미스(Promise) 알아보기

자바스크립트,EMCA,JS,AJAX,비동기처리,동기처리,프로그래밍,백엔드

이해가 안될 때 이 글 하나면 충분해요! 저도 그랬어요

개발을 하게 되면서 동기와 비동기를 처리하기 위해서 여러 가지 방법을 사용하여 진행을 하지만 효율적으로 관리를 할 수 있는 방법은 아무래도 Promise를 사용하는 것이 맞다고 생각을 한다 개념도 그렇고 Promise 말고 다른 방법도 많지만 흔히 사용하게 되는 콜백 함수를 사용하게 되면 무한 콜백이라는 끔찍한 상황에 맞이하게 된다 나 또한 부끄럽지만 아직 배울게 많다 보니 무한 콜백에 빠져 아찔한 화면을 본 적이 있기도 하고 혼자 검색하면서 프로미스 이론을 봤는데 잘 이해가 되질 않았는데 혼자 천천히 다시 하면서 이해한 개념에 대해서 말해보려고 합니다.

 

최대한 이론에 중심 해서 적으려고 노력하겠지만 혹시나 잘못된 내용이 있다면 댓글을 통해 알려주시면 바로 수정하도록 하겠습니다.

목차

Promise(프로미스)

Promise 함수를 쓰는 이유?

우선, 자바스크립트에서 프로미스를 사용하려면 자바스크립트의 개념도 잠깐 알아볼 필요가 있습니다. 객체 기반의 스크립트 프로그래밍 언어이며 비동기 프로그래밍에 조금 더 유리하기도 하며 클래스라는 개념 또한 없고 프로토타입 즉 기존 객체 복사하여 새로운 객체를 복사하여 새로운 객체를 생성하는 것입니다. 이러한 자바스크립트에 프로미스를 사용하는 것은 중첩 콜백의 늪에서 빠지는 것을 방지하기 위하여 사용되는 것 중 하나입니다. 

 

프로미스의 장점은 아래와 같습니다.

비동기 처리 시점을 알 수 있으며, 코드의 유지보수 측면에서도 조금 더 관리가 편합니다. 그리고 연속된 비동기 처리 작업을 추가, 수정, 삭제를 하기도 편합니다.

 

Promise를 쉽게 생각하는 방법은 내가 원하는 방식의 처리 방법을 정하는 것이라고 생각을 하시면 됩니다. 내가 원하는 대로 처리를 하고 결과를 넘겨달라!라는 것으로 생각을 하시면 조금 더 이해가 쉬울 것이라고 생각을 합니다.

Promise(프로미스) 예제 소스

<script>
function test(){
	return new Promise(function(resolve, reject){
    	if(data){
        	resolve("OK");
        }else{
        	reject(Error("NO"));
        }
    });
}
</script>

콜백 함수 인자의 경우 resolve, reject가 됩니다. 대충 눈치로 짐작을 하는 분들도 계시겠지만 reject의 경우 에러 실패 처리의 결과 값을 받을 수 있습니다. resolve로 값을 넘겨주면 then 객체를 반환하며 그 값이 프로미스인 경우 해당 프로미스가 반환이 되는 것을 확인을 할 수 있습니다.

" 비동기 처리에 사용되는 객체 "

비동기란?

A, B 각각 실행을 하고 내가 필요할 때 결과를 줘!

동기란?

A, B 순서대로 처리하고 결과를 순서대로 넘겨줘!

Promise(프로미스)의 상태

프로미스의 상태에는 크게 본다면 세 가지를 나눌 수 있는데 우선 대기, 이행, 실패라는 것이 있습니다. 이론적으로 본다면 대기, 이행, 실패이겠지만 쉽게 풀어본다면 시작 전, 완료, 오류라고 생각하시면 더욱 이해하기가 쉬울 것 같습니다.

1. 대기(Pending) : 비동기 처리 로직이 아직 완료되지 않은 상태

2. 이행(Fulfilled) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 (완료)

- 이행 상태가 된다면. then()을 이용하여 처리 값을 받을 수 있습니다.

3. 실패(Rejected) : 비동기 처리가 실패하거나 오류가 발생을 한 상태

- 실패가 된다면 catch를 통해 값을 받을 수 있습니다.

<script>
    ..중략
    then().catch(function(err){
        console.log(err);
    });
    ..중략
</script>

실제로 적용해본 Promise(프로미스) 예제

<script>
	function save_promise(){
    	master_save(true) // 보통 저장을 할 때 순서 상 "저장하시겠습니까"에서 예를 누르면 진행하는 단계
        .then(1_save) // function 1_save로 넘어간다.
        .then(2_save) // function 2._save로 넘어간다.
    }
    
    function master_save(){
    	return new Promise((resolve, reject)=>{
        ..중략
        // 결과
        resolve(Data); // 다음 Promise(then())에 Data를 넘겨준다.
        )};
    }
    
    function 1_save(){
    	return new Promise((resolve, reject)=>{
        	$.ajax({
            	type: 'post',
                url : ..생략,
                contentType: false,
                success: function(reuslt){
                	resolve(Data); // 성공을 하게되면 그 값을 Data로 넘겨줌
                },
            	error: function (req, status, error) {
                    alert("파일업로드 에러. error");
                }
            })
        });
    }
    ..생략
</script>

위와 같이 Ajax를 사용을 해서 Promise를 사용을 해야 하는데 이럴 경우 저의 경우 위처럼 사용을 합니다. 그러면 제가 설정한 순서대로 실행이 되면서 결과를 저장을 할 수 있습니다. 물론 혹시나 오류가 나게 된다면 rejected를 사용하여 오류 값을 확인을 할 수 있습니다.

 

Promise Channing(프로미스 체이닝)

비동기 함수의 결과를 가지고 비동기 함수를 호출해야 하는 경우에는 함수의 호출이 중첩이 될 경우 무한 콜백에 갇혀버릴 수 있습니다. 이럴 경우 후속 처리 메서드를 Channing 하여 프로미스를 반환하는 여러 개의 비동기 함수들을 연결할 수 있습니다. 이름에서도 알 수 있듯이 체인으로 연결을 한다는 뜻이기도 합니다.

 

예제의 경우 위 예제가 체이닝의 예제이며 실무에서도 쓸 법한 예제입니다.

마무리

프로미스에 대해서 알아보았습니다. 최대한 저와 같이 어렵게 느껴지는 분들을 위해서 쉽게 설명을 했지만 혹시나 어렵다고 생각하는 분들은 댓글을 남겨주시면 조금 더 쉽게 설명을 해드리도록 하겠습니다. 그래도 무엇보다 가장 중요한 것은 본인 스스로가 이해하는 것이 나중에 기억을 할 때도 쉽고 오래 기억을 할 수 있다는 것을 알 수 있었으면 좋겠습니다!