[JavaScript] 15. 자바스크립트 비동기

오늘은 자바스크립트 동기와 비동기, 자바스크립트에서 비동기 처리 방법에 대해 공부해보려고 합니다.:)

💡동기적(Synchronous) 방식

하나의 이벤트가 모두 끝난 후에 다음 이벤트를 수행하는 방법
직렬적으로 task를 수행

💡비동기적(Asynchronous) 방식

여러 개의 이벤트를 담은 후에 완료되는 이벤트 순으로 일을 처리하는 방법
병렬적으로 task를 수행

자바스크립트에서는 아래와 같이 3가지 방법을 통해 비동기적 처리를 할 수 있는데요!

1. 콜백함수(callback function)
2. Promise
3. async await

하나씩 알아보도록 할께요!

💡1. 비동기처리 - 콜백함수 사용하기

콜백함수를 사용하여 비동기를 처리하는 코드는 아래와 같습니다. 먼저, 함수의 반환 값을 받습니다. 그리고 비동기 처리를 해야하는 다음 함수를 콜백으로 받아 처리합니다.

callbackFunc01(function(result01) {
    callbackFunc02(result01, function(result02) {
        callbackFunc03(result02, function(result03) {
            callbackFunc04(result03, function(result04) {
                callbackFunc05(result04, function(result05) {
                    console.log('result: ' + result05);
                }, failureCallback);
            }, failureCallback);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

하지만, 다음과 같이 콜백함수를 사용하여 비동기 처리를 하면 콜백지옥이 발생할 수 있고, 가독성 또한 떨어진다는 문제점이 있습니다.

위와 같은 문제들은 Promise와 async await을 사용하면 해결할 수 있는데요!

💡2. 비동기처리 - Promise 사용하기

먼저, Promise가 무엇인지부터 살펴보도록 하겠습니다.

자바스크립트에서 비동기식 처리를 할 때 사용되는 객체
비동기 연산이 종료된 후 성공 또는 실패에 대한 결과 값을 받아옴

Promise는 3가지 상태를 가지고 있는데요! 프로미스를 처리하는 과정이라고 할 수 있습니다.

대기(pending) : 비동기 처리 로직이 완료되지 않은 상태, 초기상태
이행(fulfilled) : 연산이 성공적으로 완료된 상태 => resolve() 실행시
거부(rejected) : 연산이 실패하거나 오류가 발생한 상태 => reject() 호출시

Promise는 new 키워드를 통해 생성됩니다. 이때,Promise는 두가지의 콜백함수를 매개변수로 받아오는데, 바로resolve와 reject 함수입니다.

const dataset = {
    type : "String",
    text : "Hello world!",
    status : "SUCCESS!"
};

const getData = (data) => {
    return new Promise((resolve, reject) => {
        if(data){
            resolve(data);
        }

        reject(new Error("ERROR!"));
    });
};

resolve가 실행되면 이행상태가 되는데, 이에 대한 결과 값을 then()을 이용하여 처리할 수 있습니다. 또한, reject에 대한 실패 처리는 catch()를 통해 확인할 수 있어요!

getData(dataset)
    .then(data => console.log(data.status)) // SUCCESS!
    .catch(error => console.log(error)); // ERROR!

추가적으로 Promise를 여러개 연결하여 사용할 수 있는데, 이를 Promise Chainning라고 합니다.

new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("송우든");
    }, 3000);
})
    .then(function(result) {
        const age = result === "송우든"? 25 :  -999;
        return age;
    })
    .then(function(result) {
        const isManager = result === 25? true : false;
        return isManager;
    })
    .then(function(result) {
        console.log(`manger : ${result}`); // true
    });

💡3. 비동기처리 - async await 사용하기

async와 await을 통한 비동기처리 방법은 자바스크립트에서 가장 최근에나온 방법이라고 해요!

앞에서 소개한 두가지의 방법을 보안해서 나온 방식으로, 여러 개의 비동기 처리를 할 때 유용합니다.:)

기본적인 형식은 아래 코드와 같습니다.
await식은 async함수의 실행을 일시중지하고 전달된 Promise의 처리가 완료되기를 기다립니다. 처리가 끝났다면, 다시 async함수를 다시 실행합니다.

async function func() {
  await getData();
}

const func = async () => {
  await getData();
};

이후에 완료된 값을 반환해주는데요,이 때, async함수는 항상 Promise객체를 반환한다는 점을 주의해야 합니다!
(만약, async함수의 반환값이 명시적으로 Promise객체가 아니라면 암묵적으로 Promise로 감싸 진다고 해요!)
추가적으로, async 와 await은 try-catch문을 사용하여 예외처리를 할 수 있습니다.

이상으로 자바스크립트에서는 비동기처리를 어떻게 하는지 알아봤는데요!
다음 포스팅부터는 react를 공부해보려고 합니다.:)