[TIL] callback, promise, async

Ethan Jeong·2022년 7월 27일
0
  • 이 글의 내용은 아직 이해를 못하고 있는 작성자가 그나마 이해한 부분을 작성한 내용입니다.


CPA를 왜 쓰나요?

여러 다른 쓰임이 있지만, 보편적으로 데이터의 비동기 처리를 위해서 사용한다. (비동기가 뭔데?)

예시)
김동기는 편의점 알바생이다.

  • 김동기는 손님이 계산을 하기위해 물건을 카운터에 올리면 그 주문을 처리하고 다음 손님의 계산을 처리한다.

김비동기 카페 알바생이다.

  • 김비동기는 손님이 주문을 요청하면 일단 뒤에 줄 서있는 사람들의 주문을 한 번에 받는다.
  • 먼저 만들어진 커피를 먼저 주문한 손님에게 제공하면서 요청을 처리한다.

비동기적 요청처리가 가장 효율적인 상황에서 우린 CPA(씨파)를 사용하여 비동기를 구현할 수 있다.

중요한 포인트는 비동기 순서를 제어할 줄 알아야 효율적인 일처리가 가능하다.

만약 카페에 a손님과 b손님이 와서 a손님은 아메리카노 200잔을, b손님은 카페라떼 한 잔을 주문했다면
어떻게 처리하는 게 가장 효율적일까?
빠르게 처리가능한 b손님의 요청을 먼저 처리하고 (응답), a손님의 200잔을 위해 열심히 일하는 것이다.
여기서 말한 응답이란 callback (매개변수로 사용할 수 있는 함수) 을 사용하는 것이다.

그렇게 우린 콜백지옥으로...

Callback

위의 예시에서 우리는 콜백함수를 이용하여 비동기의 순서를 제어했다.
하지만 비동기 요청을 처리하는 중 콜백함수를 익명함수로 전달하는 과정이 반복되어 가독성이 심하게 떨어진다.
이를 해결하기위해 우리는 CPA의 P를 담당하는 promise라는 것을 배워야 한다.


Promise

먼저 promise를 사용하여 위의 코드를 좀 더 보기 쉽게 수정하자.

Promise는 비동기적으로 실행하는 작업의 결과(성공 or 실패)를 나타내는 {객체}이다.
예시에서 printString이라는 함수안에 new Promise를 사용하여 resolve(성공)와 reject(실패)를 매개변수로 받는 함수를 만들어 그 안에서 타이머 함수를 실행한다.
랜덤한 시간이 지나면, setTimeout 함수는 printString 함수의 매개변수인 string을 받아서 콘솔창에 띄운다. 그리고 resolve() 메서드가 실행된다. 리턴된 promise는 .then() 메서드가 사용되어 다음 알파벳이 string 인자로 들어간다.

이 설명을 쓰면서 난 아직도 완벽한 이해를 못했다고 생각이 들었다ㅠㅠ...


Async / Await

더 나아가 어싱크 어웨잇은 프로미스를 사용하면서 해당 함수들이 비동기적으로 진행되지만, 동기적으로 보이게끔 만들어 준다.

주말에 보충하자..


promise의 then((value) =>{}) 를 이해하니깐 어느정도 윤곽이 잡힌다.
promise가 실행되고 팅겨나온 값이 resolve일 때 then이 없으면 그 값을 바로 리턴하고 then이 있으면 then의 value가 되어 사용이가능하다.
그리고 만약 reject가 팅겨나오면 catch를 사용해서 에러를 조작한다.

return new Promise((resolve, reject) => {이곳엔 조건문을 주로 넣어 성공/실패 값을 지정하는 듯 하다.}).then((성공일때의) => {프로미스에서 팅겨나온 리졸브 값을 인자로 받아 실행하는 함수}).catch((실패일때의) => {팅겨나온 에러값을 인자삼아 실행하는 함수})

profile
효율매니아

0개의 댓글