[개발지식] 비동기함수란?

YouGyoung·2024년 5월 16일
0
post-thumbnail

비동기함수

비동기함수는 함수의 실행이 끝날 때까지 기다리지 않고, 다음 이벤트를 즉시 실행하는 논 블록킹 함수입니다.

언제 쓰일까?

1. 긴 시간이 걸리는 작업
비동기함수를 영상 처리와 같이 데이터 처리가 긴 시간이 걸리는 작업에 사용하면 사용자가 해당 작업이 끝날 때까지 기다리지 않고, 바로 다음 작업을 실행할 수 있습니다.

2. 여러 개의 작업을 동시에 처리해야 하는 작업
예를 들어 여러 개의 API 요청을 통해 데이터를 받아와야 하는 경우, 동기 방식은 한 개의 API 요청의 실행이 끝날 때까지 기다렸다 다음 API 요청을 실행하기 때문에 오랜 시간이 걸릴 수 있습니다. 반면에 비동기 함수를 사용하면 여러 개의 API 요청을 한 번에 보내고, 요청이 처리되는 대로 데이터를 받을 수 있기 때문에 전체 작업 시간이 단축됩니다.

3. 실시간으로 데이터를 받아와서 표시해야 하는 작업
예를 들어 주식 서비스, 채팅 서비스와 같이 실시간으로 데이터를 받아와 표시해야 할 때 동기함수를 사용한다면, 실시간으로 API를 요청하고 처리하는 과정 때문에 채팅을 보내거나 주식을 매수하는 등의 작업을 동시에 하지 못하게 됩니다. 즉, 실시간으로 데이터를 처리하고 표시할 때는 비동기함수 사용이 필수입니다.

비동기 함수를 동기 함수처럼 동작하게 하는 방법

Javascript 언어를 기준으로 async, await 키워드를 사용하는 방법이 있습니다.

async, await 키워드

async 키워드는 함수를 비동기 함수로 만드는 키워드입니다. 따라서 async 키워드만 사용한다면 동기 함수처럼 동작하게 할 수 없습니다. 함수에 포함된 비동기 작업을 동기 작업으로 변경하는 방법은 async 키워드가 사용된 함수 내에서 await 키워드를 사용하는 것입니다.

// 비동기 작업을 수행하는 함수
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 2000);
    });
}
// async 함수 내에서 await를 사용하여 비동기 작업을 동기 코드처럼 처리
async function getData() {
    console.log('Fetching data...');
    const data = await fetchData();
    console.log(data);  // 'Data received'
}

getData();
  • async 키워드는 함수를 비동기 함수로 정의하는 키워드입니다.
  • await 키워드는 await을 사용한 비동기 작업이 완료될 때까지 현재 함수 내의 다음 이벤트를 블록킹하는 키워드입니다. (*현재 함수 외부의 이벤트는 블록킹 되지 않음)
profile
프론트엔드 개발자

0개의 댓글

관련 채용 정보