Javascript - 동기, 비동기에 대한 설명

javascript는 단일 쓰레드 기반 언어로 한 번에 한 가지 일만 처리할 수 있다.

때문에 이런 문제가 발생할 수 있다.
예를 들어, 이미지를 네트워크로부터 받아와 출력하는데 3초, 텍스트 출력에 1초가 걸린다. 그리고
1. 네트워크에서 이미지 받아오고 해당 이미지 출력 명령어
2. 텍스트 출력 명령어
와 같은 순서로 코드가 짜여져 있으면, 사용자는 빈 화면에서 이미지가 출력될 때까지 기다려야 한다.
즉, 사용자가 불편하다!

이렇게 I/O 작업이나 네트워크 작업(fetch와 같은 작업)과 같은 것을 수행하는 작업을 비동기함수라고 한다.

이런 비동기 함수는 WEB API가 처리한다. (처리한 결과를 event queue에 결과를 넘기고 event loop는 stack이 비었는지 계속 확인을 하다가 stack이 비면 event queue의 결과물을 Call stack에게 넘기는데, 이 과정만 따로 공부해야 할 정도로 중요한 파트이기에 일단 패스)

그러면 여기서 문제가 발생한다.

개발자 입장에서 보면, 위에서 부터 아래로 내려오며 명령어를 차례대로 처리해야하는데, 도대체가 비동기함수는 언제 결과를 리턴해줄지 모른다.

이런 식이다.

1. 네트워크에서 데이터 fetch 명령어
2. fetch받은 데이터 가공 

그러나 결과는 에러가 발생할 수 있다.
1번의 작업은 WEB API에게 넘기고 바로 2번 작업을 처리한다. 이때, 1번 작업의 결과를 아직 전달받지 못하면 에러가 발생하는 것이다.

그러므로 우리는 이 비동기함수와 동기 함수간에 순서를 지정해줄 수 있어야 한다.
2번 작업은 반드시 1번 작업의 결과를 받은 다음에 진행해! 와 같은 명령어가 필요하다.

그래서 나온 것이 콜백 함수이고, 이 콜백 함수를 계속해서 추가하는 것을 콜백 지옥이라고 하는데 가독성이 매우 거지같다 떨어진다.
이것을 개선한 것이 promise이고, promise의 에러처리와 가독성을 개선한 것이 async/await인 것이다.