비동기

비동기(Asynchronous) 처리와 비동기 함수

비동기 처리는 요청을 보내고 그 응답을 기다리지 않고 바로 다음 작업을 진행하는 방식이다. 즉, 요청을 보내고 결과가 나올 때까지 기다리지 않고 다른 작업을 동시에 처리할 수 있는 장점이 있다. 이런 방식은 주로 논블로킹이라고 부르며, 여러 작업을 동시에 처리할 수 있게 해준다.

JavaScript에서 비동기 처리

자바스크립트는 기본적으로 싱글 스레드 기반이기 때문에 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 처리를 통해 여러 작업을 동시에 할 수 있도록 런타임 환경이 비동기 처리를 도와준다. 예를 들어, 자바스크립트는 setTimeout()과 같은 함수를 통해 비동기적으로 작업을 실행할 수 있다.

setTimeout(() => {
    console.log("1초 후 실행");
}, 1000);  // 1000ms (1초) 후에 실행

콜백 함수와 콜백 함수 지옥

비동기 작업을 여러 번 처리할 때 콜백 함수를 사용한다. 하지만 여러 개의 비동기 작업을 중첩할 때 콜백 함수 지옥(Callback Hell)이 발생할 수 있다. 이는 코드가 깊어지고 가독성이 떨어지며, 관리하기 어려운 코드가 될 수 있다.

프로미스(Promise)

콜백 함수 지옥을 피하기 위해 프로미스라는 개념이 등장했다. 프로미스는 비동기 작업을 처리할 때, 작업이 완료되면 처리할 방법을 지정할 수 있도록 해준다.

let promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("성공");
    } else {
        reject("실패");
    }
});

promise
    .then((message) => {
        console.log(message);  // 성공시 "성공" 출력
    })
    .catch((message) => {
        console.log(message);  // 실패시 "실패" 출력
    });

async와 await

async와 await는 프로미스를 더 쉽게 사용하기 위한 문법이다. async 함수는 항상 프로미스를 반환하며, await은 프로미스가 해결될 때까지 기다린다. 이를 사용하면 비동기 작업을 동기적으로 작성한 것처럼 다룰 수 있어 가독성이 좋아진다.

async function fetchData() {
    let result = await fetch('https://api.example.com/data');
    let data = await result.json();
    console.log(data);
}

fetchData();  // 데이터를 받아오는 비동기 작업

async와 await을 사용하면 비동기 처리가 동기적 코드처럼 실행될 수 있게 된다. await이 실행되면 프로미스가 해결될 때까지 기다리고, 그 후 다음 코드를 실행한다.