[javascript] 자바스크립트 Promise 알아보기

 

안녕하세요!

오늘은 자바스크립트의 내장 함수인 Promise에 대해 포스팅하려고 합니다. 

프로미스는 자바스크립트에서 비동기적인 작업을 처리하고 처리 결과를 다루는데 유용한 기능입니다. 

자바스크립트를 초창기 개발했을 때는 프로미스와 같은 기능이 없었기 때문에 비동기 작업을 처리할 때 콜백 함수를 중첩해서 사용해야 하는 "콜백 지옥"이라고 불리는 복잡한 상황이 종종 발생했습니다. 

하지만 Promise가 공식적으로 도입되면서 콜백 지옥을 탈출할 수 있는 방법이 생겨났습니다.

 

Promise는 비동기 작업을 보다 간결하고 직관적으로 처리할 수 있도록 도와주는 객체입니다. Promise를 사용하면 비동기 작업의 성공 또는 실패를 처리하는데 용이하며, 연속적인 비동기 작업을 보다 가독성 좋게 처리할 수 있습니다. 또한, 비동기 작업을 동기적으로 처리하는 것처럼 느껴질 수 있어 코드의 가독성과 유지보수성을 향상할 수 있습니다.

 

프로미스는 비동기적인 작업을 처리해야 하는 상황에서 매우 유용하며, 특히 여러 개의 비동기 작업을 연속적으로 처리해야 할 때 더욱 강력한 기능을 발휘합니다. 따라서 Promise를 사용하여 비동기 작업을 더 효율적으로 다룰 수 있도록 하겠습니다.

 

 

그러면 이제 Promise의 특징과 사용법에 대해 자세히 알아보겠습니다.

 

 

---

Promise의 특징

자바스크립트 프로미스(Promise)는 비동기 작업을 처리하고 결과를 다루는데 도움을 주는 객체로, 다음과 같은 특징을 가지고 있습니다:

 

1. 비동기 작업 처리

프로미스는 비동기 작업을 처리하는데 사용됩니다.

네트워크 요청, 파일 읽기, 데이터베이스 쿼리와 같은 비동기 작업을 처리할 때 유용하게 사용됩니다.

2. 상태 관리

프로미스는 세 가지 상태를 가집니다.
    - 대기(pending): 비동기 작업이 진행 중인 상태입니다.
    - 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
    - 거부(rejected): 비동기 작업이 실패한 상태입니다.

3. 체이닝

then() 메서드를 사용하여 여러 개의 프로미스를 연속적으로 체이닝 하여 처리할 수 있습니다.

이를 통해 비동기 작업을 순차적으로 실행하거나 다른 프로미스와 조합하여 사용할 수 있습니다.

4. 에러 처리

catch() 메서드를 사용하여 프로미스에서 발생한 에러를 처리할 수 있습니다.

이를 통해 예외 상황을 처리하거나 오류를 잘 관리할 수 있습니다.

5. 병렬 처리

Promise.all() 메서드를 사용하여 여러 개의 프로미스를 병렬로 처리할 수 있습니다.

이를 통해 여러 비동기 작업을 동시에 실행하고 모든 작업이 완료될 때까지 기다릴 수 있습니다.

6. 결합 가능성

Promise의 특징으로 인해 다른 라이브러리와 쉽게 결합하여 사용할 수 있습니다.

이를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다.

 

자바스크립트 프로미스는 콜백 지옥(callback hell)을 탈출하고 비동기 작업을 보다 효율적으로 처리하는데 큰 도움이 됩니다. 

따라서 프로미스를 적절히 활용하여 코드를 더욱 가독성 있고 유지보수성 좋게 작성할 수 있습니다.

 

---

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' });
    }
});

위의 소스 코드는 JavaScript의 Promise 객체를 생성하는 예시입니다.

 Promise 객체는 비동기 작업을 처리하고 성공 또는 실패에 따른 결과를 다룰 때 사용됩니다.

 

1. Promise 객체 생성
new Promise((resolve, reject) => { ... }) 코드는 Promise 객체를 생성합니다. 

이때 생성자 함수의 인자로는 두 개의 콜백 함수(resolve와 reject)가 전달됩니다.

2. 비동기 작업 처리
Promise 객체 내부에서 비동기 작업을 처리합니다. 

여기서는 status 변수가 'succ'인 경우와 그렇지 않은 경우를 나누어 처리합니다.

3. 성공 처리
status가 'succ'인 경우, resolve() 함수가 호출되어 Promise 객체가 성공적으로 완료됩니다. 

resolve() 함수는 비동기 작업이 성공했을 때 호출되며, 성공한 결과 데이터를 전달할 수 있습니다. 

이 예시에서는 1초 후 text1 값을 전달하도록 설정되어 있습니다.

4. 실패 처리
status가 'succ'가 아닌 경우, reject() 함수가 호출되어 Promise 객체가 실패 상태가 됩니다. 

reject() 함수는 비동기 작업이 실패했을 때 호출되며, 실패한 이유와 관련된 정보를 전달할 수 있습니다. 

이 예시에서는 { err: 'error', code: '1' } 객체를 전달하도록 설정되어 있습니다.

 

이렇게 생성한 Promise 객체를 통해 비동기 작업을 수행하고 성공 또는 실패에 따른 처리를 진행할 수 있습니다. 

resolve()와 reject() 함수는 Promise 객체의 상태를 변경하며, then() 메서드와 catch() 메서드를 이용하여 성공과 실패에 따른 결과를 처리할 수 있습니다.

 

 

Promise 처리 순서

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

위의 그림을 보면, 프로미스가 성공적으로 처리되면 resolve()가 호출되어 다음 프로미스의 콜백 함수로 전달되는 것을 확인할 수 있습니다.

프로미스는 비동기 작업의 처리를 더 편리하게 만들어주는 도구로, 여러 개의 비동기 작업을 순서대로 처리하거나 병렬로 처리하는데 유용합니다. 프로미스를 사용하여 비동기 작업을 처리하는 것은 코드의 가독성과 유지보수성을 높이는데 도움이 되며, 콜백 지옥을 피하는데 큰 도움이 됩니다.

 

따라서 기본적인 개념을 이해한 뒤에는 프로미스의 디테일한 부분을 조금씩 학습해 나가시는 것이 좋습니다. 학습하면서 점차 더 복잡한 상황에서도 프로미스를 잘 활용할 수 있을 것입니다.

 

---

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>

위의 소스 코드는 JavaScript의 Promise를 이용하여 resolve와 reject를 처리하는 예시입니다.

 

1. DOMContentLoaded 이벤트 리스너
페이지가 로드되면 DOMContentLoaded 이벤트가 발생하고, 해당 이벤트 리스너가 실행됩니다. 

이때, status 변수를 'succ'로 초기화하고, task1(status) 함수를 호출합니다.

2. task1 함수
task1 함수는 첫 번째 Promise 객체를 생성하여 비동기 작업을 처리합니다. 

status 값을 확인하고, 성공적으로 처리되면 resolve()를 호출하여 text1 값을 전달합니다. 

실패할 경우 { err: 'error', code: '1' } 객체를 전달하여 reject()를 호출합니다.

3. 체이닝
task1 함수가 성공적으로 처리되면, .then(task2) 메서드를 이용하여 다음 프로미스인 task2 함수를 호출합니다. 

task2 함수도 비슷하게 비동기 작업을 처리하며, 성공적으로 처리되면 resolve()를 호출하여 text2 값을 전달합니다. 

실패할 경우 { err: 'error', code: '2' } 객체를 전달하여 reject()를 호출합니다.

4. 에러 처리
프로미스 체인 중에 어떤 작업이든 에러가 발생하면 .catch(errorTask) 메서드를 이용하여 errorTask 함수를 호출합니다. 

이 함수는 에러 메시지를 출력하는 역할을 합니다.

5. 프로미스 실행
최종적으로 task1 함수를 실행하여 비동기 작업을 시작하고, 해당 작업이 성공적으로 처리되면 task2 함수가 호출되며, 그 결과도 성공적으로 처리되어 콘솔에 출력됩니다. 

만약 status 변수가 'succ'가 아닌 다른 값을 가지면, 해당 작업에서 에러가 발생하고 에러 메시지가 출력됩니다.

이렇게 Promise를 사용하여 비동기 작업을 처리하면 콜백 지옥을 피하고, 비동기 작업을 순차적으로 또는 병렬로 처리하는데 용이합니다. 

 

 

 

성공 결과

status를 'succ'로 넘겼을 때

실패 결과

status를 'fail'로 넘겼을 때

 

---

최종 정리

 

최종적으로, 오늘은 자바스크립트의 Promise 함수에 대해 간단하게 정리해보았습니다. Promise가 도입되기 이전에는 콜백 지옥에 빠져 개발을 해야 했기 때문에 소스 코드의 가독성과 유지보수성이 많이 떨어지는 어려움을 겪었습니다. 하지만 Promise가 등장함으로써 이러한 문제를 보완할 수 있게 되었고, 현재까지도 많이 사용되고 있습니다.

Promise를 이용하면 비동기 작업을 더 효율적이고 직관적으로 처리할 수 있습니다. 비동기 작업의 성공과 실패를 처리하는 것이 Promise의 핵심적인 특징이며, 이를 통해 코드의 구조와 가독성을 향상할 수 있습니다. 더 나은 개발 환경과 생산성을 위해 Promise를 적극적으로 활용해 보시기 바랍니다.

 

앞으로도 더 많은 자바스크립트 관련 내용을 포스팅하도록 하겠습니다.

 

감사합니다!