자바스크립트는 유난히도 비동기적 작동을 많이 한다.
자바스크립트 자체가 비동기적인 언어라는 느낌이다.
사실 맞다.
비동기적인 작동을 하기 위해서 만들어진 언어다.
동기적 작동도 수행하지만 promise와 asnyc-await를 주로 사용해서 비동기적인 동작을 많이 수행한다.
자바스크립트를 익힌지 얼마 안된 초보에게 promise는 도대체 왜! 쓰이는지? 그리고 도대체 왜! 이렇게 동작이 되는지? 많이도 헷갈렸다.
Promise
mdn 공식문서에서는 Promise를 이렇게 설명한다.
- Promise 는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로,
비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다.
다만 최종 결과를 반환하는 것이 아니고,
미래의 어떤 시점에 결과를 제공하겠다는 '프로미스(promise)'를 반환합니다.
조금? 아니 많이 헷갈린다.
그도 그럴 것이 비동기적인 동작을 수행해야 할 필요성을 느끼지 못할 정도로 컴퓨터과학적인 지식이 부족하고 경험이 부족하기 때문에...
하지만 네트워크와 데이터베이스를 배우고 서버 관련된 데이터로직을 처리하는 방법을 배우기로 한 이상! 비동기적 함수를 사용하는 것은 필수이다. 아니? 필연이다.
Promise는 아래의 세 가지 중 하나의 상태를 가진다.
- 대기(Pending) : 이행하지도, 거부하지도 않은 상태
- 이행(fulfilled) : 연산 성공
- 거부(rejected) : 연산 실패
Promise가 이 "상태"를 갖는다는 것을 이해하는 것이 중요하다.
동기적인 동작만을 하는 코드를 작성했다면 프로그램이 실행될 때 우리가 작성한 코드의 순서 그대로 진행이 될 것이다.
하지만, 우리는 현재 실행하고 있는 프로그램에 대해서만 제어가 가능하다.
해당 프로그램을 실행하는 코드 내에서 CRUD를 실행하려해도 해당 프로그램의 권한 밖 (다른 곳에서 실행되는 동작)에서는 우리가 할 수 있는 것이 없다.
예를 들자면 이런 것이다.
우리가 클라이언트 프로그램에 대한 코드를 작성 중에 서버로부터 데이터를 요청하려한다.
서버에서 응답이 올 때까지 프로그램이 동작하지 않고 멈춰있을 수는 없다.
서버가 언제 응답이 올 지 모르기 때문이다.
그럴 때는 서버가 응답이 왔을 때 동작해야 할 기능들을 구현해야 한다.
그럴 때 쓰는 것이 비동기적인 함수의 구현인 것이다.
프로그램이 제어할 수 없는 부분에 대해서 "예방"을 할 수 있도록, 그리고 자연스러운 동작이 될 수 있도록 돕는 것이 바로 이 "비동기적" 동작인 것이다.
이것을 이해해야만 Promise를 이해할 수 있다!
Async-Await
이제 비동기적 함수를 왜 써야하는지 그리고 어떻게 써야할 지에 대해 감이 잡히기 시작했다.
async는 그럼 어떻게 동작할까?
아래는 예시 코드다.
Promise.resolve().then(console.log('a'));
console.log('b');
function syncF(){
console.log('c');
}
async function asyncF() {
console.log('d');
await Promise.resolve(console.log('await?'));
console.log('e');
return true;
}
asyncF();
syncF();자, 실행하면 어떻게 출력될까?
원래 예상대로라면
b c a d await? e 가 순서대로 나올 것 같았다.
출력결과는?
async 함수 내에서 await가 사용된 다음 코드 라인부터 비동기적으로 동작이 처리된다.
그 전까진 동기적으로 동작이 처리된다...
이건 조심해야겠다.
그림 참조: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
