[JavaScript] Promise { <pending> } 문제 해결 (1) - 비동기 처리 및 콜백 함수

출처 :https://velog.io/@beberiche/promise-asyncawait

 

 이번 글은 사이드 프로젝트를 진행하다가 엄청 헤맸던 부분인 Javascript의 Promise에 관한 글입니다. 우선 헤매게 된 과정부터 공유드리고자 합니다. 아래의 caver-js 코드는 앞서 작성한 'caver-js 설치 및 KAS API 호출' 글(https://dslyh01.tistory.com/25)에서 설명드린 코드와 거의 동일합니다. (차이점을 발견하셨으면 해당 차이점이 본 글에서 발생한 문제점의 해결 방법입니다.) caver.klay.getBlockNumber() 함수는 현재의 블록 넘버를 가져오는 코드입니다. 하지만 결과를 살펴보면 현재의 블록 넘버가 결과로 출력된 것이 아니라, 'Promise { <pending> }' 이라는 결과가 나온 것을 볼 수 있습니다. caver.klay.getBlockNumber() 함수의 docs를 살펴보면, 해당 함수의 리턴값에 대한 설명에 'Promise는 string을 반환합니다.'라고 작성되어있습니다.

 

const Caver = require('caver-js')
const accessKeyId = "{your accessKeyId}";
const secretAccessKey = "{your secretAccessKey}";

const option = {
  headers: [
    {name: 'Authorization', value: 'Basic ' + Buffer.from(accessKeyId + ':' + secretAccessKey).toString('base64')},
    {name: 'x-chain-id', value: '8217'},
  ]
}

const caver = new Caver(new Caver.providers.HttpProvider("https://node-api.klaytnapi.com/v1/klaytn", option))

function testFunction() {
  // Get Recent Block Number
  const test = caver.klay.getBlockNumber();
  console.log(test);
}

testFunction()

 

PS C:\...\project> node test.js
Promise { <pending> }

 

 그럼 Promise에 대한 개념부터 알아볼 필요가 있을 것 같습니다. 우선 관련된 개념들에 대해 글들을 작성한 이후, 위에서 발생한 문제를 해결하는 글을 작성할 예정입니다. Promise에 대한 전체적인 개념은 'joshua1988'님의 블로그(https://joshua1988.github.io/)를 참고하여 작성되었으므로, 유사한 부분이 있음을 미리 알려드립니다. Promise는 간단하게 'Javascript의 비동기 처리에 사용되는 객체'를 의미합니다.

 

 여기서 또 낯선 개념인 비동기 처리라는 단어가 등장하게 됩니다. 이번 글에서는 Promise를 이해하기 위해 우선 1) 비동기 처리와 2) 콜백 함수에 대해 알아볼 것입니다. 일단 의미부터 살펴보면 비동기 처리는 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 Javascript의 특성'을 말합니다. 위의 코드 예시만 봐도 프론트 측에서는 대부분 API나 JDBC를 통해 데이터를 요청하게 되는데, 모든 요청들을 순서대로 기다리게 되면 웹을 표출하는데 너무 오래걸리므로 Javascript에서 비동기 처리는 필수적입니다.

 비동기 처리를 이해하기 위해 자주 사용되는 setTimeout() 함수로 예시를 보여드리도록 하겠습니다. setTimeout()은 설정한 시간 이후에 로직을 실행하는 함수입니다. 아래의 코드를 보면, 순서대로 1이 출력되고 5초를 기다렸다가 2가 출력된다고 생각할 수 있지만, Javascript의 비동기 처리 특성으로 인해 1 이후에 3이 출력되는 것을 확인할 수 있습니다.

 

console.log(1);

setTimeout(function() {
	console.log(2);
}, 5000);

console.log(3);

/*
1
3
2
*/

 

 비동기 처리가 기본이지만 일부 코드에서는 순차적인 실행이 필요할 수도 있습니다. 요청에 대한 응답을 받은 후 특정 함수가 실행될 필요가 있을 경우에는 콜백 함수를 사용합니다. 다음의 예시와 같이 함수 내에 인자로 넣어서 활용하는데, 콜백 함수를 많이 사용해야하는 경우, 일명 콜백 지옥(Callback Hell) 현상이 발생할 수도 있습니다. 콜백 지옥 현상은 코드 가독성도 떨어뜨릴 뿐만 아니라, 추후 로직을 변경하기도 어렵기 때문에 해당 현상을 피하는 것이 좋습니다.

 

// 기본 콜백 함수 예제
function add(x, callback) {
    let sum = x + x;
    console.log(sum);
    callback(sum);
}

// 콜백 지옥 예시
add(2, function(result) {
    add(result, function(result) {
        add(result, function(result) {
            console.log('finish!!');
        })
    })
})

/*
4
8
16
finish!!
*/

// 출처: https://inpa.tistory.com - 자바스크립트 콜백 함수

 

 이번 글에서는 Promise Pending과 관련된 문제를 해결하기 위해 알아야 할 개념인 비동기 처리와 콜백 함수에 대해 간략히 살펴봤습니다. 1) 비동기 처리, 2) 콜백 함수, 각각을 하나의 글로 써야할 만큼 중요하고 더 많은 내용을 포함하고 있지만, 오류를 해결하기 위한 정도로 간단하게만 살펴봤습니다. 해당 개념들에 대해 더 자세하게 알고 싶으신 분들은 아래 참고 글 및 다양한 자료들을 공부하는 것을 추천드립니다. 다음 글에서는 보다 자세한 Promise 개념에 대해 살펴보겠습니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다.

 

[다음 글]

1) [JavaScript] Promise { <pending> } 문제 해결 (2) - Promise

2) [JavaScript] Promise { <pending> } 문제 해결 (3) - async & await

 

<참고>

 

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수