동기식 (Synchronous) / 비동기식 (Asynchronous)

동기식 (Synchronous)

먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다.
위 그림 Synchronous와 같이 작업이 직렬로 배치되어 실행되며 작업 실행의 순서가 확실히 정해져 있는 것을 동기식 처리라 부른다.

비동기식 (Asynchronous)

동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식이다.
위 그림 Asynchronous와 같이 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생한다.
이와 같은 방식을 비동기식 처리라 부른다.

자바스크립트는 기본적으로 비동기적으로 동작을 한다.
개발하다 보면 비동기식으로 동작하는 부분이 동기적으로 동작해야 하는 경우가 생긴다.
이럴 때 비동기식 동작이 동기식으로 동작하도록 해주는 걸 비동기 처리라고 한다.

2. Promise
   Promise 처리 흐름
   

   

Promise는 자바스크립트 비동기 처리에 사용되는 객체이다.
이를 사용하면 비동기 작업이 종료된 이후의 성공 결괏값이나 실패에 대하여 처리할 수 있다.
대기(pending): 이행하거나 거부되지 않은 초기 상태
이행(fulfilled): 연산이 성공적으로 완료됨
거부(rejected): 연산이 실패함
​Promise 사용 방법​
new Promise(function(resolve, reject) {
// ...
});
​
new Promise() 객체를 생성하여 콜백 함수를 선언할 수 있는데 이때의 인자는 resolve, reject를 사용한다.
resolve는 결과가 성공인 Promise 객체를 반환하고 reject는 결과가 실패인 Promise 객체를 반환한다.
​
반환된 Promise 객체를 처리할 때 성공 시 then을 사용하고 실패 시 catch를 사용하여 처리한다.