JavaScript의 비동기 처리방식

자바스크립트는 쓰레드가 하나다!😶

그렇기 때문에 동시 작업이 되지 않는 언어입니다.

그러다보니 빨리 처리할 수 있는 것을 처리해놓고, 그 다음 작업을 처리하는 언어입니다.

그러나 우리가 실제로 코딩을 하게 되면 서버에서 데이터를 가져오고 난 후에야 화면을 보여주는 등 시간지연을 사용해야 할 일들이 종종 일어납니다. 

그래서 우리는 그 "작업 다음에 표시하는 작업을 해라" 라고 코딩해주는 게 비동기 처리방식 입니다.

➡️즉, 함수들이 서로 어떤 순서로 연결되어야하는지 적어주는 거에요.

➡️setTimeout() 함수로 displayB 메소드에게 2초라는 시간을 부여하니 displayC가 먼저 실행된 것을 확인할 수 있어요.

동기와 비동기처리방식을 비유하자면..🤔

커피주문을 예시로 두 방식에 대해 설명해보겠습니다.

동기 처리 방식은 앞 사람이 커피를 주문하면 다음 사람은 앞 사람이 커피를 받을 때까지 기다려야 하는 것이고,

비동기 처리 방식은 앞 사람이 커피를 주문하면 진동벨을 받고 다음 사람의 주문을 받는 것이에요! 

자바스크립트에서 비동기 처리시 사용하는 방법 3가지

콜백 함수란?

다른 함수의 매개변수로 사용하는 함수인데요.

A 함수안에 B 함수를 매개변수로 지정하여 A 함수를 모두 실행한 후에 B함수를 실행하는 것이에요.

자바스크립트는 오래전부터 Callback 함수를 사용해 비동기 처리를 구현했어요!

displayB에게 2초후에 작업이 실행되기를 요청하고,

displayB의 작업이 끝난 후에 Callback 함수를 이용해 displayC를 실행시켰습니다.

프로미스 (Promise)

• 코드 실행(처리)의 성공/실패 여부에 따라 반환 결과를 미리 약속해두는 것
• 콜백 안에 계속 콜백이 포함될 경우 콜백 지옥으로 빠지게 됨
• 프로미스는 이런 콜백 지옥을 만들지 않기 위해 EcmaScript 2015에서 도입한 방식
• 기존 콜백 방식 보다 읽기 쉽게 바뀐 방식임
• 프로미스를 직접 만들지 않고 미리 만들어진 프로미스 객체를 사용하는 방법을 아래 코드를 통해 설명함
  • 아래 코드에서 pizza라는 객체는 new Promise를 사용하여 만든 프로미스 객체임
  • Promise객체는 if(likePizza)조건의 결과에 따름
    
    • True면 resolve 함수에 있는 “피자를 주문합니다.“를 반환
    • False면 reject 함수에 있는 “피자를 주문하지 않습니다.“를 반환
  • resolve 함수가 실행되면 then 함수의 result 변수로 값이 반환됨
  • Reject 함수가 실행되면 catch 함수의 err 변수로 값이 반환됨

async / await

• 프로미스 방식은 콜백보다 읽기 쉽지만 계속 연결하여 사용하면 콜백 지옥처럼 가독성 문제가 발생할 수 있음
• 이를 위해 async와 await를 사용한 방식을 EcmaScript 2017 부터 도입함
• 선언 방법은 다음과 같음
  
  • 함수 선언시 async를 붙여 선언 후 함수 안에 await를 붙여 비동기 처리를 할 수 있음
    
    • 비동기 처리를 위해 async 선언
    • 네트워크를 통해 서버의 자료를 가져오는 fetch함수에 await를 붙여 자료를 가져올 때 까지 대기하도록 함
    • Users 변수에 들어갈 json 응답을 가져오는 부분도 시간이 걸릴 수 있으니 await를 붙여 대기하도록 함
    • 반환된 객체(users는 response된 데이터의 json을 담고 있음)를 터미널에 표시