동기/비동기 처리 - Callback, Callback 지옥

Synchronous vs Asynchronous

Synchronous

기본적으로 자바스크립트는 Synchronous 하다.

그러므로 hoisting(var, function declaration을 제일 위로 올리는 것) 후 코드를 한줄한줄 순서대로 실행한다.

Asynchrous

Asynchrous 코드는 언제 실행될지 예측할 수없다.

예를 들어 setTimeout 함수 안에 하나의 파라미터 인자로 만든 함수를 전해준다. 당장 실행하지 않고 브라우저에게 일정 시간이 지난 후 callback을 실행하게 해주는 기능이 내재되어있다. 이것이 asynchrnous execution의 기본이다.

---

Synchronous callback function vs Asynchronous callback function

callback function은 모두 asynchronous할까?

그렇지 않다.

 

callback function에도 callback function을 바로 실행하는 synchronous callback function과

callback function이 언제 실행될지 예측할 수 없는 asynchronous callback function이 존재한다.

See the Pen Synchrnous vs Asynchrnous by zakelstorm (@zakelstorm) on CodePen.

---

callback 지옥

callback function이 중첩적으로 쓰여 callback이 매우 nesting 된 형태. callback 안에 callback이 있고 그 callback 안에 또 callback이 있는 매우 알아보기 힘든 코드. 이를 유지할 시 유지 보수력이 떨이지게 된다.

 

callback 지옥의 코드를 만들어보았다.

로그인 기능을하는 frontend 코드이며, backend가 존재하지 않기때문에 해당 비동기 처리는 setTimeout( )으로 대체하였다.

 

코드의 구성은 다음과 같다.

1. 사용자가 id, password 입력
2. 입력된 id, password로 login (loginUser이용)
3. login 이후 바로 해당 id의 role 반환(loginUser 함수 안에 onSuccess 이용)
4. 반환된 role 출력 (getRoles 이용)

See the Pen callback 지옥 by zakelstorm (@zakelstorm) on CodePen.

callback function이 어떻게 돌아가는지 확실히 알기 위에서는 코드를 일반적으로는 우리가 머릿속에 코드를 외우기 힘들기 때문에 왔다갔다해서 봐야할 것이다. 이유는 다음과 같다.

• loginUser
  • loginUser안 onSuccess에는 user=>{ userStorage1.getRoles(user, ... , ...) } 가 대입된다.
  • onSuccess에서는 id를 parameter로 쓰고있다. 즉, callback function의 user에 id가 대입된다.
• getRoles
  • getRoles안 onSuccess에는 userWithRole=>{ alert(...); }가 대입된다.
  • onSuccess에서는 {name:'ASDF', role:'admin'}을 parameter로 쓰고있다. 즉, callback function의 userWithRole에 {name:'ASDF, role:'admin'}이 대입된다.

이렇게 대입 방향이 실행 코드(loginStorage1)~정의 코드(loginStorage)사이에서 엉키게 된다.

callback function에 parameter가 존재하면, 코드를 이해하기 위해서는 계속 실행코드와 정의코드로 왔다갔다 해야한다. 이러한 callback function이 nesting 되는 형태가 복잡하다면 이것이 콜백 지옥이다.

 

이를 해결하는 방법이 바로 Promise와 async/await 이다. return 값이 생기게 됨으로서 대입 방향을 단방향으로 만들게 된다.