[자바스크립트] 11. 비동기처리 콜백 이해

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

---

비동기 처리 및 콜백에 대한 이해

---

1. 동기와 비동기

- hoisting(호이스팅)은 함수 또는 var를 어디에 선언을 하든, 맨 위로 올라가는 것을 말합니다.

 

console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');

- 출력이 되는 순서는

 

setTimeout(() => console.log('2'), 1000);

- 이 함수의 경우 브라우저에 보냈다가 1초 후에 콜백함수를 실행해달라고 하면 실행이 됩니다.

 

setTimeout(() => console.log('2'), 1000);

---

콜백(CallBack)

나중에 다시 불러달라는 의미로, setTimeout 과 같이 시간 타이머를 설정해서 부르는 것과 같다.

 

콜백의 경우도 2가지로 나뉘어 집니다.

- 동기적 콜백

- 비동기적 콜백

 

동기적 콜백

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

- 위의 1, 2, 3과 같이 출력을 해보면

- 비동기적인 2가 출력되기 전에 hello가 출력이 되는 것을 확인할 수 있습니다.

 

비동기적 콜백

function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

- 비 동기적 콜백을 앞에와 이어서 실행하게 되면, 브라우저에서는 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 Erro('no access'));
      }
    }, 1000);
  }
}

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = prompt('enter your passrod');
userStorage.loginUser(
  id,
  password,
  (user) => {
    userStorage.getRoles(
      user,
      (userWithRole) => {
        alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
      },
      (error) => {
        console.log(error);
      }
    );
  },
  (error) => {
    console.log(error);
  }
);

- 위의 코드는 콜백 지옥의 예제입니다.

- 콜백 안에서 다른 콜백을 호출하고,, 를 하고 있습니다.

 

콜백 체인의 문제점

- 가독성이 너무 많이 떨어집니다. 어디가 어떻게 연결되어 있는지도 어렿습니다.

- 에러가 발생해서 디버깅하는 경우에도 많은 어려움을 겪을 수 있습니다.

- 따라서 유지 보수 또한 어렵게 됩니다.

 

 

---

다음 챕터의 프로미스를 통해서 어떻게 해야하는지 알 수 있습니다.