Vanilla Javascript로 Promise 직접 구현하기

• 이 프로젝트에서는 Javascript Promise 동작 방식을 이해하기 위해, 이와 동일한 기능을 수행하는 커스텀 클래스 MyPromise를 직접 구현해 보았다.

  <aside> 💡 선행 학습 구현부 코드는 하단 Javascript 개념을 모르면 이해하기 어려울 수 있다. (1) 비동기 처리와 이벤트루프 (2) 실행 컨텍스트 (3) this 바인딩

  </aside>

• 직접 구현한 Promise 코드를 확인해보고 싶다면 https://github.com/JSDeepDive/CustomPromise 를 참고하자.

0. 들어가며

• 비동기 처리에는 무조건 async/await 패턴만 사용하다가, Javascript의 대표적 비동기 처리 방식인 (1) 콜백 패턴 (2) Promise 패턴 (3) async/await 패턴 각각의 장단점을 알고 써야하지 않을까하는 생각이 불현듯 들었다. (이 강을 건너지 말았어야 했다…)
• 시중의 자바스크립트 자습서, 유명 블로그 포스트를 뒤져가며 각 패턴의 장단점을 텍스트 형태로 학습했지만, 코드로 옮기질 않으니 도통 와닿지 않는다.
• **직접 Promise를 구현해보면, 콜백 패턴의 한계를 Promise가 어떻게 해결하려 했는지 이해할 수 있지 않을까?**라는 단촐한 생각에서 출발한 프로젝트를 소개한다.

1. Promise란 대체 무엇인가 🧑🏻‍💻

✅ Promise는 state, result, 콜백 함수 배열들을 상태값으로 갖는 객체이다.

✅ Promise 후속 처리 메서드는 콜백함수 배열에 인자를 추가한다.

✅ resolve, reject 호출로 Promise 상태가 변화하면, 처리 결과를 인자로 콜백 함수 배열이 호출된다.

✅ Promise 후속처리 메서드는 항상 Promise를 반환하기 때문에 Promise 메서드 체이닝이 가능하다.

✅ Promise 후속처리 메서드에 등록한 콜백함수는 microtask queue에 등록되고, 이후 event loop에 의해 call stack으로 이동되어 실행된다.

✅ Promise는 이 외에도 다양한 static method들을 제공하여 간단히 비동기 후속 처리를 할 수 있도록 도와준다.

❇️ Promise 내부 동작 방식 정리

2. Promise가 해결한 문제 🔧

• 이제 Promise 내부 동작 방식에 대해 파악했으니, ES6에서 Promise를 도입함으로써 해결하고자 했던 문제가 무엇인지에 대해 짚어보자.

✅ Javascript의 비동기 처리 패턴은 왜 도입되었는가