드림코딩 자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6)
영상을 보며 정리하려고 한다!

비동기 처리를 하나의 패턴으로 콜백함수를 사용한다. 하지만 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제가 있어 ES6에서는 프로미스가 도입되었다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다!

프로미스(Promise)

• 프로미스는 비동기 처리를 위한 자바스크립트 객체이다.
• 프로미스는 두 가지 포인트를 잡고 공부하면 된다.
  1. state(상태): 프로세스가 기능을 수행 중인지, 기능 수행을 완료하고 성공했는지 실패했는지 등에 관한 상태에 대해 이해하는 것.
  • pending -> fulfilled or rejected
    • pending: 비동기 처리가 아직 수행되지 않은 상태
    • fulfilled: 비동기 처리가 수행된 상태(성공)
    • rejected: 비동기 처리가 수행된 상태(실패)
  2. producer vs consumer: 데이터를 제공하는 producer와 데이터를 소비하는 consumer의 견해를 이해하는 것.

1. Producer / Promise 만들기

• Promise는 클래스이기 때문에 new 연산자를 사용해서 오브젝트를 생성할 수 있다.
• 비동기 처리를 수행할 콜백함수(executor 함수)를 인수로 전달받고, 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다.

// 프로미스 생성
const promise = new Promise((resolve, reject) => {
});

• 새로운 프로미스가 만들어질 때는 excutor 함수가 자동적으로 실행된다.

2. Consumers / Promise 사용하기

• 프로미스 후속 메서드 then, catch, fianlly를 사용하여 후속 처리를 한다.
• then
  • 두 개의 콜백 함수를 인수로 전달 받는다.
  • 첫 번째 콜백 함수는 비동기 처리가 성공했을 때 호출되는 성공 처리 콜백 함수이며 두 번째 콜백 함수는 실패했을 때 호출되는 실패 처리 콜백 함수다.
    
    
• catch
  • 한 개의 콜백 함수를 인수로 전달받는다.
  • 프로미스가 rejected 상태인 경우만 호출된다.
• finally
  • 한 개의 콜백 함수를 인수로 전달받는다.
  • 프로미스의 성공 또는 실패와 상관없이 무조건 한 번 호출된다.
    

3. Promise chaining / Promise 연결하기

• then, catch, finally 후속 처리 메서드는 언제나 프로미스를 반환하므로 연속적으로 호출할 수 있다. 이를 프로미스 체이닝이라 한다.

4. Error Handling / 오류를 잘 처리하자

• error를 handling 하지 않았을 때: promise.js:57 Uncaught (in promise) Error라고 콘솔에 출력된다.
  
• 맨 밑에 catch를 넣어주어 Error를 Handling 한다.
• 에러가 발생하는 지점 뒤에 catch를 넣어 프로미스 체인이 실패하지 않도록 한다. 순서를 변경해가며 코드를 작성하다보면 이해가 더 쉬울 것이다!
  

5. 💩 →✨✨✨✨✨

1. UserStorage 클래스를 Promise로 바꿔주기!

• onSuccess, onError를 지우고 return new Promise ... 를 추가해준 뒤 resolve, reject를 작성한다.
  
  

2. 후속 처리 메서드 사용하기
   
   
   길었던 콜백 지옥이 promise 후속 메서드들을 사용하여 짧게 작성되었다!!!