자바스크립트 프로미스 이해하기 !

 

 

 

안녕하세요.

오늘은 자바스크립트의 프로미스(Promise)에 대한 포스팅을 하려고 합니다. 지난 시간에 정리했던 자바스크립트의 콜백지옥! 에 이어서 콜백지옥의 탈출구인 프로미스입니다! 프로미스는 자바스크립트의 깊이 있는 콜백, 콜백 함수의 sync를 맞춰 순서를 보장할 수 있는 방식이며, 기존의 콜백 지옥을 경험해 보셨다면 프로미스 방식은 훨씬 더 간결하면서 자바스크립트를 전문적으로 다루는 느낌도 듭니다 :) 물론 개인의 차이는 있겠지만 보통은 그렇더라고요! ㅎㅎ

 

그럼 프로미스는 콜백지옥과 어떤 차이가 있는지 예제를 통해서 하나씩 알아보도록 하겠습니다.

 

---

Promise

프로미스는 자바스크립트에서 비동기 처리되는 여러 함수들을 순차적으로 처리될 수 있도록 지원하는 기능입니다. 물론 개발하는 업무에 따라서 기능별로 각각 비동기 처리가 돼서 프로미스의 기능이 필요하지 않은 상황도 많이 있습니다. 하지만 비동기 처리되는 업무를 순차적으로 처리해야 하는 상황이 종종 발생하며 그 상황을 콜백지옥에서 벗어나 손쉽게 처리할 수 있도록 도와주는 강력한 기능입니다.

---

1. Promise 생성 예제

new Promise((resolve, reject) => {
    // 전달할 내용
    var text1 = 'Task 1'; 

    console.log(text1);
	
    // 성공 처리 -> resolve() 실행
    if (status === 'succ') {
        // 1초 후 다음 함수 호출
        setTimeout(() => {
            resolve(text1);
        }, 1000);
        
    // 실패 처리 -> reject() 실행
    } else {
        reject({ err : 'error', code : '1' });
    }
});

간단하게 프로미스를 실행하는 예제 소스 코드를 작성하였습니다. 함수를 생성하면 인자값으로 resolve와 reject를 받게 됩니다. 두 인자는 각각 성공했을 때와 실패했을 때의 콜백 처리가 가능한 인자라고 생각하시면 됩니다.

 

프로미스의 resolve, reject 처리 프로세스

간단하게 프로미스의 처리되는 순서를 그려봤습니다. 디테일하고 복잡한 그림보다는 처음 이해하실 때는 위와 같이 간단하게 이해를 하고 조금씩 디테일한 부분을 학습해 나가시면 좋습니다 :)  (참고로 개인적으로 학습하는 방법입니다.. ㅎㅎ)

다시 위의 그림을 보게 되면 처음 프로미스에서 에러없이 넘어가게 된다면 resolve()를 실행시켜 주고, 그러면 다음 프로미스의 콜백함수로 전달이 됩니다. 이 부분이 지난 글에서 정리했던 콜백함수와 동일한 방식입니다.

 

그러면 위의 그림처럼 처리되는 과정을 예제로 확인해 보겠습니다.

 

---

2. Promise resolve(), reject() 처리되는 예제

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {

    var status = 'succ';

    task1(status)
        .then(task2)
        .catch(errorTask);
});

/**
 * 첫번째 Promise Task Function
 */
function task1 (status) {
    return new Promise((resolve, reject) => {
        // 전달할 내용
        var text1 = 'Task 1'; 

        console.log(text1);

        if (status === 'succ') {
            // 1초 후 다음 함수 호출
            setTimeout(() => {
                resolve(text1);
            }, 1000);
        } else {
            reject({ err : 'error', code : '1' });
        }
    });
}

/**
 * 두번째 Promise Task Function
 */
function task2 (text1) {
    return new Promise((resolve, reject) => {
        // 전달할 내용
        var text2 = text1 + ' > Task 2'; 

        console.log(text2);

        if (status === 'succ') {
            // 1초 후 다음 함수 호출
            setTimeout(() => {
                resolve(text2);
            }, 1000);
        } else {
            reject({ err : 'error', code : '2' });
        }
    });
}

/**
 * 에러 처리 Task Function
 */
function errorTask (errMsg) {
    console.error(errMsg.code + '번 Task에서 에러가 발생하였습니다.');
}

</script>

코드가 살짝 복잡해 보일 수 있지만 위의 그림을 보시고 소스 코드를 보시면 이해하시는데 도움이 될 거예요!

 

함수 설명

task1 : 첫 번째 프로미스가 실행되는 함수

task2 : 두 번째 프로미스가 실행되는 함수

errorTask : 프로미스 처리 중 reject()이 실행되어 에러 처리를 수행하는 함수

 

task1 함수와 task2 함수에서는 비동기(async) 상황을 만들기 위해 setTimeout을 사용하여 1초씩 지연을 시켜줬습니다.

마지막으로 생성한 task 함수들을 하나로 연결하여 순차적으로 처리될 수 있도록 작성해 줬습니다.

 

task1(status)
    .then(task2)
    .catch(errorTask);

task1 함수에서 정상 처리가 되어 resolve를 실행하게 되면 then을 통해 task2로 인자값 text를 전달해 주고, 두 task에서 에러가 발생할 경우를 대비해 마지막에 catch를 걸어 에러 처리 함수를 추가해 줬습니다.

체이닝 방식을 사용하여 task1 처리가 끝나면 .then()을 연결하여 다음 task2로 넘겨주고, 그렇지 않고 중간에 에러가 발생하면 마지막에 .catch()를 이어주는 방식입니다.

 

그럼 위의 예제를 실행한 결과를 확인해 보기 위해 task1 함수에 인자로 상태값을 succ, fail 두 가지로 실행해 보겠습니다.

 

status 'succ'

status를 'succ'로 넘겼을 때

status 'fail'

status를 'fail'로 넘겼을 때

 

실행 결과와 같이 정상적으로 task1 -> task2 순차 처리 (에러 처리 포함) 되는 상황이 잘 구현된 듯합니다.

 

 

반응형

---

마무리

 오늘은 이렇게 자바스크립트의 프로미스(Promise)의 기능에 대해 알아봤습니다. 지난번에 정리했던 콜백지옥에서 조금은 더 간결하게 처리된 것 같은데요. 하지만 마지막 예제처럼 체이닝 방식으로 연결해 나가다 보면 결국 프로미스 방식도 콜백지옥의 상황을 느끼게 될 수도 있습니다. 그래서 마지막으로 나온 것이 async와 await입니다.

 그동안 제가 frontend 기술을 배우고 활용하고 자바스크립트를 꾸준히 공부하면서 느낀 바는 frontend에서 동기(sync)와 async(비동기)는 정말 중요하다고 느껴왔습니다. 그래서 앞서 정리한 글들에서 비동기를 다루는 setTimeout, callback, promise 등의 기술들을 정리해 왔습니다. 다음 포스팅에서는 async와 await에 대해 정리해 보도록 하겠습니다. :)

 

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

 

---