✨ Feat: Promise

[D5ng]

Promise 구현하기

Promise란 비동기 작업의 성공과 실패를 다루는 객체를 말한다. Promise는 ES6의 문법이다.

Promise가 ES6에 도입된 이유는 기존 Callback Function의 문제 때문이다. 사용자 인터랙션이 언제 발생할지 모르기 때문에 함수의 제어권을 함수로 넘겨주어 실행되도록 한다. 하지만 Callback의 Depth가 커진다면 읽기가 힘들어지는 가독성 문제와 에러처리를 하나하나 해주어야한다는 불편함도 있었다.

비동기에서 에러를 관리하기가 힘들다. 동기 코드가 모두 실행된 이후에 Callback Queue에서 Callback Function을 꺼내와 실행하기 때문이다.

Promise는 비동기 처리에서 발생하는 Callback Function의 문제점을 보완하여, 개발자들에게 더 나은 편의성을 제공하는 문법이다. 특히, 가독성을 유지하면서도 Callback Hell을 방지하고, 개별적인 에러 처리가 아닌 자동 에러 전파를 통해 더욱 효율적인 에러 관리가 가능하도록 설계되었다.

✅ 구현 목록

• Promise.resolve()
• Promise.reject()
• Promise.prototype.then()
• Promise.prototype.catch()
• Promise.prototype.finally()

📄 구현 과정

• Promise의 State(pending, fulfilled, rejected) 정의
• resolve, reject에서 pending 상태가 아니면 상태와 결과 값을 저장하도록 구현
• then은 MicroTask Queue로 동작하는 특징으로, queueMicroTask 활용하여 새로운 Promise를 반환하도록 구현
• catch는 then(undefined, onRejected)의 특징을 활용
• finally는 then(onFinally, onFinally)의 특징을 활용

느낀 점.

• 이론적 지식은 어느정도 알고있었지만, 막상 구현하는데 막막하고 어려웠음.
• MDN 문서를 살펴보며 하나하나씩 구현
• 문제를 정의하는것 조차 쉽지 않다는것을 깨달음. 문제를 찾기 위해선 내가 짠 코드를 모두 풀이하여 찾아야함. (노가다지만 가장 확실한 방법)