프로미스를 제대로 알고 사용하기
자바스크립트를 사용하는 많은 개발자들이 Async/Await 문법을 사용해서 코딩하는 것을 선호하는 느낌을 받았다. Async/Await 문법은 동작하는 원리도 간단하고 배우기 쉽고 적용하기도 쉽다. 그리고 프로미스에 비해서 콜백 형태의 패턴이 없어지게되면서 시각적으로도 이뻐보인다. 그래서 더욱 많이 사랑받고 널리 쓰이는게 아닌가 싶다.
그럼에도 불구하고, 프로미스는 Async/Await 과는 근본적으로 다르다. 내가 만난 많은 개발자들이 프로미스를 단순히 Async/Await 의 이전 버전쯤으로 생각하는걸 봤다. 왜냐면 프로미스는 ES6 스펙이고 Async/Await 은 ES8(ECMAScript 2017) 이기 때문이기도하고 둘 다 비동기처리에 사용되다보니 그런게 아닌가 싶다. 심지어, 내가 만난 몇몇 기업의 기술 면접관으로 나온 사람들도 프로미스에 대해 정확히 모르는 사람들이 있었다.
이번 포스팅에서는 프로미스가 어떤 방식으로 동작하는지 최대한 쉽게 설명하려고 한다.
읽기 전에
최소한의 프로미스 사용법은 숙지한 상태에서 이 글을 읽는 것을 추천한다.
프로미스 동작 방식
프로미스를 공부할 때 한 번쯤은 봤을만한 그림으로, 프로미스의 생명주기를 보여주고 있다. 프로미스의 기본은 아주 단순하다. 프로미스를 실행하면 결과는 둘 중 하나다. 성공을 의미하는 fulfill 과 실패를 의미하는 reject 가 있고, 결과를 받기까지의 중간 단계를 pending 이라고 칭한다.
console.log(1);setTimeout(() => {
console.log(2);
}, 10);new Promise(res => {
res(console.log(3));
}).then(() => {
console.log(4);
});
