비동기를 배우며 겪은 어려움..

IntHyun·2022년 10월 18일

비동기 프로그래밍을 혼자 공부하며 이해가 안됐던 부분을 적어내려 가보겠습니다.

비동기 프로그래밍

1. 비동기 프로그래밍이란 뭘까?

비동기 프로그래밍이란 무엇일까? 이해하기 쉽게 비교하여 설명하자면,

홍길동이라는 사람이 해야 할 일이 청소, 빨래, 설거지, 요리라고 가정해보자.

이 일을 순차적으로 진행하는 것을 동기라고 하는데 예를들어
10시에 청소를 시작하여 청소가 끝난 뒤 11시에는 빨래 그리고 빨래가 끝나고
12시에는 설거지 그 뒤에 요리를 시작하는 이러한 프로세스를 거치는 것을 동기라고 한다.

즉, 어떠한 일이 끝나고 난 뒤에야 그 다음일을 처리하는 것이다.

그러나 비동기는 일을 비 순차적으로 처리하는 것이다. 위의 예로 계속 해보면

로봇 청소기를 돌려놓음과 동시에 빨래를 돌려놓고 설거지를 하고 요리를 위해 물도끓이는
이러한 프로세스를 거치는 것이 비동기이다.

즉, 어떠한 일이 끝나고 난 뒤에 다음일을 처리하는 것이 아닌 비순차적으로 한 번에 처리하는 것이라
볼 수 있는데, 비동기 프로그래밍 안에서도 순서는 있지만 비동기 자체는 일을 동시에 처리하는 것이라
보면 된다.

비동기에 대한 개념이나 예제코드 등은 여기에서 작성하지 않겠습니다! only 헷갈렸던 부분만
우선 작성하겠습니다. 왜 why? 내 벨로그니께~

참고로 개념에대한 공부나 예제는 깃허브에 md파일로 적어놓았습니다 게으르다고 오해하면 안됩니동ㅋ

2. 헷갈렸던 점

let p = new Promise(function (resolve, reject) {
    // 비동기적으로 실행될 code 작성
    resolve('hello world');
})
    .then((메시지) => {
        alert(메시지);
        return 메시지.split(' ')[0];
    })
    .then((메시지) => {
        alert(메시지);
        return 메시지[0];
    })
    .then((메시지) => {
        alert(메시지);
        return 메시지;
    });

console.log(p);

비동기를 공부하며 헷갈렸던 점이 바로 위의 코드입니다.

위의 코드를 콘솔창에 출력해보면 Promise를 반환하는데 pending을 반환합니다.

위의 이미지와 같이 말입니다.

여기서 저는 궁금증이 생겼는데 왜 Promise가 완료되었는데도 pending을 출력해주는거지?
완료가 되었다면 fullfiled를 반환해야 하는 것이아닌가?.. 라는 생각을 했습니다.

바보같이 비동기 프로그래밍을 하고있으면서 인지를 못했던 것이지요..ㅋ

저는 비동기라는 것을 인지하지 못하고 평소처럼 순차적으로 실행 되는줄 알고 있었던 것입니다.

즉, 정리하자면 위의 예제 코드는 비동기 프로그래밍이므로 아직 위의 코드가 완료되지 않았지만
밑의 console.log(p)를 먼저 실행시켜 준 것입니다.

그렇기 때문에 아직 p는 완료된 상태가 아닌 상태에서 콘솔창에 찍혔음으로 pending상태가 되는게 맞는것이지요.

3. 두번째 의문

아니 여기까지는 ㅇㅋ 근데 왜 pending이라했으면서 PromiseState는 완료되었다고 뜨지?
라는 의문이 또 생긴 것입니다.

이 의문 또한 손쉽게 해결이 되었는데

위와 같이 setTimeout을 통해 강제로 5초늦게 실행이 되게 만들어 준 뒤 콘솔창에 찍자마자
상태를 보면 'pending'이라고 출력이 되어있는 것을 볼 수 있습니다.

이 또한 제가 이해한 바로는 실행은 시켜주는데~ 아직 값은 없어~ 라는 뉘앙스로 이해를 했습니다.
그렇기 때문에 pending상태가 된 것이고 아직 p에는 아무런 값도 들어가 있지도 않고 Promise가 fullfiled 된 상태가 아닌 완전 대기상태가 되는 것이지요.