자바스크립트에서 비동기 처리

콜백(callback)

• 요청이 끝난 후, 실행할 함수를 매개변수로 추가하는 방식

프로미스(promise)

• promise 객체를 반환하는 방식(이행, 거절, 대기)
• 이 코드는 미래의 어느 시점에 실행할 것이다라고 약속하는 객체.

어싱크 어웨이트(async await)

• promise 객체를 더욱 간단하게 async await 구문으로 변경한 문법(가독성)

동기(Synchronous)

• 프로그래밍에서 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 새로 시작하지 않고, 기다렸다가 기존의 작업이 다 끝나면 새로운 작업을 시작하는 방식.
• 작업이 직렬로 배치되어 실행되며, 작업 실행의 순서가 확실히 정해져 있음.

비동기(Asynchronous)

• 먼저 시작되었던 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식.
• 작업이 병렬로 배치되어 작업의 실행 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 있음.

자바스크립트는 런타임(브라우저, Node.js) 싱글 스레드(한 번에 하나의 작업만 처리)로 동작

 

callback 예시

const DB = [];

//회원가입

//1. 회원가입 API 호출

function register(user){

return saveDB(user, function(user){

return sendEmail(user, function(user){

return getResult(user);

});

});

}

//2. DB에 저장 후 콜백을 실행하는 형태로

function saveDB(user, callback){

DB.push(user);

console.log(`save ${user.name} to DB SAVE`);

return callback(user);

}

//3. 이메일 발송 로그만 남기고 코드 실행 후 콜백 실행

function sendEmail(user, callback){

console.log(`email to ${user.email}`);

return callback(user);

}

function getResult(user){

return `success register ${user.name}`;

}

const result = register({email:"ljh99@ljh.com", password : "1234", name:"ggg"});

console.log(result);

 

promise 예시

const DB = [];

function saveDB(user){

const oldDBsize = DB.length;

DB.push(user);

return new Promise(

(resolve, reject)=>{

if(DB.length > oldDBsize){

resolve(user);

console.log(`save ${user.name} to DB SAVE success`);

} else {

reject(new Error("save DB user Fail!"));

}

}

);

}

function sendEmail(user, callback){

console.log(`send email to ${user.email}`);

return new Promise(

(resolve)=>{

resolve(user);

}

);

}

function getResult(user){

return new Promise(

(resolve, reject)=>{

resolve(`success register ${user.name}`);

}

);

}

function registerByPromise(user){

const result = saveDB(user).then(sendEmail(user)).then(getResult).catch(error => new Error(error));

console.log(result);

return result;

}

const myUser = {email:"ljh99@ljh.com", password : "1234", name:"ssg1"};

const allResult = Promise.all([saveDB(myUser), sendEmail(myUser), getResult(myUser)]);

allResult.then(console.log);