1. 동기와 비동기

	동기(Synchronous)	비동기(Asynchronous)
설명	모든 일을 순서대로 하나씩 처리한다.	작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리한다.
특징	순서대로 처리한다.	시간이 필요한 작업들을 요청을 보낸 뒤 응답이 빨리 오는 작업부터 처리한다.

비동기를 사용하는 이유

• 동기로 처리한다면 특정 로직이 실행되는 동안 다른 로직 실행을 차단하기 때문에 프로그램이 응답하지 않는 듯한 사용자 경험을 겪게 된다.
• 비동기로 처리한다면 먼저 처리되는 부분부터 보여줄 수 있으므로 사용자 경험에 긍정적인 효과를 보인다.

2. JavaScript의 비동기 처리

• JavaScript는 한 번에 하나의 일만 수행할 수 있는 Single Thread 언어로 동시에 여러 작업을 처리할 수 없다.
• 따라서, 비동기 처리를 할 수 있도록 도와주는 브라우저 or Node 환경이 필요하다.
• 이 중에서 브라우저 환경에서의 비동기 동작은 크게 아래의 요소들로 구성된다.
  • JavaScript Engine의 Call Stack : 요청이 들어올 때마다 순차적으로 처리하는 stack(LIFO)
    기본적인 JavaScript의 single thread 작업을 처리한다.
  • Web API : JavaScript 엔진이 아닌 브라우저에서 제공하는 runtime 환경으로 시간이 오래 소요되는 작업을 처리한다.
  • Task Queue : 비동기 처리된 Callback 함수가 대기하는 Queue(FIFO)
  • Event Loop : Call Stack과 Task Queue를 지속적으로 모니터링 하다 Call Stack이 비어 있다면 Task Queue에서 대기 중인 오래된 작업을 Call Stack으로 Push한다.

비동기 처리 동작 방식
1. 모든 작업은 Call Stack(LIFO)으로 들어간 후 처리된다.
2. 오래 걸리는 작업이 Cal Stack으로 들어오면 Web API로 보내서 처리하도록 한다.
3. Web API에서 처리가 끝난 작업들은 Task Queue(FIFO)에 순서대로 들어간다.
4. Event Loop가 Call Stack이 비어 있는 것을 체크하고, Task Queue에서 가장 오래된 작업을 Call Stack으로 보낸다.

지연시간 0 != 0초 뒤에 출력된다

3. Axios 라이브러리

45~59 정리해서 올립시다

4. Callback과 Promise

(1) 비동기 처리의 단점

비동기 처리의 핵심은 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리한다.
이는 코드의 실행순서가 불명확해 실행결과를 예상하면서 코드를 작성할 수 없게 한다.
콜백함수를 사용해 이를 해결한다.

(2) 콜백 함수

다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다.
시간이 걸리는 비동기 작업이 완료된 후 실행할 작업을 명시하는데 사용되는 콜백함수를 비동기 콜백(asynchronous call back)이라 부른다.

콜백 함수를 사용하는 이유
비동기 처리를 순차적으로 동작할 수 있게 한다.

그러나...

• 콜백 함수는 보통 어떤 기능의 실행 결과를 받아서 다른 기능을 수행하기 위해 많이 사용한다.
• 이 과정에서 비슷한 패턴이 계속 발생해 코드의 가독성을 해치고 유지보수가 어려워지는 비동기 코드가 작성된다.
• 이를 Callback Hell이라고 한다.

Promise

• Callback Hell 문제를 해결하기 위해 등장한 비동기 처리를 위한 객체
• 비동기 작업의 완료 또는 실패를 나타내는 객체이다.

Promise	설명	특징
then(callback)	요청한 작업이 성공하면 callback 실행	callback은 이전 작업의 성공 결과를 인자로 전달받는다.
catch(callbacK)	then()이 하나라도 실패하면 callback 실행	callback은 이전 작업의 실패 객체를 인자로 전달받는다.

5. AJAX