지난 개념에서, 콜백함수에 대해 다뤄봤었는데.
콜백함수는 단점이 있었습니다. 바로 꼬리에 꼬리에 무는 , 콜백 지옥이 발생하기에 가독성이 떨어진다는 것입니다.

Promise, async/await는
비동기로 동작하는 JS에서, 이러한 콜백지옥에 대한 단점을 보완하기 위해 나온
JS의 자체 Object 입니다.

조금 더 풀어서 얘기하면, 비동기 코드를 동기 코드처럼 보이게 도와주는 게
Promise 이고, 이러한 Promise에 Syntatic Sugar가 추가 된게
Async / Await 입니다.

Syntatic Sugar란?
프로그래밍 언어 차원에서 제공되는 논리적으로 간결하게 표현하는 것
중복되는 로직을 간결하게 표현하기 위해 나타나게 되었다.

Promise

한국말로 풀어보면 약속, 약속하다 인데
JS에서 Promise는 어떠한 약속을 잡아놓고, state(상태)에 따라서
어떠한 행동을 하게 하는 메서드(혹은 생성자)라고 보시면 쉽게 이해할 수 있을 것 같습니다.

코드를 통해 더 깊게 접근해보겠습니다!

위 코드에서 promise 는 new Promise ( executor(실행자) 함수) 로 이루어져 있습니다.
주의할 점은 , 이 Promise라는 생성자함수는 만드는 순간, 동작을 하고
보통 저 console.log 대신, 네트워크에서 수신을 하기에 Promise가 만들어진 순간부터 바로 네트워크 통신이 시작된다고 보면 됩니다.
만약 필요할 때만 송신하고 싶다면 다른 방식으로 코드를 작성해야 합니다.

Promise는 resolve,reject를 인자로 갖는 함수 입니다. resolve는 성공하였을 경우, reject는 실패하였을 경우 라고 생각하면 됩니다.
이 때 setTimeout 함수를 사용하여, 2초 뒤에 resolve에 Good을 갖는 조건을 갖게하고, 1단계를 마무리합니다.
Promise는 크게 2단계로 나눠지는데,이렇게 promise를 생성하는 1단계를
producer 단계라고 생각하면 됩니다.

그 다음은 consumers , 소비되는 2단계는 다음과 같습니다.

promise에 .then을 통해 value를 받고, 그 value를 출력하는 메서드입니다.

이 코드에서 value는 resolve의 값, Good 이기에 코드가 정상 작동(성공)한다면 다음과 같이 동작합니다.

=>doing something...
2초 뒤
=>Good

여기에 체이닝을 통해, .catch , .finally 를 사용할 수도 있는데,
.catch는 Promise의 실행자함수가 실패하였을 경우,
예를 들어 네트워크 통신에 실패하거나 다른 문제가 있을경우에 동작하는 코드이고,
.finally는 성공 유무에 관계 없이, promise가 끝난다면 동작하는 코드입니다. 완성된 전체적인 코드를 통해 알아보겠습니다.

다음 코드는 성공할 경우 Good, 실패할 경우 Error 값을 갖는 Promise 입니다. (여기서 new Error는 나중에 다뤄야 할만큼 양이 방대하니, 넘어가겠습니다!)

만약 성공한다면, (then)
2초 뒤 Good이 출력되며
만약 실패한다면, (catch)
2초 뒤 Error 값이 출력됩니다.
이 과정들이 다 끝난다면,
(finally)끝 이라는 메시지가 출력됩니다.

위 코드가 짧지만 쉬운 Promise 의 예입니다.
사실 이해하는데 저도 많은 시간이 들었고, 설명하기에도 힘든 개념이지만 콜백함수의 단점을 보완하기 위해 쓰는 메서드
라고 생각하고, 실무에서 실제로 사용하다보면 익숙해지기에
엄청 깊게 개념을 하나하나 아는 것보다는, 사용 경험이 먼저라고 생각이 듭니다.

다만, 위 예제코드는 Promise를 설명하는 코드일뿐,
콜백지옥을 벗어나기 위해 쓰는 코드라고는 볼 수 없습니다.
아래 코드는 Promise를 사용하지 않고, 기존의 방법으로 짠 코드입니다.

워낙 간결한 기능이기에, 가독성이 그렇게 떨어지거나
콜백지옥이 생기진 않지만, 복잡한 기능과 코드들이 더 추가된다면
콜백지옥이 시작 되기에, 그런 경우엔 Promise를 통해
.then
.then
.then
이런 식으로 코드가 안쪽으로 들어가지 않게, 작성하는 게 좋습니다.
경험을 통해 어떤 경우에 Promise를 쓸지, async/await를 사용할지 판단하는 능력을 키우는 것 또한
중요하다고 생각합니다.

워낙 설명이 길어, async/ await는 다음 글에 설명하려합니다.
감사합니다!

(도움을 준 영상 - 드림코딩,
코드예제 : chatGPT )