#300#Applications#330#Backend#330.10#Node.js#330.10 b#async,_await_and_promise

1. 비동기란?
2. Javascript는 동기? 비동기?
3. Promise 객체란?
4. Async와 Await 라는 새로운 방식
5. 비동기에서 중요한 것은

https://ko.javascript.info/async-await

비동기란?

비동기라는 말을 많이 들어봤을텐데 이 개념을 소개할 때는 햄버거를 예시로 든다. 햄버거 주문을 받았을때 보통은 빵, 야채, 고기, 튀김을 동시에 작업한 후 햄버거를 만든다 이것이 비동기 방식이다. 만약 순서가 생겨서 빵을 마친뒤에야 야채 손질을 시작할 수 있고, 야채 손질이 끝나야 고기를 굽기 시작할 수 있다면 어떨까? 이것이 동기 방식이다. 즉 일반적으로 비동기는 모든 자원을 최대한 활용하여 동시에 많은 작업을 수행하는 일이다.

이렇게만 들으면 비동기가 무조건 좋아보이나, 자원이 부족한데 동시에 돌리려하거나 순서를 반드시 지켜야하는 경우등도 있기에 동기 방식도 적절히 필요하다. 특히 우리는 명령의 흐름이라는것이 있을텐데 비동기는 이 흐름을 읽기가 동기방식보다 매우 어려워진다.

Javascript는 동기? 비동기?

javascript는 동기언어지만, 작업은 비동기가 대부분이다. 이말 뜻을 조금더 풀어보자면 javascript라는 언어를 동기방식에 따라 명령을 순서대로 처리하여 A->B->C->D라는 순서로 처리한다. 하지만 B라는 작업이 시간이 많이걸리는 작업이면 뒤로 넘겨서 A->(B)->C->D->B라는 형태로 작업하게끔 조작이 가능하다. 이 때 사용하는 것이 Promise라는 객체입니다.

Promise 객체란?

Promise 객체는 JavaScript에서 비동기 작업을 처리하기 위해 사용됩니다. Promise는 미래에 완료될 작업에 대한 결과를 나타내며, 다음 세 가지 상태를 가집니다:

1. Pending: 초기 상태, 작업이 아직 완료되지 않음.
2. Fulfilled: 작업이 성공적으로 완료됨.
3. Rejected: 작업이 실패함.

Promise는 비동기 작업의 결과를 처리하기 위해 .then()과 .catch() 메서드를 사용합니다.
then은 해당 비동기 작업이 성공했을때의 반환값이며, catch 실패했을때 입니다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // 성공 여부를 결정
            if (success) {
                resolve("데이터를 성공적으로 가져왔습니다!");
            } else {
                reject("데이터를 가져오는 데 실패했습니다.");
            }
        }, 2000);
    });
}

fetchData()
    .then(result => {
        console.log(result); // "데이터를 성공적으로 가져왔습니다!" 출력
    })
    .catch(error => {
        console.error(error); // "데이터를 가져오는 데 실패했습니다." 출력
    });

자바스크립트에서 콜백지옥이라는 말이 있는데 이는 중첩함수가 너무많이 생겨서 읽기 힘들정도에 이르는 상황을 말합니다.

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

이를 해결하기위해 then방식을 사용할 수 있지만., 이것도 많아지다 보면 읽기어려워져 then지옥이된다.
callback지옥보다는 덜 뜨거운? then지옥

doSomething()
    .then(result1 => {
        return doSomethingElse(result1);
    })
    .then(result2 => {
        return doAnotherThing(result2);
    })
    .then(result3 => {
        return doFinalThing(result3);
    })
    .then(result4 => {
        console.log(result4);
    })
    .catch(error => {
        console.error(error);
    });

그래서이를 해결하기위해 Async라는 키워드가 등장하게 된다.

참고
콜백지옥: https://velog.io/@seul06/JavaScript-콜백-지옥

Async와 Await 라는 새로운 방식

같은 기능을 하는 함수지만 async라는 키워드를 사용하였을 때의 문법이다. 훨씬더 읽기 쉬어졌을 뿐만아리나 명확히 비동기 작업을 수행하게된다.

async function doAllTheThings() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const result4 = await doFinalThing(result3);
        console.log(result4);
    } catch (error) {
        console.error(error);
    }
}

doAllTheThings();

다음 함수는 비동기 작업을 순차적으로 처리하면서도 코드가 간결하고 가독성이 높아진다. await 키워드를 사용하면 각 비동기 작업이 완료될 때까지 기다린 후 다음 작업을 수행하므로, 동기 코드처럼 작성할 수 있다. 예를 들어, 시간이 오래 걸리는 while 문이 있고 그 안에서 result1을 받아 result2가 데이터를 처리하는데 의존성이 생긴다고 가정해봅시다. 그리고 result2가 result3를 받아 데이터를 처리하여 또 다른 의존성이 생기게 됩니다. 이러한 복잡한 비동기 함수를 구현하는 코드입니다.

비동기에서 중요한것은...

중요한것은 어떤 작업을 비동기라 할것이냐라고 생각한다. 먼저 비동기를 하지 않고 오히려 동기 방식으로 절차가 중요한것도 있다. 그리고 마음대로 비동기를 해도 잘못사용해서 성능효과가 없는 것일 수도있다. 비동기가 더 어려운것이라는 것을 이해하고 사용해볼것. 여기서 언급하지 않았는 async가 es6부터라던가, await를 사용하기 조건이라던가, Promise.all이라는 메소드라던가... 배울것도 많다.

결론

성능 향상을위해서는 비동기라는 개념을 알고 이를 활용할 줄알아야한다.
Promise라는 객체와 then,catch 사용의 장단점을 이해한다
적절한 비동기 함수를 설정하고 필요에따라 Promise객체와 async, await키워드를 활용하자