JavaScript 비동기 프로그래밍 기초 개념과 실습 예제

JavaScript 비동기 프로그래밍 기초 개념과 실습 예제

자바스크립트(JavaScript)에서 비동기 프로그래밍은 웹 애플리케이션의 성능을 최적화하고 사용자 경험을 향상시키는 데 필수적입니다. 이 글에서는 자바스크립트 비동기 프로그래밍의 기초 개념을 이해하고, 실습 예제를 통해 비동기 코드 작성법을 익혀보겠습니다.

 

 

목차

1. 비동기 프로그래밍이란?
2. 콜백 함수
3. 프로미스(Promise)
4. async/await
5. 실습 예제: 비동기 함수 작성하기
6. 결론

 

1. 비동기 프로그래밍이란?

비동기 프로그래밍은 작업이 완료될 때까지 기다리지 않고 다음 작업을 계속 수행하는 프로그래밍 방식입니다. 이를 통해 긴 작업이 완료될 때까지 애플리케이션이 멈추지 않고 계속 반응할 수 있게 됩니다.

 

 

2. 콜백 함수

콜백 함수는 다른 함수의 인수로 전달되어 작업이 완료된 후 호출되는 함수입니다. 예를 들어:

function fetchData(callback) {
    setTimeout(function() {
        callback('데이터 로드 완료');
    }, 1000);
}

fetchData(function(message) {
    console.log(message);
});

이 예제에서는 fetchData 함수가 1초 후에 콜백 함수를 호출합니다.

 

 

3. 프로미스(Promise)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 프로미스는 다음과 같은 세 가지 상태를 가질 수 있습니다: 대기(pending), 이행(fulfilled), 거부(rejected). 예를 들어:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터 로드 완료');
        }, 1000);
    });
}

fetchData().then(message => {
    console.log(message);
});

이 예제에서는 fetchData 함수가 프로미스를 반환하고, then 메서드를 통해 결과를 처리합니다.

 

 

4. async/await

async와 await 키워드는 프로미스를 더욱 간결하게 작성할 수 있게 해줍니다. async 함수는 항상 프로미스를 반환하며, await 키워드는 프로미스가 처리될 때까지 기다립니다. 예를 들어:

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터 로드 완료');
        }, 1000);
    });
}

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

getData();

이 예제에서는 getData 함수가 await 키워드를 사용해 fetchData 함수가 완료될 때까지 기다립니다.

 

 

 

 

5. 실습 예제: 비동기 함수 작성하기

다음은 API에서 데이터를 가져와서 처리하는 비동기 함수의 예제입니다:

async function fetchUserData(userId) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    const data = await response.json();
    console.log(data);
}

fetchUserData(1);

이 함수는 주어진 사용자 ID로 API 요청을 보내고, 응답 데이터를 출력합니다.

 

 

6. 결론

자바스크립트(JavaScript) 비동기 프로그래밍은 웹 애플리케이션의 성능을 향상시키는 중요한 기술입니다. 콜백 함수, 프로미스, 그리고 async/await를 이해하고 활용함으로써 비동기 작업을 효과적으로 처리할 수 있습니다. 다양한 예제를 통해 실습하며 비동기 프로그래밍에 익숙해져 보세요.