[JavaScript] Promise란 무엇인가?

자바스크립트의 꽃은 비동기 처리이다.

 

여기서 비동기 처리가 무엇일까?

---

먼저, 동기처리란 무엇인지 살펴보자.
--

우리가 커피숍에 갔다고 가정하고, 내 앞에 2명의 사람이 주문하고 있다고 생각해 보자.

 

나의 주문은 단순히 쿠키 하나를 포장하는 주문이고.
내 앞사람들의 주문은 빵과 커피 2잔을 포장하는 주문이라고 생각해 보자.

 

여기서 동기처리는 내 앞사람들 주문이 모두 처리될 때까지 나는 무한정 대기해야 한다.

그렇다면 나는 생각할 것이다.
"아니 쿠키 하나만 주면 되는걸 내가 앞사람들 주문까지 다 기다려야 되나?"
-> 이것이 동기 처리의 단점이다. 사실 이론상으로는 앞 주문을 먼저 처리하는 것이 맞지만, 굉장히 비효율 적이다.

---

그럼 비동기 처리란 무엇인가?
앞 상황에서 굉장히 센스 있는 직원이 나는 쿠키만 빨리 주면 되기 때문에 앞사람 주문이 완료되기 전 나에게 쿠키를 먼저 하나 준 것이다.

이렇게 되면 직원 입장에서는 빨리 끝낼 수 있는 일은 빨리 쳐냈기 때문에 편하고, 나도 빨리 다른 업무를 보러 갈 수 있어 좋다.

이것이 비동기 처리이다.

---

그렇다면 왜 자바스크립트의 꽃이 비동기 처리일까?

 

자바스크립트는 싱글스레드 언어로, 하나의 스레드에서 하나의 작업만 수행할 수 있다.

아무래도 웹 서비스의 경우 이벤트도 많고, 사용자 인터렉션, 서버 요청 또한 많다.

 

때문에 비동기 처리가 없으면, 사이트가 멈춰버리는 현상까지도 발생할 것이다.

 

그렇기 때문에 callback, promise, async/await 등 비동기 기술이 엄청 중요해졌고 발전했으면

JS가 인기를 끌게 된 이유이다.

 

자 그럼 Promise가 무엇인지 살펴보자.

---

Promise

Promise는 자바스크립트의 내장 객체로서, 비동기 처리의 완료 & 실패를 나타낸다.

 

Promise를 생성하는 코드를 먼저 살펴보자.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve(결과값);
  } else {
    reject(에러메시지);
  }
});

 

여기서 new Promise는 새로운 Promise를 생성하는 함수 호출 코드이다.

Promise는 resolve, reject 이렇게 두 개의 매개변수를 가지며 말 그대로
reslove = 결과(성공)
reject = 거부(실패)
를 의미한다.

 

이렇게 resolve와 reject에 담긴 값은, Promise 생성자 함수로 만든 객체의 내장 메서드(.then & .catch)를 이용하여 더 편하게 나타낼 수 있다.

코드로 살펴보면

promise
  //resolve(성공)
  .then((result) => {
    console.log("result:", result);
  })
  
  //reject(실패)
  .catch((error) => {
    console.log("error: ", error);
  })

 

이렇게 작성 가능하며 위 코드를 합치고

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve("성공");
  } else {
    reject("서버 오류");
  }
});

promise
  .then((result) => {
    console.log("result:", result);
  })
  .catch((error) => {
    console.log("error: ", error);
  })

 

실행할 경우

result: 성공 //성공 시

or

error: 서버오류  //실패 시

 

이렇게 출력될 것이다.

---

번외로, 성공 및 실패 여부와 상관없이 Promise결과 값에 출력을 추가할 수 있는 메서드가 있다.

바로 .then / .catch와 같은 구조인 .finally이다.

 

코드로 살펴보면

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  if (성공) {
    resolve("성공");
  } else {
    reject("서버 오류");
  }
});

promise
  .then((result) => {
    console.log("result:", result);
  })
  .catch((error) => {
    console.log("error: ", error);
  })
  .finally(() => {
    console.log("promise 종료");
  });

 

이렇게 추가가 가능하며 위 결과 값과 비교해 보면

result: 성공 //성공 시
promise 과정 종료  //fianlly로 인해 생성된 출력

or

error: 서버오류  //실패 시
promise 과정 종료  //fianlly로 인해 생성된 출력

 

이렇게 출력된다.