[aysnc..await pt1] Welcome to Callback Hell

Callback

정의: 함수에 파라미터로 들어가는 함수
용도: 순차적으로 실행하고 싶을 때 쓴다.

setTimeout(function (){

//1초 경과후에 실행
callback함수 ->
}, 1000)
특징:
다른데서 만든 function도 콜백함수로 넣을 수 있음

document.querySelector('.bottn').addEventListener('click',함수명)
setTimeout(function 함수명({

},1000))

원리

function first(파라미터){
파라미터 ()
}
function second(){

}
//파라미터에 second넣어서 first ㅎ마수 실행
first(second)

용도: 순차적으로 실행하고 싶을떄.

해당 예시:

class UserStorage {
  //사용자 로그인, 아이디, 비번, 성공하면 , Error가 있으면 콜백 함수
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === "calvin" && password === "password") ||
        (id === "park" && password === "password")
      ) {
        onSuccess(id);
      } else {
        //아이디가 없으면
        onError(new Error("id not found"));
      }
    }, 2000);
  }

  getRoles(user, onSuccess, onError) {
    setTime(() => {
      if (user === "calvin") {
        onSuccess({ name: "calvin park", role: "admin" });
      } else {
        onError(new Error("no access"));
      }
    }, 1000);
  }
}
//변수 선언, 클래스니깐 new를 붙힌다.
const userStorage = new UserStorage();
const id = prompt("enter id");
const password = prompt("enter password");
//userStorage로그인
userStorage.loginUser(
  id,
  password,
  (user) => {
    //사용자가 성공적으로 로그인이 되고,
    userStorage.getRoles(
      user,
      (userRole) => {
        // 사용자의 roles를 잘 받아왔을떄 야만 실행되는 callback.
        alert(
          `Hello ${userRole.name}, welcome to call back hell and your role is ${userRole.role}`
        );
      },
      (error) => {
        console.log(error);
      }
    );
  },
  (error) => {
    console.log(error);
  }
);

//문제점!
//1. callback을 이용해서 
//2. callback함수 안에서 문거 다른 것을 호출하고
//3. 그 호출한거 안에서 다른것을 전달하고
//4. 그 안에서 또다른것을 호출하고 전달하고...
//lame 읽기가 너무...shitty 하다. 로직을 한눈에 알아보기 어렵다
//핵심은 login을 해서 그 로그인한 아이디를 받아오면 되는구나 -> 라는 것을 알아보기가 힘들다.  
//나중에 에러가 발생했을떄 굉장히 어렵다. 
//문제가 생기면 어디서 error가 처리되는 지 모른다. 
//특히 유지보수는 말도 할것 없다. 

예시에서는 DB에 있는 user를 가져오지 않았지만.
만약 DB연결을 해서 DB에 원하는 데이터를 뽑아왔다고 치면, 현재 예시에서 보이는 코드보다 복잡할 것이다. 그렇다면
여기서 어떻게 callback을 줄일 수 있을까?
promise함수가 등장한다.!
다음글에 계속

코딩애플
드림코딩