자바스크립트(JavaScript) 비동기 처리 실전 예제

자바스크립트(JavaScript) 비동기 처리 실전 예제

자바스크립트는 비동기 처리가 중요한 언어입니다. 네트워크 요청, 파일 읽기 등 시간 소요가 긴 작업을 효율적으로 처리하기 위해 비동기 프로그래밍이 필요합니다. 이 글에서는 자바스크립트의 비동기 처리 방식과 다양한 예제를 통해 이를 이해해보겠습니다.

 

 

목차

1. 비동기 처리의 필요성
2. 콜백 함수
3. 프로미스(Promises)
4. async/await
5. 에러 처리
6. 실전 예제
7. 결론

 

1. 비동기 처리의 필요성

비동기 처리는 사용자가 인터페이스와 상호작용할 때 작업이 블로킹되지 않도록 합니다. 예를 들어, 웹페이지에서 데이터를 가져오는 동안 다른 작업을 계속할 수 있습니다.

 

 

2. 콜백 함수

콜백 함수는 비동기 작업이 완료되면 호출되는 함수입니다. 이는 자바스크립트에서 가장 기본적인 비동기 처리 방식입니다.

function fetchData(callback) {
    setTimeout(() => {
        callback('데이터를 가져왔습니다');
    }, 1000);
}

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

 

 

3. 프로미스(Promises)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 이는 콜백 지옥을 해결하기 위해 도입되었습니다.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터를 가져왔습니다');
        }, 1000);
    });
}

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

 

 

4. async/await

async/await는 프로미스를 보다 간단하고 읽기 쉽게 사용하기 위한 문법입니다. 이는 비동기 코드를 동기 코드처럼 작성할 수 있게 해줍니다.

async function fetchData() {
    return '데이터를 가져왔습니다';
}

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

main();
            

 

 

5. 에러 처리

비동기 코드에서 에러를 처리하는 방법은 다양합니다. 프로미스의 경우 catch 메서드를 사용하고, async/await의 경우 try/catch 문을 사용합니다.

// 프로미스 에러 처리
fetchData().then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

// async/await 에러 처리
async function main() {
    try {
        const message = await fetchData();
        console.log(message);
    } catch (error) {
        console.error(error);
    }
}

main();
            

 

 

 

 

6. 실전 예제

실전 예제로, API 호출을 통한 비동기 처리 방식을 살펴보겠습니다.

async function fetchUserData() {
    try {
        const response = await fetch('https://api.example.com/user');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('에러 발생:', error);
    }
}

fetchUserData();
            

 

 

7. 결론

자바스크립트의 비동기 처리는 콜백, 프로미스, async/await로 발전해왔습니다. 각 방식의 장단점을 이해하고 상황에 맞게 사용하는 것이 중요합니다. 이를 통해 더욱 효율적이고 가독성 높은 코드를 작성할 수 있습니다.