🤝🏻 Promise란?

'약속'입니다. 미래에 일어날 일을 약속하는 것으로
비동기 작업을 처리할 때 사용되는 객체입니다.

✅ 비동기? 동기? 어디서 많이 들어봤는데?

여럿 개발 과정에서 동기, 비동기라는 말을 많이 들어 보시지 않았나요?

✔️ 동기

동기는 직렬적으로 작동하는 방식입니다.

✔️ 비동기

비동기는 병렬적으로 작동하는 방식입니다.

여기서 보이는 동기와 비동기의 차이점이 있습니다.
비동기는 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것이죠.

한번 사진을 통해 비교해볼까요?
[ 출처 | What every programmer should know about Synchronous vs. Asynchronous Code]

왼쪽 그래프는 '비동기'로 작동하는 방식입니다.
한번에 여러 Task(빨강, 민트, 옐로 막대그래프)가 동시에 병렬적으로 실행되는 모습을 보입니다.

반면, 오른쪽 차트는 '동기'적으로 작동하는 방식입니다.
하나의 Task가 끝날 때 까지 기다렸다가 다음 Task가 실행되는 모습을 볼 수 있죠.

색깔 순서대로 빨강이 실행되고 민트가 실행되고 노랑이 실행됩니다.
그렇기에 총 실행 시간으로 따지자면 '동기' 방식이 더 느리게 됩니다.

NVIDIA GPU와 CPU차이
해당 링크는 NVIDIA에서 CPU,GPU를 소개하는 영상입니다.
저는 해당 영상을 보면서 동기(CPU) 비동기(GPU)를 이해하는데 도움을 얻었습니다.
필요하신분은 시청해주시면 한번 봐주세요 :) (매우 짧습니다 😉)

자 그럼 다시 돌아가보죠

✅ '동기(synchronous)'란 무엇일까?

동기는 직렬적으로 Task를 수행하는 방식입니다.

즉, 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어집니다.
그렇다면 앞에 Task가 처리되어야 나머지 뒤에 Task들이 실행 할 수 있는 겁니다.
출처 | poiemaweb

✅ '동기(synchronous)'란 무엇일까?

비동기는 병렬적으로 Task를 수행하는 방식입니다.
Task가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 Task를 실행한다.
출처 | poiemaweb

1. 예를 들어 서버에서 데이터를 가져와서 화면에 표시하고자 할때 서버에 Task데이터를 요청하게됩니다.
2. 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 Task를 수행하게 됩니다.
3. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 Task를 계속해 수행합니다.

자바스크립트의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작합니다.

장점

자바스크립트에서 빈번하게 사용되는 비동기식 처리 모델은 요청을 병렬로 처리하여 다른 요청이 블로킹(blocking, 작업 중단)되지 않습니다.

단점

하지만 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬(Callback Hell)이 발생하는 단점이 있습니다.
콜백 헬은 가독성을 나쁘게 하며 실수를 유발하는 원인이 됩니다.
하단 코드는 콜백 헬이 발생하는 전형적인 사례입니다.

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3) {
      step4(value3, function(value4) {
        step5(value4, function(value5) {
            // value5를 사용하는 처리
        });
      });
    });
  });
});

✅ Promise

동기 비동기에 대한 지식을 채웠으니 해당 글의 중심인 Promise로 돌아와보자

비동기 작업을 처리할 때 사용되는 객체(Promise 객체)

✨ 특징

• Promise는 미래에 완료될 작업을 나타내는 객체입니다.
• 작업이 완료되면 결과를 반환(resolve)하거나, 작업이 실패하면 에러를 반환(reject)합니다.
• 주로 .then()과 .catch()구문을 사용해 성공 시와 실패 시의처리를 구분합니다.

✔️ 예제 코드

코드를 보며 무슨 말인지 보도록하죠
하단 코드는 Promise객체를 이용해 hello를 입력시
console에 정상적으로 성공, 실패 내용이 반환 되는지 확인하고자한 코드입니다.

//Promise는 객체이기 때문에 생성자(new)를 이용해 만들게됩니다.
const myPromise = new Promise((resolve, reject)=>{
  	//Promise 객체 생성시 인자로 call back 함수를 넣을 수 있습니다.
  	//이러한 call back 함수 안에서 비동기 작업을 처리합니다.
   //어떤 작업을 진행하고 결과를 알려줘~ 하고 약속한 것 이죠
	//myPromise를 통해 약속의 객체를 받습니다.
    setTimeout(()=>{
        const text = prompt(`"hello"를 입력하면 선물을 줄께`);
        if(text === "hello"){
            resolve( '💻'); //승인
        }else{
            reject('error message') //실패
        }
    }, 2000); //2초 후 결과값 반환
});

myPromise
    .then((result)=>{
        console.log('result',result);
    })
    .catch(()=>{
        console.log("err:", err);
    })
    .finally(()=>{
        console.log("finally");
    })

코드를 자세히 살펴봅시다.

Promise 객체 생성시(생성자 new) 인자로 call back 함수를 안에 넣을 수 있습니다.

//myPromise를 통해 약속의 객체를 받습니다.
const myPromise = new Promise(()=>{ 
  	//해당 공간에는 callback(비동기) 함수를 집어 넣으면 됩니다.
	//그래서 상단 코드에서는 setTimeout(비동기)이 사용된것입니다.
	}

이러한 call back 함수 안에서 비동기 작업을 처리하게되는겁니다.

즉 "어떤 작업을 진행하고 결과를 알려줘~" 하고 약속(Promise)한 것 이죠

두번째 특징에서

• 작업이 완료되면 결과를 반환(resolve)
• 작업이 실패하면 에러를 반환(reject)
  이렇게 소개드렸습니다.

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {// resolve, reject 사용시 선언
  // 비동기 작업을 수행한다.
      setTimeout(()=>{
        const text = prompt(`"hello"를 입력하면 선물을 줄께`);//prompt로 텍스트 전달해줘
        if(text === "hello"){
            resolve( '💻'); //승인시 출력
        }else{
            reject('error message') //실패시 출력
        }
    }, 2000); //2초 후 결과값 반환
  }
});

해당 코드를 보면 setTimeout으로 비동기 작업을 실행하게되고
prompt에 원하는 값을 입력합니다.

hello를 입력시 💻정상적으로 출력이되는 모습을 볼 수 있습니다.

그렇다면 다른 값을 넣어보겠습니다.
이렇게 에러를 출력하는 모습을 볼 수 있습니다.

✔️ 비동기 처리 결과

이때 Promise는 비동기 처리가 성공(fulfilled)하였는지 또는 실패(rejected)하였는지 등의 상태(state) 정보를 가지게됩니다.

• pending: 비동기 처리가 아직 수행되지 않은 상태
• fulfilled: 비동기 처리가 수행된 상태 (성공)
• rejected: 비동기 처리가 수행된 상태 (실패)
• settled: 비동기 처리가 수행된 상태 (성공 또는 실패)

✔️ Promise 호출 과정

하단 부분은 비동기 함수가 정상적으로 작동했을때
.then() , .catch()이라는 메소드에 callback함수로 담아서 확인이 가능합니다.

then()

비동기 함수 내에서 Promise 객체를 생성하고 그 내부에서 비동기 처리를 구현합니다.
이때 비동기 처리에 성공하면 resolve 메소드를 호출합니다.
이때 resolve 메소드의 인자로 비동기 처리 결과를 전달 하는데, 이 처리 결과는 Promise 객체의 후속 처리 메소드로 전달됩니다..

catch()

만약 비동기 처리에 실패하면 reject 메소드를 호출합니다.
이때 reject 메소드의 인자로 에러 메시지를 전달합니다.
이 에러 메시지는 Promise 객체의 후속 처리 메소드로 전달되며 후속 처리 메소드에는 대표적으로 then(Promise 반환)과 catch(예외)가 있습니다.

myPromise
    .then((result)=>{
        console.log('result',result);
    })
    .catch(()=>{
        console.log("err:", err);
    })
    .finally(()=>{
        console.log("finally");
    })

✔️ Promise 체이닝

비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우가있습니다.
이때 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 콜백 헬이 발생하게됩니다.

프로미스는 후속 처리 메소드인 then이나 catch로 메소드를 체이닝(chainning)하여 여러 개의 프로미스를 연결하여 사용할 수 있기 때문에 콜백 헬을 해결할 수있습니다.

따라서, then 메소드가 Promise 객체를 반환하도록 하면(then 메소드는 기본적으로 Promise를 반환한다.) 여러 개의 프로미스를 연결하여 사용할 수 있습니다.

출처

짐코딩 유튜브
velog_khy226
poiemaweb