Promise?? Callback?? 차이가 뭔데?

1. 동기 / 비동기

• Promise와 callback을 알기 전에 동기 / 비동기 개념을 알 필요가 있다.
• 동기 : 현재 실행중인 코드가 끝나야 다음 코드를 실행한다.
• 비동기 : task를 실행하라고 브라우저에 맡겨놓고 다음 task로 넘어간다. 단점은 실행 순서가 보장도지 않는다.

2. JS의 동기 / 비동기

• 기본적으로 JS는 동기이다. 따로 비동기 처리를 하지 않았는데 비동기 처리를 마주치게 되는 이유는 우리가 자연스럽게 쓰는 WebApis 중 여러 것들이 비동기 방식으로 만들어졌기 때문이다.
• JS는 한번에 하나의 task만 실행할 수 있는 Single Thread 이다. 그래서 시간이 걸리는 task 실행 시 blocking이 발생한다.

3. callback

• 함수의 매개변수인 함수로, 주로 비동기 처리에서 동기 처리를 할 때 callback 패턴을 사용한다. 문제는 callback 함수의 중첩이 많을수록 가독성이 심하게 나빠진다.

4. Promise

• 비동기 동작을 처리하기 위해 ES6에 도입
• Promise는 클래스로 인스턴스화 해서 promise 객체를 만든다.
• 반환된 promise로 원하는 비동기 동작을 처리한다.
• resolve는 성공했을때, 실행할 함수, reject는 실패했을떄 실행할 함수이다. 미리 정의하지 않아도 JS엔진에서 미리 정의 해놓는다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("resolveMark");
  }, 2000);
  reject("rejectMark");
});

promise.then(
  resolveMark => console.log(resolveMark),
  rejectMark => console.log(rejectMark)
);

//console
'rejectMark'

4-1) Promise Chaining

• 여러 개의 비동기 작업을 순차적으로 해야하는 경우 사용
• 순차적으로 각각의 작업이 이전 단계 비동기 작업이 성공하고 나서 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우
• then()의 콜백함수는 여러 타입의 값을 반환할 수 있다.

const promise = new Promise((resolve, reject) => {
  resolve("success");
});

promise
  .then(() => 2)
  .then(res => console.log(res));

//console
2

• then( ) 의 첫 번째 인자에 resolve가 오고 두 번째 인자에 reject가 오고 이런 것과 상관없이 그냥 다음 .then( )에서 반환되는 값을 인자로 활용할 수 있다.

4-2) Promise State

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

4-3) Promise 에러 처리

• reject()를 활용하여 수동으로 해줄 수도 있고 catch( )를 활용하여 자동으로 해줄 수도 있는데 catch( )가 가독성이 더 좋다.

promise
  .then(() => {})
  .catch(() => {});

4-4 ) Promise.all()

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 9000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), 
  new Promise(resolve => setTimeout(() => resolve(3), 1000)) 
]).then(console.log);

//console
[ 1, 2, 3 ]

• 배열 안의 작업들을 비동기 처리를 하는데, task가 다끝나고 순차적으로 실행한다.
• 파라미터로 배열을 받으며 대량의 파일 업로드 같이 서로 영향을 미치지 않는 실행들을 비동기적으로 실행하고 싶을 때 사용 한다.

5. Callback vs Promise의 차이점

• 우선 둘의 차이점은 바닐라 JS와 프레임워크의 차이와 같이 틀의 존재 여부 같다. Promise 클래스는 비동기 처리만들 위해 만들어졌기 때문에 클래스에 resolve나 reject 함수들이 잘 정의되어 있고 이를 잘 활용하면 된다. 반면, callback은 자유도가 높지만 template가 존재하지 않기 때문에 코드가 복잡해지고 에러 처리 같은 작업들이 어렵다.