[자바스크립트] 비동기

Moon·2023년 8월 8일

자바스크립트 프론트엔드

프론트엔드 - 자바스크립트 기초

목록 보기

22/26

비동기

자바스크립트에서 비동기 프로그래밍은 매우 중요한 개념이다. 코드가 순서대로 실행되지 않고, 어떤 작업이 완료되기를 기다릴 필요 없이 다른 작업을 계속 진행할 수 있게 해준다.

동기와 비동기 개념

동기(Synchronous)

동기 방식은 한 작업이 완료될 때까지 다음 작업이 기다려야 하는 방식이다.
코드가 순서대로 실행된다. 한 번에 하나의 작업 수행되며 직력적으로 실행된다. 이전 작업이 끝나지 않으면 다음 작업이 실행되지 않는다.

동기 동작 순서

코드 실행
스택에 실행할 코드 쌓임
쌓인 코드 실행
실행된 코드는 스택에서 제거

비동기(Asynchronous)

비동기 방식은 현재 작업이 완료될 때까지 다음 작업을 기다리지 않고, 다음 작업을 계속 진행하는 방식이다.
동기와 반대 의미,작업은 병렬적으로 실행된다.
Ajax, SetTimeout 있다.
예를 들어, 파일을 읽는 동안 다른 작업을 수행할 수 있다.

비동기 처리 방법 - callback

콜백 함수는 특정 작업이 완료된 후에 호출되는 함수다.
다른 함수에 파라미터로 넘겨지는 함수
작업이 끝나면 콜백 함수를 실행하여 결과를 처리한다.

setTimeout(() => {
  console.log('2초 후 출력');
}, 2000);

console.log('즉시 출력');

이 코드에서 setTimeout은 비동기 함수로, 지정된 시간이 지나면 콜백 함수를 실행하게 돼. 그러나 setTimeout이 콜백 함수를 실행하는 동안 다른 코드는 계속 실행되고, 콜백 함수의 실행은 나중에 일어나기 때문에 "즉시 출력"이 먼저 출력되고, "2초 후 출력"은 나중에 출력된다. 이렇게 콜백 함수를 이용해서 비동기 작업을 처리할 수 있기 때문에, 콜백 함수가 비동기 처리와 밀접하게 연관되어 있다.

비동기 처리 방법 - promise

프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체다. =>비동기 실행 결과를 반환하는 객체 ES6에 도입
then을 사용하여 작업이 성공적으로 완료될 때의 처리를 추가할 수 있다.

promise 사용 방법

resolve, reject

인수를 전달하는 실행 함수

resolve

비동기 작업 종료 시 resolve 호출하여 실행

reject

비동기 작업 중간 오류 발생 시 reject 호출하여 실행

promise 상태

Pedding (대기)
- 초기 상태
Fullfilled (이행)
- 성공
Rejected (거부)
- 실패

예시:

function sum(num1, num2) {
  return new Promise((resolve, reject) => {
    if (num1 === null || num2 === null) {
      reject(new Error("num1 또는 num2 은 null 이다"));
    } else resolve(num1 + num2);
  });
}

//sum(10, 20)
 //.then((result) => console.log(result)) //30
 //.catch((error) => console.error("실패:::" + error));
sum(null, 20)
  .then((result) => console.log(result))
  .catch((error) => console.error("실패:::" + error));
//실패:::Error: num1 또는 num2 은 null 이다

예시에서 sum 함수는 두 숫자를 더하고 그 결과를 Promise로 감싸서 반환하고 있다. resolve(num1 + num2) 부분은 Promise를 성공 상태로 만들고 그 값을 반환하게 된다. then 메서드를 통해서 이 Promise가 성공했을 때 실행할 콜백 함수를 지정할 수 있다. 이 예시에서 성공시 결과를 콘솔에 출력하고 있다.

sum 함수에 첫 번째 인수로 null을 전달하고 있을때는 함수 내부의 조건문에서 reject가 호출되고 catch 부분으로 이동한다. catch 부분에서는 에러 메시지를 콘솔에 출력한다.

예시:


fetch('url')
  .then(response => response.json())
  .then(data => console.log(data));

fetch 함수는 지정된 URL로 HTTP 요청을 보내고, 그 응답을 Promise로 반환한다.

첫 번째 then에서 응답 객체를 JSON 형식으로 변환한다. response.json() 메서드는 다시 Promise를 반환하기 때문에 체이닝을 계속할 수 있다.
두 번째 then에서는 변환된 JSON 데이터를 콘솔에 출력한다.

fetch 함수를 사용하면 네트워크 응답을 기다리는 동안 다른 작업을 계속할 수 있어서, 사용자 경험을 향상시킬 수 있다.

비동기 처리 방법 - promise 의then() , catch()

then()

결과값과 로직 담은 것을 콜백함수로 받음
resolve 시 실행

catch()

예외 처리하는 로직을 콜백함수로 받음
에러를 잡아줄 수 있음
reject 시 실행

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('에러 발생:', error));

비동기 처리 방법 - promise 의 Async-await

비동기 처리 위해 사용
Promise 단점 보완
Callback hell 해결
async와 await 키워드를 사용하면 비동기 코드를 마치 동기 코드처럼 읽고 쓸 수 있다.
await는 프로미스가 완료될 때까지 기다리며, 그 결과를 반환한다.
가독성이 좋다.

async: 동기

await: 기다리다

try ~ catch: 에러 발생 시 핸들링

async function calculateSum(num1, num2) {
  const promise = new Promise((resolve, reject) => {
    if (num1 === null || num2 === null) {
      reject(new Error("num1 또는 num2 은 null 이다"));
    } else {
      resolve(num1 + num2);
    }
  });
  try {
    const result = await promise; 
    console.log(result);
  } catch (error) {
    console.error("실패:::" + error);
  }
}

calculateSum(10, 20); //30

async function fetchData() { //1.비동기 처리
  try {
    const response = await fetch('url'); //2. 처리 기다림
    const data = await response.json(); //3.처리 기다림
    console.log(data);//4. 처리 후 실행 코드
  } catch (error) {
    console.log('에러 발생:', error);
  }
}