Node.JS - Promise Object 이해하기

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 본격적으로 실제 서버를 구현하기 위해, Promise, Async,Await 3가지의 대한 학습을 하고자 합니다.

이 3개의 객체는 한마디로 정의하자면, JavaScript 상에서 "비동기" 처리를 위한 Object, 즉 객체입니다.

 

JavaScript 에 대한 이전 포스팅들을 보셨다면, 동기와, 비동기 개념에 대해서도 이해하고 있으시리라 생각합니다.

동기의 경우, JavaScript 의 특성인 Single Theard 처리 방식으로, 코드의 순서대로, 한줄씩 처리하는 그러한 개념이 아니라, Backgroud 영역으로 Code 를 보내서 이전의 Code 수행이 완료되지 않더라도, 코드를 처리하는 개념입니다. 

 

이번 포스팅에서는 Promise 에 대해서만 다루어 보도록 하겠습니다.

 

참고 URL

MDN - JavaScript - About Promise Object 

 

============

1. Promise 기본 이해하기

2. Promise 의 State (상태) 이해하기 / 예제 작성

============

 

1. Promise 기본 이해하기

먼저 Promise 객체에 대한 기본적 개념은, "객체"가 생성된 시점에는 아직 결정/처리되지 않은 값을 위한 대리자입니다.

즉, 이 Promise 객체를 사용하면, Promise 는 이후에 설명하게 될, 상태값에 따라서, 초기 상태에서 연산이 모두 종료 된 이후에 IF 문처럼 성공/실패에 따른 결과값을 반환하는 객체라고 이해하시면 간단하게 이해가 가능합니다.

 

이를 쉽게 이해하려면 아래의 예시를 가지고 이해하면 쉽습니다.

 

Promise 기본 작성방법

Promise(() => {})

여기서 인자값의 경우, 위에서 설명한 대로, 성공과 실패 두개의 인자가 들어가야 하며, 이를 이용해서, 실제 Promise 가 동작하는 예시 코드를 작성하면 아래와 같이 작성해봅시다.

 

const jieun = new Promise ((resolve, reject) => {
    setTimeout((e)=>{
        resolve('Hynn Blog')
    },3000)
})

jieun.then((resolve) => {
    console.log("Newbie" + resolve)
})

 

위 코드를 그대로 해석하면, 아래와 같습니다.

먼저 상수(const) 변수인 jieun 에 Promise 를 사용하여 애로우 함수를 이용해서 비동기코드로 동작되게끔 작성을하고, 인자에는 위에서 언급한데로 Resolve(성공) , Reject (실패) 두개의 인자를 넣고, Resolve가 됬을 경우 "Hynn Blog" 가 "3초" 뒤에 출력되도록 합니다.

 

그리고 .Then 은, "Jieun" 이라는 변수가 실행이 끝나면 호출되는 Method 로, resolve 에 대한 값을 담고, Console Log 에 "Newbie" 라는 String 문자열과 resolve 결과 값을 출력하도록 합니다.

 

이를 실제로 Node 를 사용하여 실행을 하면 아래와 같은 값이, "3초" 뒤에 출력됩니다.

결과 값

2. Promise 의 State (상태) 이해하기 / 예제 작성

Promise Object 에는 3가지의 상태값이 있습니다.

이를 먼저 알기 위해서는, 위에서 작성한 예제 코드에서, 아래와 같이 작성 후,

Node 를 실행하여 어떻게 값이 출력되는지 확인해보도록 하겠습니다.

 

const jieun = new Promise ((resolve, reject) => {
    setTimeout((e)=>{
        resolve('Hynn Blog')
    },3000)
})

console.log(jieun)

 

이걸 이제 Node 를 이용해 실행을 하면 아래와 같은 값을 받아보실 수 있을 것입니다.

Promise { <Pending> }

이것이 위에서 말한, Promise 의 상태값 입니다.

이 Promise Object 는 3가지의 상태값이 존재합니다. 이에 대한 이해 역시 반드시 필요합니다.

Promise State

위에서 나타난 예제코드의 경우, 실제 Promise 객체는 생성이 되었지만, 아직 실행하여 결과를 출력하지 않은 상태입니다.

즉 이 단계에서는 "Pending" 이라는 단어 말 그대로, 연산을 성공하지도, 실패하지도 않은 기본 상태값을 뜻합니다.

 

여기서 이제, 연산을 실행함으로서 나타나는 결과인 Fulfill (성공), Rejected (실패) 의 두 결과를 출력하도록 설계되어 있고, 

이는 JavaScript 에서의 조건문인 " IF " 문과 유사하다고 할 수 있습니다.

즉, 위에서 나타난 코드는 "Fulfill" 이 될 경우 Console log 에서 "Hynn Blog" 를 출력하도록 작성되었지만, 실패일 경우에는 별도의 반환값이 존재하지 않는, 오류 상태로의 출력이 진행될 것입니다.

 

이를 이제 작성하기 위해서는 2개의 Method 를 사용해야 합니다.

바로 아래의 2개 Method 입니다.

 

Promise Method

Promise.prototype.then()
Promise.prototype.catch()

먼저 .then 부터 살펴보도록 하겠습니다.

 

".then" 은 먼저, 두개의 Callback 함수를 인자값으로 받습니다.

첫번째 인자값은 Promise 의 결과 값이 "성공" 일 경우, 하나는 "실패(거부)" 일 경우를 위한 Callback 함수입니다.

 

예시를 먼저 살펴보도록 하겠습니다.

 

.Then 작성예시

const jieun = new Promise ((resolve, reject) => {
    resolve('Hynn Blog'),
    reject('Tistory Blog')
})

jieun.then((resolve, reject)=>{
    console.log(resolve)
}, (error)=>{
    console.log(reject)
})

위에서의 예시 코드는 아래와 같습니다.

상수형 변수로 "jieun" 을 선언 후, 그 안에 Promise Object 를 생성,

그리고 성공과 실패에 대한 매개변수를 담고, 각각의 매개변수에 값을 담습니다.

 

Resolve 에는 "Hynn Blog", Reject 에는 "Tistory Blog", 즉 성공일 경우, Hynn Blog , 실패일 경우 Tistory Blog 값을 담습니다.

 

그리고 ".Then" Method 를 사용하여 역시 매개변수로 "Resolve", "Reject" 를 담고, 각각 Console log 를 성공, 실패의 경우에 따라 나누게 됩니다.

이를 출력하게 되면, 결과값을 "성공"이 되므로, "Hynn Blog" 가 출력되고, reject 의 경우, 성공이 되었기 때문에, 출력이 되지 않습니다.

 

반면에, ".catch" 라는 Method 역시 존재합니다.

이 Method 는 ".Then" 과 다르게, "실패(거부)" 될 때, 호출할 함수를 예약합니다. 

 

즉 위의 예시를 조금 변환해보면 아래와 같이 작성이 가능합니다.

const jieun2 = new Promise ((resolve, reject) => {
    resolve('Hynn Blog')
})

jieun2.then((resolve) => {
    console.log(resolve)
    throw new Error('Good day')
})
.catch((e)=>{
    console.error(e.message)
})
.then(
    () => console.log('Good day'),
    () => console.log('RED SUN')
    )

 

위의 예제를 보면, "jieun2" 라는 상수형 변수에 아래와 같은 진행단계를 나타냅니다.

1. Promise Object 생성
2. resolve,reject 매개변수 담기
3. ".then" 을 사용하여 성공에 대한 매개변수를 담고, Console log(resolve) 출력
4. throw 문을 사용하여, 새로운 에러 발생 처리에 "Good day" 값 담기
5. .catch 에 Console.error 에 e.mssage 값 출력
6. .then 을 이용하여 다시 Console.log 로 두개의 경우 각각의 결과 값 출력 

이렇게 할 경우, 아래의 값이 출력됩니다.

1. Hynn Blog
2. Good day
3. Good day

흐름도 상, 첫번째 Console Log 는 성공한 값이 출력됩니다. 그러므로 지정된 값이 출력됩니다.

하지만 두번째 Console Log 는 Throw 로 예외발생으로 Error Message, 즉 Reject 상태로 바뀌므로, Error 가 출력됩니다. 그리고, 마지막 ".Then" 에서도 "Good Day" 가 출력되고, 출력이 종료됩니다.

 

즉, ".catch"는 오류가 발생하지 않는다면 실행을 하지 않는 Method 이기도 합니다.

이는 실제 사용시, 서버에서 데이터를 가져오거나 처리하는 과정에서 "오류"에 대한 처리를 지정할 때 사용되는 Method 입니다.

 

이를 그림도로 표현하면 아래와 같습니다.

 

 

 

Promise 에 대한 기초설명은 여기까지입니다.

이제 다음 포스팅에서는 Promise 가 등장하면 빠지지 않고 사용되는 Async, Await 에 대해 같이 학습해보도록 하겠습니다.

 

다음 포스팅에서 뵙겠습니다.

 

감사합니다.