async/await 질문

Question

함수를 async로 선언하면 async 내부의 console.log와 같은 함수가 콜백 함수와 동기적으로 작동하는 건가요? 그럼 console.log를 콜백 함수가 콜스택에 쌓이기를 기다렸다가 실행한다고 이해해야 될까요?

wooyoung · Answer

아아 이해했습니다. 감사합니다!

zerocho · Answer

3:30초 코드에서 위의 것은 의도한 바를 잘못 코딩한 예시이고요. 아래 것이 제대로 코딩한 예시입니다. 즉, 위의 코드는 틀린 코드고, 아래 코드가 제대로 된 코드입니다. 위의 코드를 올바르게 고친다면, console.log('다 찾았니') 이 부분을 .then((removedUser) => {}) 이 안에 넣어준게 의도한 바입니다. 일단 async function을 계속 헷갈려하시는 것 같은데요. async function은 그냥 promise를 보기 좋게 만들어준거라서 동작 순서 생각해보려면 promise 코드를 생각하시면 됩니다(await을 then이라고 생각하시면 편합니다). 따라서 findOne, update, remove, console.log는 task queue에 순서대로 삽입되지 않습니다. 하나씩 삽입되고요.

wooyoung · Answer

1)3:30~구간에서 Promise가 async/await으로 어떻게 바뀌는지 설명하신게 아닌가요? 그러면 같은 코드를 다른 문법으로 설명하시려던 의도가 아닌가요? ------- 이렇게 줄 그어서 설명하신것도요. 어떤 부분에서 완전히 다른 코드인건지 감이 잘 안잡히네요.. 보기에는 console.log 출력되는 순서만 달라지는 것 같은데.. 내부적으로는 잘 모르겠지만요   2)async/await을 사용하면 위에서 아래로 순차적으로 실행된다는 의미는 console.log("다 찾았니?") 이 부분이 user findOne/update/remove가 전부 실행된 이후에 마지막에 실행된다는 의미잖아요. js 입장에서는 콜백인 findOne과 update, remove가 언제 실행되는지를 알고 있어야 그 이후에 "다 찾았니?"라고 찍힐텐데 그렇게 되려면 console.log("다 찾았니?")라는 부분이 콜백과 동기적으로 실행이 되어야 콜백이 끝나고 난 후에 실행될 수 있지 않을까라는 의문이었습니다! 예를들어 async function안의 함수들(findOne, update, remove, console.log("다 찾았니?"))을 task queue에 순서대로 삽입하는 것과 같은 방식으로 말이죠.

zerocho · Answer

1:32의 코드와 async/await 설명시의 코드는 완전히 다른 코드입니다. 콜백이나 프로미스 패턴 시에는 저렇게 밑으로 쭉 내려쓸 수 없다는 것을 보여드린것이고요. 밑으로 내려쓰려면(위에서 아래 순으로) async/await 문법을 도입해야하는 것입니다. async/await문법을 사용하면 위에서 아래로 순차적으로 실행됩니다. 다만 이게 비동기가 아니라는 뜻은 아닙니다.

wooyoung · Answer

그러면 동영상 1분 32초쯤에 console log가 먼저 실행된다 -> ES2017에서 async/await가 정식 스펙으로 등록되었다라고 하신건 어떤 의미에서 하신 말씀인가요? 저는 console.log가 코드 순서와 실행 순서가 다르게 작동하기 때문에 그 부분을 제어하기 위해서 async/await을 사용했다는 뜻으로 이해했는데 그런 의미가 아니었던건가요? 그냥 await을 붙여줌으로써 가독성을 높이고 이것은 비동기 함수이니 순서는 여전히 다를 수 있지만 보기는 더 쉽다 이런 의미인건가요??

zerocho · Answer

아뇨 전혀 동기적이지 않고 그대로 비동기입니다. 기존 비동기와 동작 방식도 같습니다. 그냥 겉보기로만 콜백이나 프로미스 패턴 없이 일자로 코드를 나열해주는 문법적 기능입니다.