드림코딩 엘리 - 자바스크립트 기초 강의(ES5+) (11편)

비동기 처리의 시작 콜백 이해하기

'use strict';

// JavaScript is synchronous : 자바스크립트는 동기적인 언어다.
// Execute the cod block in order after hoisting.
// hoisting: var, function declaration 은 맨 위로 선언됨
console.log('1');
setTimeout(() => console.log('2'), 1000); // 1000msc = 1초
console.log('3');
 
// Synchronous callback
function printImmediately(print) {
    print();
}
printImmediately(()=> console.log('hello'));

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


// 콜백 지옥 체험
// 1) 가독성이 떨어짐
// 2) 비즈니스 로직을 한눈에 이해하기 어려움
// 3) 에러 발생, 디버깅, 유지보수 어려움
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, 
    password, 
    user => {
        userStorage.getRoles(
            user,
            userWithRole => {
                alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
            },
            error => {
                console.log(error);
            }
        );
    },
    error => {console.log(error)}
);

 

---

출처

https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC