주벨로퍼의 개발 공부

프리코스 때 미리 promise와 async/await를 공부했었는데 이머시브 코스에서 좀 더 심도 있게 알아간 부분에 대해서만 정리를 하려고 한다.

promise, async/await의 문법과 사용방법은 다른 카테고리에 정리를 해두었다.

1. 동기 vs 비동기 (Sync vs Async)

  어떠한 일을 수행하는데 동기적으로 처리하는 방식과 비동기적으로 처리하는 방식의 차이는 무엇일까?

  동기적으로 처리하는 방식은 주어진 일을 다 마무리하고 그다음 일을 수행하는 방식을 말한다.

  반면 비동기적으로 처리하는 방식은 병렬적으로 일을 수행하는 방식이다.

  실생활 예로 카페에서 커피를 주문한다고 생각해보자.

  동기적으로 처리한다면 A의 주문을 받고 A의 커피를 만들고 A에게 커피를 준 다음 B의 주문을 받을 것이다.

  비동기적으로 처리한다면 A와 B의 주문을 다 받은 다음 커피가 만들어진 순서대로 A와 B에게 커피를 줄 것이다.

  조금만 생각해보아도 비동기적인 방식이 훨씬 효율적임을 알 수 있다.

  마찬가지로 웹 어플리케이션에서도 클라이언트와 서버 간의 데이터를 주고받음에 있어서 비동기적인 처리를 수행한다.

  이처럼 비동기 처리의 장점은 동시성이라고 할 수 있다.

  하지만 단점이라고 한다면 병렬적으로 일을 수행하고 또 어떤 일이 먼저 끝날지 모르기 때문에 순서를 보장할 수 없을 것이다.

  때문에 비동기 처리를 하는 와중에도 순서가 지켜져야 할 필요가 있는 어떤 일을 수행하기 위해 콜백 함수가 사용될 수 있다.

  콜백 함수라는 이름의 의미에서도 알 수 있듯이 특정 일이 끝나면 나를 다시 호출해줘라는 말 자체가 순서를 가지겠다는 말이기 때문이다.

  아..하지만 여기서 또 문제가 발생한다.

  문제는 콜백에 콜백에 콜백이 중첩되는 콜백 지옥이 발생하고 그러한 콜백 지옥은 코드의 가독성과 디버깅을 어렵게 한다는 것이다.

2. promise

  이러한 콜백 지옥의 문제를 개선하기 위해 도입된 문법이 바로 promise 문법이라고 할 수 있다.

  프로미스는 일종의 약속이다.

  자 무엇을 약속하느냐?

  어떤 일을 잘 수행했을 때는 나 잘 수행했어 그리고 결과 값을 넘겨줄게!

  어떤 일이 잘못되었을 때는 뭔가 문제가 생겼어 그리고 그 에러를 넘겨줄게!

  라고하는 일종의 약속인 것이다.

  2 - 1) 

    resolve를 호출하면 promise 객체의 상태가 'fullfilled' 값은 resolve에 전달해준 전달 인자가 된다.

    reject를 호출하면 promise 객체의 상태가 'rejected' 값은 resolve에 전달해준 전달인자가 된다.

    둘 중 아무것도 호출하지 않으면 상태는 'pending' 값은 'undefined'이다.

  2 - 2)

    .then의 리턴 값은 프로미스 객체이다! 그래서 .then chaining이 가능하다.

  2 - 3)

    Promise.all 은 요소 전체가 프라미스 객체인 배열을 받고 새로운 프라미스를 반환한다.

배열 안 프라미스가 모두 처리되면 새로운 프라미스가 이행되는데, 배열 안 프라미스의 결괏값을 담은 배열이 새로운 프라미스의 result가 된다.

3. async/await

  promise 문법의 syntatic sugar!

  자바스크립트 비동기 처리 패턴 중 가장 세련된 문법이다.

  왜 async & await 문법이 편할까?

  기본적으로 코드가 위에서 아래로 내려오면서 한 줄 한 줄 차근차근 읽으면서 사고하는 것이 편하기 때문!

  .then의 결과 값을 담으려면 await 키워드를 앞에 붙여주기만 하면 된다.

  await 키워드를 쓰려면 async 키워드가 쓰인 함수 안에서만 쓸 수 있다!

  예외 처리는 try catch 구문으로 할 수 있다!

  주의할 점 : await 키워드는 비동기 처리를 하는 함수나 메서드가 꼭 프로미스 객체를 반환하는 것에만 써야 의도적으로 작동한다.