비동기 함수

 

 

 

비동기 함수는 자바스크립트에만 있는 개념은 아니지만

특히 웹 개발에 쓰이는 자바스크립트에서 매우 중요한 역할을 한다

 

비동기 함수는 

지금 당장 처리하지 않고 나중에 완료될 작업을 수행한다

 

그래서 함수의 실행이 끝난 후에도 그 결과가 바로 반환되지 않고 완료되는 데 시간이 걸릴 때 사용된다

예를 들어 파일 읽기, 네트워크 요청 등

 

만약 위와 같이 시간이 걸리는 작업을 동기적으로 처리한다면

작업이 완료될 때까지 프로그램은 멈추게 된다

이는 사용자 경험을 저하시키고, 특히 웹 애플리케이션에서 페이지가 멈춘 것처럼 보일 수 있다

 

비동기 함수를 사용하면 이런 지연이 발생하는 작업을 백그라운드에서 처리하고

작업이 완료되면 결과를 처리할 수 있게 된다

 

이를 통해 애플리케이션이 멈추지 않고 다른 작업을 계속 수행할 수 있다

 

 

비동기 함수의 예시로는,

 

1. 네트워크 요청 - FetchAPI 사용

fetch('https://api.example.com/data')
  .then(response => response.json()) // 응답을 JSON으로 변환
  .then(data => console.log(data)) // 데이터 처리
  .catch(error => console.error('Error:', error)); // 에러 처리

 

2. setTimeout - 타이머 기반 비동기 작업

console.log('시작');

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

console.log('끝');

시작과 끝은 즉시 출력되지만 3초 후 실행은 3초 후에 출력

 

3. async await - 비동기 함수를 동기적으로 보이게 함

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

 

 

비동기 함수는 사용자 경험을 향상하고 자원의 효율적 사용을 위해 중요하다

비동기 함수를 사용하면 시간이 걸리는 작업을 수행하는 동안 사용자는 다른 작업을 계속할 수 있다

그리고 비동기 처리를 위해 CPU 사이클이 낭비되지 않고, 네트워크 응답을 기다리는 동안 다른 작업을 수행할 수 있다

이는 애플리케이션의 전반적인 성능을 향상한다