자바스크립트 동기와 비동기 (22.11.12 TIL)

동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말하며 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식이다.

자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있다. 그러므로 자바스크립트는 동기 방식으로 진행된다. 하나의 호출 스택만 있기 때문에 하나의 함수를 처리하는 데 매우 오랜 시간이 걸린다면 다음 실행해야 할 함수에 지장을 줄 수 있다는 문제가 발생한다. 이 부분이 바로 비동기의 필요성이다. 그렇다면 자바스크립트에서는 어떻게 비동기를 구현할까?

1. callback 함수 이용

callback (이하 콜백) 함수는 다른 함수의 인자로써 이용될 때나 어떤 이벤트에 의해 호출되어질 때 사용하는 함수로, 비동기 처리의 해결방안이 될 수 있지만, 콜백 함수 안에 콜백 함수를 계속 중첩으로 사용하다 보면 코드의 가독성이 매우 나빠지고 로직 변경도 어려운 소위 '콜백 지옥' 에 빠질 수 있다. 별로 선호되지 않는 방식이다.

2. promise

promise (이하 프로미스)를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(state) 이다. 여기서 말하는 '상태'란 프로미스의 처리 과정을 의미한다. new Promise() 로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

1) pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- new Promise() 메서드를 호출하면 대기 상태가 된다. 이 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject 이다.

new Promise(function(resolve, reject) {
  // ...
});

2) fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
- 위의 pending 상태의 콜백 함수의 인자 resolve 를 아래와 같이 실행하면 fulfilled 상태가 된다.

new Promise(function(resolve, reject) {
  resolve();
});

fulfilled 상태가 되면 then() 을 이용하여 처리 결과 값을 받을 수 있다.

3) rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
- 위의 pending 상태의 콜백 함수의 인자 reject 를 아래와 같이 실행하면 rejected 상태가 된다.

new Promise(function(resolve, reject) {
  reject();
});

그리고 실패 상태가 되면 실패한 이유를 catch() 로 받을 수 있다. 

promise 를 이용해 비동기를 처리하는 방법은 서버에서 제대로 응답을 받아오면 resolve() 메서드를 호출하고, 응답이 없으면 reject() 메서드를 호출한다. 호출된 메서드에 따라 then()이나 catch()로 분기하여 응답 결과 또는 오류를 출력할 수도 있다.

3. async, await

1) async 가 붙은 함수는 반드시 promise 를 반환하고, promise 가 아닌 것은 promise 로 감싸 반환한다.

2) async 함수 안에서만 동작한다. 자바스크립트는 await 키워드를 만나면 promise 가 처리될 때까지 기다리고, 결과는 그 이후 반환된다.

이렇게 하면 promise 가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다.