자바스크립트 비동기 처리

💙 비동기 처리(Asynchronous processing)

코드가 순차적으로 실행되지 않고, 시간이 오래 걸리는 작업이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하게 하는 방식
-> API 호출, 파일 읽기, 타이머 등

자바스크립트는 싱글 스레드로 동작하기 때문에, 하나의 작업이 오래 걸리면 전체 프로그램이 멈추는 문제가 생긴다. 이를 막기 위해 비동기 처리를 사용해 느린 작업을 나중에 처리하도록 위임하고, 그동안 다른 작업을 계속할 수 있게 한다.

콜백 함수 (Callback)

함수 실행이 끝난 후 실행될 함수를 전달

setTimeout(() => {
  console.log("3초 후 실행");
}, 3000);
console.log("먼저 실행");

프로미스 (Promise)

비동기 작업의 성공(resolve) 또는 실패(reject)를 표현하는 객체

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("데이터 도착"), 2000);
  });
};

fetchData().then(data => console.log(data));

async/await

프로미스를 동기처럼 다룰 수 있게 해주는 문법

async

자바스크립트에서 비동기 함수를 선언할 때 사용하는 키워드

• async 키워드를 붙이면 그 함수는 항상 Promise를 반환한다.
• 함수 안에서 await를 사용할 수 있게 된다.

await

자바스크립트에서 비동기 작업이 완료될 때까지 기다리는 키워드

• await는 Promise가 처리될 때까지 기다린다.
• 꼭 async 함수 안에서만 사용할 수 있다.
• await는 Promise가 해결되면 그 결과를 반환한다.

const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => resolve("데이터 도착"), 2000);
  });
};

async function getData() {
  const result = await fetchData();
  console.log(result);
}

getData();

🤍 회고

오늘은 프로젝트 진행 중 API를 사용하게 되었고, 비동기 처리를 위해 async 키워드를 사용하였다. 처음에는 Promise를 반환하지 않았다고 생각했지만, 공부를 통해 async 함수는 명시적으로 return을 사용하지 않더라도 자동으로 Promise.resolve()로 감싸 반환된다는 사실을 알게 되었다.

async function example() {
  console.log("hello");
}

// 아무 return이 없더라도 **Promise<undefined>**가 반환
const result = example();
console.log(result); // Promise { undefined }

프로젝트를 진행하고 공부할수록 자바스크립트에 대해 아직 미숙한 부분이 많다는 것을 느끼고 있다.