---

01. 비동기 이해

01. 동기와 비동기

• 동기식(Synchronous)은 먼저 시작된 동작이 끝날 때까지 기다린 후, 다음 작업을 수행하며 한 번에 하나씩만 처리한다.

• 비동기식(Asynchronous)은 먼저 실행된 동작이 끝날 때까지 기다리지 않고, 다음 작업을 수행하며 한 번에 여러가지를 처리한다.

---

02. 싱글 스레드와 멀티 스레드

• 싱글스레드는 메인스레드 하나만 가지고 순차적으로 작업을 처리한다.

• 멀티스레드는 메인스레드 외의 추가적인 스레드를 이용하여 병렬적으로 작업을 처리한다.
  
  

---

03. 자바스크립트의 비동기 처리

자바스크립트는 싱글 스레드를 사용하는 동기식 언어이다.
반복문, 함수 호출 등이 동기적으로 실행되며, 싱글 스레드를 사용하기 때문에 코드의 처리는 순차적으로 처리된다. 하지만, 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램이 멈출 수도 있다.

그래서 자바스크립트는 브라우저에서 별도의 API를 사용하여 비동기적으로 작업을 처리할 수 있다. 그렇다면, API를 사용하는데 왜 비동기적일까 ? API가 멀티스레드로 동작하기 때문이다.

자바스크립트의 비동기 처리 과정 및 코드 🎬

const foo = ( ) => console.log( "First" );
const bar = ( ) => setTimeout( ( ) => console.log( "Second" ), 1000 );
const baz = ( ) => console.log( "Third" );

bar( );
foo( );
baz( );

• CallStack : JS에서 수행해야할 함수들을 순차적으로 Stack에 담아 처리
• Web API : 웹브라우저에서 제공하는 API로, 비동기 작업을 실행하는 공간
• TaskQueue : Web API에서 넘겨받은 callback 함수 저장
• Event Loop : CallStack이 비었다면, Task Queue의 작업을 CallStack으로 옮김
  
  

자바스크립트의 비동기 처리 과정 순서 🎬

1. bar( )가 호출되면 setTimeout( )을 반환하고 CallStack에 추가된다. setTimeout 함수는 비동기 함수이기 때문에 타이머가 완료될 때까지 CallStack에 머무는 것이 아닌, 앞으로 실행될 것을 약속한 후에 setTimeout의 콜백 함수가 Web API에 추가되어 비동기적으로 실행된다.

2. Web API에서 setTimeout의 콜백함수가 실행되는 동안 foo( )가 호출되어 CallStack에 추가된다. 실행완료 후 CallStack을 빠져나가며 "First" 를 출력한다.

3. baz( )가 호출되어 CallStack에 추가된 후, 실행완료 하면 CallStack을 빠져나가면서 "Third" 를 출력한다.

4. foo( ) 와 baz( )가 실행되는 동안 콜백함수의 타이머가 완료되면 콜백함수는 TaskQueue에 들어가서 CallStack이 비워질 때까지 기다린다. 이때, Event Loop가 CallStack과 TaskQueue의 상태를 확인하며 CallStack이 비워지면 콜백 함수를 CallStack으로 이동시키고 실행완료 하면 CallStack이 비워지며 "Second" 을 출력한다.
   
   

gif 출처 : kim unknown.log

---

04. 비동기 처리의 필요성

웹에서 서버에 데이터 요청을 했을 때, 요청이 완료되기 전까지 아무것도 실행이 되지 않는다면 화면이 멈춘 것처럼 보이는 현상과 하나의 프로그램을 실행하는데 많은 시간이 소요되기 때문에 비동기 처리를 해준다.

---

05. 비동기 처리의 종류

• Promise : 응답에 관한 정보를 갖고 있는 객체로, then 과 catch를 통해 결과값 처리
• await / async : Promise를 기반으로 하며, try - catch 사용
• fetch : 접근하고자 하는 url과 매개변수로 네트워크에 요청