Promise 초보도 한번에 정리하기 / promise + then 으로 동기식 데이터 처리하는 방법

필자는 현재 강의를 들으며 공부중인데 세상에나 promise 부분이 이해가 전혀 안갔다

전공자인 나도 이런데 비전공자인 팀원들은 큰일이 났겠는데 싶으면서 구글링을 통해 개념을 정리했다

내 머리 속 정리할겸 , 나와 같은 코린이들에게 도움이 되고자 작성한다

우선 이 글은 이해되지 않는 부분들을 정리하고자 함이니 중요하지 않은 디테일들은 제외하고 글을 시작하겠다

 

---

Async

비동기 라는 뜻이다

간단한 예시로 설명해보자면

위에서 아래로 차례차례 코드를 읽어가는데 처리가 오래 걸리는 코드가 있다면 ?

동기적 처리 (Sync) = 처리가 오래걸리는것이 완료가 되면 다음 코드로 넘어간다

비동기적 처리 (Async) = 처리가 오래걸리는것이 완료가 되기 전에 다음코드로 넘어간다 

라고 보면 간단하다 

 

그렇다면 완료가 되기전에 다음코드로 넘어간다는게 무슨말이지 라는 궁금증이 생길텐데

이 부분을 코드를 통해 눈으로 확인해보자

function main() {
  function test() {
    console.log("set time out 이 실행되었습니다");
  }

  console.log("코드가 실행되었습니다");
  setTimeout(test, 1000);
  console.log("종료되었습니다");
}

main();

위 코드를 설명해보자면 

setTimeout으로 1초 이후에 (1000이라는 숫자가 1초임) test라는 함수를 실행하라 이다.

 

동기적 처리방식이였다면 

코드가 실행되었습니다 

(test가 1초뒤에 실행되야하니까 그 1초를 기다리고 1초가 지나면)

set time out이 실행되었습니다

종료되었습니다

 

이렇게 찍혔을 것이다.

하지만 비동기인 JS 는

코드가 실행되었습니다

(setTimeout안에 있는 test라는 함수를 실행시켜야하는데 1초를 기다리라네 ? 다음거 먼저 하자)

종료되었습니다

(1초 지났네 ? 이제 test 실행하자)

set time out 이 실행되었습니다

 

이렇게 처리가 되는것이다. 글로 쓰니 길어보이는데 이해는 잘 되셨을거라고 생각하고...

 

이때 , 동기적 처리방식처럼 실행하고 싶다면 JS에서 어떤 기능을 사용해야 할까 ?

---

 

 Promise 

첫째로 는 promise 다

말 뜻 그대로 약속이다. 더 쉽게 말하자면 나는 약속한걸 언젠간 꼭 처리할거다 ! 라는 기능을 갖고 있다

프로미스는 JS에서 비동기 처리를 동기로 실행 할 수 있도록 돕는 객체이다

'돕는' 이 포인트다. 

사용하는 방식은 promise + await , promise + then 으로 사용할 수 있다

하지만 await 을 사용하는 방식은 현 게시글 주제와 안맞기 때문에 따로 작성하겠다

차근차근 promise 를 어떻게 사용하는지부터 알아보자 !

new Promise(executor);

new Promise((resolve, reject) => {
	
});

 

이런 형식을 가지고 있다 executor, resolve, reject 이게 다 뭐야 !! 하는 궁금증을 함께 풀어보자

(필자가 보던 강의에서는 이 부분을 간단히 설명하고 넘어가서 저걸 그냥 넣어준건지 아니면 약속된 형식인건지 이해가 안되었다)

 

executor 는 집행자라는 뜻이다. 따로 뭔가 안해도 바로 실행된다는 말이다.

즉 , Promise가 만들어질때 자동으로 실행된다는 말.

저 자리에는 함수만 들어갈 수 있다. ( executor는 형식일 뿐 그 자리에 다른게 들어간다)

 

그럼 아랫줄에 있는 

new Promise((resolve, reject) => {  }); 이건 뭘까 ?

가로 안에 있는 => 이것이 화살표 함수라는 것은 모두가 알 것 이다 (모르겠다면 ,,,,,, JS 기초부터 다시 다져보기 !)

executor 안에 (resolve, reject) => {  } 이것을 넣은 것.

한마디로 우리가 실제로 쓸때는 

new Promise((resolve, reject) => {
	// 명령문
});

이 형식을 쓰게 된다는 것이다

우리같은 코린이들은 이렇게 사용한다는 것을 알고 , executor 가 무엇인지만 짚고 넘어가면 된다

그렇다면 resolve, reject 는 무엇일까 ? 위에 했던것처럼 이 자리에 무엇인가 넣는 걸까 ?

아니다. (필자는 이거 때문에 강의 듣다가 뛰쳐나와서 구글링했다)

 

resolve 는 성공했을 때 ,  reject 는 실패했을 때 이다.

성공했을 때 , 실패했을 때면 어떡하라고 ? 라는 질문이 나는 들었다. 그래서 이렇게 쓰는거다

new Promise((resolve,reject)=>{
    if(조건){
        resolve('성공');
    }
    reject('실패');
})

짜잔 !!!

결국은 promise 가 성공했을때와 실패했을때를 구분해서 사용해야하만 하는 규칙이 있는 것이다

이제 promise의 사용법을 알았으니 아까의 setTimeout 예제를 promis를 통해 동기적으로 처리해보자 !

 

첫번째로는 promise + then 을 사용해보자

const promiseTest = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("set time out 이 실행되었습니다");
  }, 1000);
});

promiseTest.then(function (data) {
  console.log("코드가 실행되었습니다");
  console.log(data);
  console.log("종료되었습니다");
});

우선 set time out 이 코드가 실행되었습니다 , 종료되었습니다 사이에 들어가게 만드는 로직이 예시였기 때문에

reject 는 사용하지 않았다. 이거에 대한 궁금증도 하단에 첨부하겠다. 우선 이 코드 먼저 알아보자 !

 

promiseTest 라는 객체 안에 promise 를 할당해주고 

.then 으로 실행해주었다

then 의 기능을 간단하게 설명하자면 , .then 앞에 있는것이 끝나고 나면 () 가로 안에 있는 코드를 실행한다는것 !

그래서 promiseTest 가 먼저 실행되고 1초가 지나고 나면

코드가 실행되었습니다 찍힌 후

data에 값이 들어와서 set time out 이 실행되었습니다

후에 종료되었습니다 가 나오는것이다.

 

그럼 여기서 질문 ! set time out 이 실행되었습니다 가 찍힐때 1초가 기다려져야 하는것 아닌가요 ?

맞다. 하지만 지금과 같은 예제로 promise와 then을 어떻게 사용하는지만 알고 넘어가야한다

왜요 ?  우리가 JS를 사용하면서 동기식 처리가 필요한때는 주로 데이터를 가져오고 나서 뭔가를 해야 할 때다.

그걸 할 줄 알아야한다 !

왜 setTimeout을 사용했냐면 내가 들었던 강의 예제가 저것이기 때문 ..

또한 reject 를 사용하지 못한것도 실패할 상황 자체가 없기 때문이다.

그렇다면 resolve, reject  를 모두 사용하고 , 데이터를 처리하는 예제를 보면서 지금까지 배운 지식들을 정리해보자