자바스크립트 동기와 비동기

#. 동기는 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 즉 A 요청 후 응답을 받을 때까지 다음 B 동작은 실행될 수 없는 것이다. 동기는 동시에 일어난다는 뜻이다. 따라서 동기는 전체 작업의 흐름이 하나의 줄기에 따라 순차적으로 실행된다고 생각하자! 

 

#. 비동기는 요청을 즉시 처리하지 않아도 그 대기 시간동안(응답오기 전까지의 시간) 다른 동작이 이루어지는 방식이다. 즉 C 요청 후 응답 받을 때까지 기다리는 것이 아닌 다음 B 동작도 바로 실행시키는 것이다. 따라서 비동기는 전체 작업의 흐름이 하나의 큰 줄기 안에서 여러 갈래로 나뉘었다가 다시 큰 줄기로 모이는 병렬적으로 실행된다고 생각하자!

 

#. 자바스크립트는 단일 스레드, 동기식으로 동작한다. 즉 한 번에 하나의 작업을 수행한다. 한 작업이 실행되는 동안 다른 작업은 실행하지 않은 채로 자신의 차례를 기다린다. 그런데 이러한 동기적인 방식은 웹 환경에서 너무 많은 대기 시간을 발생시킨다. 수많은 데이터를 빠르게 주고 받기 위해선 한 번에 여러개의 작업을 수행할 수 있는 비동기적인 방식을 효율적으로 잘 사용해야 한다.

 

#. 자바스크립트에서 비동기 구현 방식 세가지
1) 콜백 함수 : 특정 함수에 매개변수로 전달되는 함수를 콜백 함수라고 한다. 콜백 함수로 비동기 구현 시 함수 속에 함수, 또 함수 속에 함수인 구조로 가독성이 좋지 않고 코드 관리하기에 매우 어렵게 된다 (예: 콜백 지옥). 

2) Promise : .then() 메소드를 호출하여 콜백 함수와 기능은 동일하지만 훨씬 간결하고 가독성이 좋은 코드를 짤 수 있게 된다. promise에는 pending, fulfilled, rejected 세가지 상태가 있고, 콜백 함수의 인자로 resolve와 reject를 받을 수 있다.

3) async / await : 기존의 콜백 함수와 promise의 단점을 보완할 수 있다. promise 또한 자칫 .then() 지옥에 빠지기 쉬운데 이를 보완하여 나왔다. 사용할 함수 앞에 async 키워드를 붙이고 선언된 sync 함수 안에서만 await 키워드를 사용할 수 있다. 이때 await 객체의 반환값으로 promise의 resolve함수의 인자값이다. 그리고 try-catch 구문을 함께 사용한다면 비동기 처리 오류 구문을 잡을 수 있다.