Async/Await 란?

Asynchronous(비동기적) 이름은 멋진데... 넌 대체 뭐니??..

 웹을 공부하는데 js는 동기와 비동기로 나뉜다는 부분을 배웠다. 지금까지 이런 것을 나눠서 생각해보고 구현해본 적이 없어서 처음엔 '이게 뭐지?' 싶었다. 근데 공부하다보니 동기적으로만 웹을 구성하면 데이터를 받아오지 못한다는 사실을 알게 되었고 비동기는 웹을 만들려면 반드시 이해가 필요하다는 사실에 대해 알게 되었다. 그렇다면 비동기란 무엇인지 async, await 왜 써야하는지 내가 공부해서 이해한 내용을 바탕으로 이론적인 이야기를 먼저 해보려고 한다.

 가장 먼저 Javascript는 싱글 스레드이다. '엥... 동기 비동기도 어려운데 스레드는 또 뭐야' 라고 생각할 수 있어 간단하게 설명하자면 js(앞으로 줄여서 사용하겠다)는 한 번에 하나의 작업밖에 처리하지 못한다. 이를 이해하려면 js의 내부구조를 이해해야하기 때문에 부족한 그림판 실력으로 간단하게 나타내보았다.

Js Engine의 내부도(약식)

Memoery Heap은 간단하게 메모리 즉 데이터가 저장되는 곳이고 Call stack 은 우리가 작성한 일반 코드들을 순서대로 실행하기 위해 저장해놓는 공간이다. 예를 들면 console.log("Hello World") 같은 것이 있다. 그러면 Event Queue와 Event Loop는 무엇일까. Event Queue에는 비동기 동작들이 들어간다. 비동기 동작들은 쉽게 설명하면 사용자의 요청이  있을때에 발생하는 것이다. 그리고 Event Loop는 Call stack이 비어있는지 확인해서 비어있다면 대기하고 있던 비동기 동작을 넣어준다. 이렇듯 Js는 작업이 한 공간에서 일어나기 때문에 싱글 스레드라고 한다. 여기까지 내부를 이해해봤는데 그래서 왜 써야하는 걸까? 답을 먼저 말하면 비동기적인 요소들을 동기적으로 사용하게 하기 위해서 사용한다. 뭐라고??

 자, 예를 들어서 알아보자. 내가 중간에 서버에 요청을 하는 코드를 작성했다고 생각해보자.(예를 들면 axios.get 등등) 그런데 만약에 서버에서 문제가 발생해서 응답을 안해주고 내부에서 계속 대기하고 있다면 어떤 일이 발생할까. 나 혼자 쓰는 localhost라면 수정하면 되지만 만약 사용자들이 사용하는 웹에서 그런 문제가 발생한다면 금방 문의전화가 쇄도할 것이다. 그러니 최소 비동기적인 동작을 실행시키되 이에 대한 응답을 계속 대기하고 있지 않는다. 그리고 이후 동기적인 요소들을 계속 실행시키다 응답이 오면 그것에 대한 출력을 보여준다. 이러면 사용자 입장에서 최소 보이는 것이 있기 때문에 설령 조금 늦더라도 오류나 문제가 있다고 생각은 들지 않을 것이다.

 말도 어렵고 잘 이해했는가? 하는 의문도 들지만 동기/비동기가 나오게 된 원인은 Js의 내부구조에서 부터 온다는 사실과 이를 극복하기 위해서 이런 프로그래밍 기법이 나온 것이라고 생각하면 될 것 같다. 원래는 then과 catch를 이용해서 하나하나 잡던 것을 async, await로 바뀐 뒤로는 그래도 훨씬 편해졌다. 다음에는 대표적인 비동기 프로그래밍 방법 async, await를 어떻게 사용하는지에 대해서 더 공부해서 적어보려고 한다. 만약 틀린 부분이 있다면 바로바로 수정해야겠다....