1. [ 비동기 처리의 시작 , 콜백이해하기, 콜백 지옥체험 !! ]
'use strict';
// JavaScript is synchronous
// Excute the code block in order after hoistiong
//(호이스팅이 된 이후부터 코드가 우리가 작성한 순서부터 하나하나씩 동기적으로 실행!)
// hoistiong : var, function declaration 같은 선언들이 제일 위로 올라가는것
console.log('1');
//callback 함수
//setTimeout함수안에 하나의 파라미터 인자로 우리가 지정한 함수를 전달 -> 지금당장실행안하고 1초뒤에 실행해줘!
// 그래서 CallBack함수
setTimeout(function () {
console.log('7');
}, 1000);
// Arrow function으로 쓸 수 있다.
setTimeout(()=>console.log('8'),200)
console.log('2');
console.log('3');
// callback도 2가지 경우로 나누어진다.
// 1. Synchronous callback
// 함수를 선언해줫으므로 실제 실행단계에서는 hoisting이되어서 맨위로 올라간다
function printImmediately(print) {
print();
}
printImmediately(()=> console.log('hello'));
// 2. Asynchronous callback
function printWithDelay(print, timeout){
setTimeout(print, timeout);
}
printWithDelay(()=>console.log('async callback'), 5000);
// Callback Hell example
class UserStorage {
//사용자로그인
// id, password를 받아오고 로그인이 정상적으로 되었다면 onSuccess라는callback함수를 사용자데이터와 함께 호출 ,
// 실패했다면 onError라는 callback함수 호출
loginUser(id, password, onSuccess, onError){
setTimeout(()=>{
if(
(id === 'ellie' && password === 'dream') ||
(id === 'coder' && password === 'academy')
){
onSuccess(id);
} else{
onError(new Error('not Found'));
}
},2000);
}
// 사용자 데이터를 담아서 권한들을 서버에게 다시요청하고 받아오는 api
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);
})
//콜백체인의문제점
//1. 가독성이 떨어짐
//2. 비즈니스 로직을 한눈에 이해하기 어려움
//3. 에러발생할 때 debugging할떄 어려움 ㅠㅠ
//4. 유지보수도 어려워!!
// 그래서 콜백지옥!!!!!!!
JavaScript
복사
