웹기초 Promise 비동기 정리

자바스크립트는 싱글 스레드로 동작한다.

만약 네트워크 통신처럼 시간이 걸리는 작업을 동기적으로 처리한다면 브라우저는 응답을 멈출 것이다.

이를 해결하기 위해 탄생한 비동기 처리 기법인 Promise와 async/await를 분석한다.

Promise: 미래 결과의 캡슐화

Promise는 비동기 작업의 상태와 결과값을 담는 객체다.

• 상태: Pending(대기), Fulfilled(이행), Rejected(거부)
• 메서드: .then()으로 성공 시 로직을, .catch()로 에러 처리를 수행한다.

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

async/await: 가독성의 혁신

ES2017에서 도입된 async/await는 비동기 코드를 동기 코드와 유사한 구조로 작성할 수 있게 하여 코드의 직관성을 높인다.

async function process() {
    try {
        const data = await fetchData(); // 이행될 때까지 대기
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

주요 이점

• 가독성: 중첩된 콜백이나 길어지는 체이닝을 제거한다.
• 에러 처리: 표준 try-catch 구문을 활용하여 예외 상황을 일관되게 관리할 수 있다.
• 디버깅: 스택 추적이 용이하여 오류 발생 지점을 파악하기 쉽다.

P.S

비동기 처리는 현대 웹 개발의 필수 역량이다.

Promise의 원리를 기반으로 async/await를 능숙하게 다루는 것은 견고한 프론트엔드 시스템 구축의 지름길인 것 같다.

웨이호프