[JavaScript] 비동기 처리 (Promise, async/await) 완벽 가이드

JavaScript는 기본적으로 단일 스레드로 동작하기 때문에 시간이 오래 걸리는 작업을 처리할 때 비동기 프로그래밍이 필요합니다. 비동기 처리를 제대로 이해하지 않으면 코드 실행 순서가 꼬이거나, 예기치 않은 오류가 발생할 수 있습니다. 이번 포스팅에서는 JavaScript의 비동기 처리 방식인 Promise와 async/await에 대해 자세히 알아보고, 예제 코드와 함께 이해하기 쉽게 설명하겠습니다.

---

1. 비동기 처리의 필요성과 개념

1) 비동기 처리가 필요한 이유

JavaScript는 기본적으로 이벤트 루프 기반으로 동작하는 단일 스레드 언어입니다. 따라서 오래 걸리는 작업(예: 네트워크 요청, 파일 읽기 등)을 동기적으로 처리하면 프로그램이 멈춘 것처럼 보일 수 있습니다.

2) 콜백 함수 방식

초기 JavaScript에서는 비동기 처리를 위해 콜백 함수를 사용했습니다.

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

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

문제점: 콜백 함수가 중첩되면 코드의 가독성이 떨어지고 유지보수가 어렵습니다. (콜백 지옥)

---

2. Promise의 사용법

1) Promise란 무엇인가?

Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. Pending, Fulfilled, Rejected 세 가지 상태를 가집니다.

2) Promise 생성하기

const myPromise = new Promise((resolve, reject) => {
    const success = true;
    if (success) {
        resolve('작업 성공');
    } else {
        reject('작업 실패');
    }
});

3) Promise 사용하기

myPromise
    .then(result => console.log(result))  // 성공 시 실행
    .catch(error => console.error(error))  // 실패 시 실행
    .finally(() => console.log('작업 종료'));

4) Promise 체이닝

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

fetchData()
    .then(data => {
        console.log(data);
        return '다음 작업 진행';
    })
    .then(message => console.log(message))
    .catch(error => console.error(error));

---

3. async/await의 사용법

1) async/await 개념

async/await는 비동기 코드를 동기식처럼 작성할 수 있도록 해주는 문법입니다. async 함수는 항상 Promise를 반환합니다.

2) async/await 사용 예제

async function fetchData() {
    try {
        const response = await new Promise((resolve) => {
            setTimeout(() => resolve('데이터 로드 완료'), 2000);
        });
        console.log(response);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

3) 에러 처리

try...catch 문을 사용하여 비동기 작업의 오류를 잡아낼 수 있습니다.

4) async/await의 장점

• 코드 가독성이 좋아짐
• 콜백 지옥을 피할 수 있음
• 에러 처리가 간편해짐

---

4. 추가 팁 및 참고 사항

• Promise.all(), Promise.race(), Promise.allSettled() 등의 메서드를 활용하여 여러 비동기 작업을 동시에 처리할 수 있습니다.
• async/await 문법을 사용할 때는 항상 try...catch로 오류를 처리하는 습관을 들이세요.

---

5. 요약 및 마무리

이번 포스팅에서는 JavaScript의 비동기 처리 방법인 Promise와 async/await에 대해 살펴보았습니다. Promise는 비동기 작업의 결과를 처리하기 위한 객체로, 콜백 함수보다 효율적으로 비동기 작업을 관리할 수 있습니다. async/await는 비동기 코드를 동기식으로 작성할 수 있게 해주며, 코드의 가독성을 크게 개선합니다. 비동기 작업을 올바르게 이해하고 활용하여 더욱 효율적인 코드를 작성해 보세요.

---

6. 관련 글 링크

• 관련 글: JavaScript에서 fetch() 함수 사용법과 오류 해결 방법