[6] Callback & Promise

📌 동기, 비동기

자바스크립트 언어는 동기적 언어이다.
동기적 언어란 위에서 부터 아래로 순차적으로 코드가 진행되는 것을 말한다.
그럼 비동기적 언어는 무엇일까?
어떤 작업을 요청하면 그 작업이 종료될때까지 기다리고 그 다음 작업을 하는 것이 아니라, 여러 작업을 동시에 하는 것을 말한다.

🏁 콜백함수란?

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수.
어떤 이벤트에 의해 호출되어지는 함수.
나중에 호출되는 함수.

대표적인 콜백함수로는 setTimeout 이 있다.

console.log('1');
setTimeout(()=>
 console.log('2');
, 1000) //1초 후에 2출력
console.log('3');
// 1,3,2

그럼 콜백함수는 비동기일때만 사용할까? ❌

콜백함수도 동기적으로 사용할 수 있다.

function printImmediately (print) {
  print();
}
printImmediately(()=> console.log('hello'));
// hello  

print라는 콜백을 받아서 print를 바로 실행한다.

function printImmediately (print) {
  print();
}
function printWithDelay (print, timeout) {
  setTimeout(print, timeout);
}
console.log('1');
setTimeout(()=>console.log('2'), 1000);
console.log('3');
printImmediately(()=> console.log('hello'));
printWithDelay(()=> console.log('async callback'),2000); 
 // 1 , 3 , hello , 2 순서대로 출력된다.

🔥 콜백 지옥

유튜브 드림코딩에서 간단한 콜백지옥을 만들어보았다. 코드를 보며 콜백지옥이 뭔지 이해해보자!🧐

class UserStorage{
  loginUser(id, password, onSuccess, onError) {
    setTimeout(()=> {
      if(
        (id === 'ellie' && password === 'dream') ||
        (id === 'coder' && password === 'academy')
      ){
        onSuccess(id);
      }
      else{
        onError(new Error('not found'));
      }
    }, 2000)

  }
  getRoles(user, onSuccess, onError){
    setTimeout(()=>{
      if(user === 'ellie'){
        onSuccess({name: 'ellie', role: 'admin'});
      }
      else{
        onError(new Error('no access'));
      }
    },1000);
  }
}
// 유저의 정보를 가져오는 것이다.


const UserStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt ('enter your password');
// 사용자의 아이디와 패스워드를 입력받는다. 
UserStorage.loginUser(
  id,   // 입력받은 아이디와 패스워드를 loginUser으로 전달하여 로그인이 되었다면
  password, 
  (user)=>{ /// 성공한다면 사용자의 역할 확인
    UserStorage.getRoles(
      user, 
      userWithRole => {
        alert(
          `Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
        );
      },
      error => { // 사용자의 역할을 받아오지 못했을 때
        console.log(error);
      }
    );
  },
  error => { // 로그인을 하지 못했을 때
    console.log(error);
  }
    )

이렇게 콜백함수 안에서 콜백함수를 호출하고, 또 그 함수안에 콜백함수를 호출하는 것을 콜백지옥이라고 한다.
지금은 코드가 짧은 편이지만, 만약 실제 현업에서 이렇게 콜백함수를 사용한다면, 가독성이 좋지 않고, 비지니스 로직을 파악하기 어렵고, 디버깅, 에러 처리가 어렵다. 또, 유지보수가 어렵다는 단점이 있다.

🏁 콜백지옥 해결책 = Promise

✅ Promise?

추상적으로 설명하자면, 만약 아직 출시되지 않은 수업을 A사용자가 미리 이메일을 등록하여 수업 출시되는 날 이메일로 전송될수 있게 예약을 한 후 (promise 등록), 수업이 출시된 날 A사용자에게 이메일이 전송된다.(Promise가 성공적으로 값 전달)
수업이 출시된 후 B사용자가 이메일 등록버튼을 누르면, 이미 출시된 후이기에 기다릴 필요없이 이메일이 바로 전송된다.(이미 성공적으로 처리된 Promise)

쉽게 말해, 비동기를 구현할 때 사용되는 객체이다.

프로미스는 상태정보를 가지는데,
panding(비동기 처리가 아직 수행되지 않은 상태 = 프로미스가 생성된 직후 기본 상태),
fulfilled(비동기 처리가 수행된 상태(성공)= resolve 함수 호출),
rejected(비동기 처리가 수행된 상태(실패)= reject 함수 호출),
seletted(비동기 처리 성공,실패와 상관없이 비동기 처리가 수행된 상태) 가 있다.

✅ Producer?

Promise 생성자 함수를 new 연산자와 함께 호출하면, Promise 객체를 생성한다. 비동기 처리를 수행할 콜백함수를 인수로 전달받는데, 이 콜백함수는 resolve 와 reject 함수를 인수로 전달받는다. 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행하고, 만약 비동기 처리를 성공하면 resolve 함수를, 만약 실패하면 reject 함수를 호출한다.

const promise = new Promise((resolve, reject) => {
  if (/*비동기 처리 성공*/) {
      resolve('result');
   }
  else {/*비동기 처리 실패*/
      reject('error');
   }
});

✅ Consumer?

만들어진 프로미스 객체 사용. then , catch , finally 이 있다.

Promise.prototype.then

then 메서드는 비동기 처리가 성공했을 때 호출되는 콜백함수(resolve),
비동기 처리가 실패했을 때 호출되는 콜백함수(reject) 총 두 개의 콜백 함수를 인수로 전달받는다.

Promise.prototype.catch

프로미스가 rejected 상태인 경우에만 호출된다.

Promise.prototype.finally

프로미스의 성공, 실패와 상관없이 무조건 한번 호출된다.

✅ Promise error

const getHen = () => 
  new Promise((resolve, reject)=>{
    setTimeout(() => resolve('🐔'), 1000);
  });
const getEgg = hen => 
  new Promise((resolve, reject)=>{
    setTimeout(() => reject(new Error(`error! ${hen} =>🥚`)), 1000);
  });
const cook = egg => 
  new Promise((resolve, reject)=>{
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });
getHen()
  .then(getEgg)
  .then(cook) 
  .catch(console.log)
  .then(console.log)

🧐 콜백지옥 해결!

class UserStorage{
  loginUser(id, password) {
    return new Promise((resolve, reject) => {
      setTimeout(()=> {
        if(
          (id === 'ellie' && password === 'dream') ||
          (id === 'coder' && password === 'academy')
        ){
          resolve(id);
        }
        else{
          reject(new Error('not found'));
        }
      }, 2000)
    });
  }
  getRoles(user){
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        if(user === 'ellie'){
          resolve({name: 'ellie', role: 'admin'});
        }
        else{
          reject(new Error('no access'));
        }
      },1000);
    });
  }
}
const UserStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt ('enter your password');
UserStorage
  .loginUser(id, password)
  .then(UserStorage.getRoles)
  .then(user => alert(
    `Hello ${userWithRole.name}, you have a ${userWithRole.role} role`
  ))
  .cathch(console.log);

이렇게 해결할 수 있다! 많이 직접 구현하면서 익혀나가야 할 것 같다!💪

---

드림코딩 강의를 듣고 작성하였습니다.