비동기, Promise, async await 알아보기

본 게시글은 개인 공부를 하면서 기록 목적으로 작성하였습니다.
잘못된 내용이 있다면 제보 부탁드립니다. 감사합니다.🙇‍♂️

 

 

1. 자바스크립트 실행 순서 (콜스택)

자바스크립트의 싱글 스레드 작업 수행 방식

• JavaScript 엔진은 하나의 싱글 컨텍스트(Context) 스택을 가지고 있어 한번에 하나의 일만 처리할 수 있다. (= Single Thread)
• 자바스크립트는 기본적으로 동기적으로 실행된다.
• 자바스크립트 엔진에 있는 Call Stack 은 한번에 하나의 일만 수행할 수 있으며, 실행 순서를 기억한다.
  • 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다.
  • 이전 작업을 진행 중일때는 다음 작업을 수행하지 않고 기다린다.
  • 먼저 작성된 코드를 다 실행하고 나서 뒤에 작성된 코드를 실행한다. (= 동기 방식의 처리)

 

콜스택(Call Stack)이란?

• 우리가 작성한 코드의 실행에 따라서 호출 스택을 쌓는 영역을 말한다.
• 즉, 자바스크립트 엔진이 구동되면서 실행중인 코드를 추적하는 공간이 콜스택이다.

 

동기 처리 방식의 문제점

• 동기적 처리의 단점은 하나의 작업이 너무 오래 걸리는 경우 그 작업이 종료되기 전까지 모든 작업이 올 스탑되는 문제가 있다.
• 멀티 스레드 방식으로 작동 된다면 위 문제가 해결될 수 있으나, 자바스크립트는 싱글 스레드로 동작하기 때문에 멀티 스레드
  방식의 사용은 불가하다.

 

2. 비동기 작업

비동기 작업이란?

• 자바스크립트 언어 자체는 동기적으로 작성하지만, 런타임 환경에서 제공해주는 다양한 Web APIs, Node API가 존재한다.
• API는 비동기적으로 실행하기에(= 싱글스레드가 아닌 멀티 스레드 환경에서 동작) 다양한 일들을 동시 다발적으로 처리할 수 있다.
  • 싱글스레드 방식을 이용하면서 동기적 작업의 단점을 해결하기 위해 여러 개의 작업을 동시에 실행시킬 수 있다.
  • 즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행한다.
• Web APIs
  • DOM API
  • setTimeout
  • setInterval
  • fetch
  • event listener

 

3. Promise

Promise 란?

• 자바스크립트 비동기 처리에 사용되는 객체로 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
• 연속되는 비동기 함수들을 처리할때 비동기 처리의 결과값을 사용하기 위해서 콜백이 깊어지는 현상을 콜백 지옥이라 하는데
  Promise 객체를 이용하면 콜백 지옥을 해결할 수 있다.

 

Promise 는 다음 중 하나의 상태를 가진다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태로 이행하지도, 거부하지도 않은 초기 상태를 말한다.
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태를 말한다. (성공 시 resolve, 해결)
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태를 말한다. (실패 시 reject, 거부)

 

Promise 함수들

• Promise.all : 병렬적으로 한번에 모든 Promise들을 실행
• Promise.race : 주어진 Promise 중에 제일 빨리 수행되는 것만 실행
• Promise.allSettle : 실패하든 성공하든 모든 결과를 배열로 묶어서 보내준다.

 

4. async, await

async, await 란?

• 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드로 작성할 수 있는 문법을 말한다.

 

async 코드로 알아보기

• 일반 함수 앞에 async를 붙일 경우 Promise를 반환하기 때문에 비동기 처리가 가능하다.

// async prac

function apple() {
  return "🍎";
}

async function appleAsync() {
  return "🍎 Async";
};

console.log(apple()); // 🍎
console.log(appleAsync()); // Promise {<pending>}

// then 사용하기
appleAsync().then((res) => {console.log(res)}); // 🍎 Async

 

API 통신 async, await 사용해 보기

• 먼저, HTTP 요청 전송 기능을 제공하는 fetch 함수를 통해 {JSON} Placeholder API 호출 코드를 작성해 보았다.

// {JSON} Placeholder 사용한 API 호출

function getData() {
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then((response) => response.json())
    .then((json) => console.log(json));
}

getData(); // {userId: 1, id: 1, title: "delectus aut autem", completed: false}

 

• await 키워드를 비동기 함수에 호출 앞에 붙이게 되면 동기적인 함수처럼 작동할 수 있게 된다.
• 즉, await 키워드가 붙은 함수의 호출은 뒤에 있는 함수가 끝나기 전까지 그 아래 있는 코드를 수행하지 않는다.
• (중요) await 키워드는 async 키워드가 붙은 함수 내에서만 사용할 수 있다.

// async, await 사용한 API 호출

async function getData() {
  let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  let result = await response.json();
  console.log(result);
}

getData(); // {userId: 1, id: 1, title: "delectus aut autem", completed: false}

 

 

---

참 고

기초부터 완성까지, 프런트엔드 (이재성, 한정)

한입 크기로 잘라 먹는 리액트(winterlood 이정환)

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

자바스크립트 Promise 쉽게 이해하기