TypeScript 고급 비동기

TypeScript 고급 비동기 처리

TypeScript 고급 비동기 처리 — 고급

고급 비동기 처리

1. 도입 (왜 배워야 하는가)

비동기 처리는 현대 웹 개발에서 필수적인 기술입니다. 사용자가 웹 애플리케이션과 상호작용할 때, 서버와의 데이터 교환이 필요합니다. 이 과정에서 비동기 처리를 통해 사용자 경험을 개선할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 페이지가 새로 고침되지 않고 데이터를 가져올 수 있다면, 이는 더 빠르고 매끄러운 경험을 제공합니다.

비동기 처리를 모르면, 사용자는 느리고 불편한 웹 애플리케이션을 경험하게 됩니다. 서버로부터 데이터를 기다리는 동안 페이지가 멈추거나, 사용자 인터페이스가 응답하지 않는 등의 문제가 발생할 수 있습니다. 따라서 비동기 처리의 고급 개념을 이해하고 활용하는 것은 개발자로서 매우 중요합니다.

2. 핵심 개념 설명

1. 프로미스 (Promise)

프로미스는 비동기 작업의 완료 또는 실패를 나타내는 객체입니다. 마치 주문한 음식이 언제 배달될지를 알려주는 주문서와 같습니다. 음식이 배달되면 '배달 완료' 상태로 바뀌고, 만약 문제가 생기면 '배달 실패' 상태로 바뀌는 것처럼, 프로미스도 비동기 작업의 결과를 표현합니다.

용어	정의
Pending	대기 중 (아직 결과가 없음)
Fulfilled	성공적으로 완료됨
Rejected	실패로 인해 작업이 종료됨

2. async/await

async/await는 프로미스를 더 쉽게 사용할 수 있도록 도와주는 문법입니다. 마치 복잡한 요리를 간단한 레시피로 바꿔주는 것과 같습니다. async 키워드를 사용하면 비동기 함수를 만들 수 있고, await를 사용하여 프로미스가 해결될 때까지 기다릴 수 있습니다.

3. 기본 코드 예제

function fetchData(): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("데이터를 성공적으로 가져왔습니다.");
        }, 2000);
    });
}

async function getData() {
    console.log("데이터를 가져오는 중...");
    const data = await fetchData();
    console.log(data);
}

getData();

실행 결과:

데이터를 가져오는 중...
(약 2초 후)
데이터를 성공적으로 가져왔습니다.

fetchData 함수는 2초 후에 "데이터를 성공적으로 가져왔습니다."라는 문자열을 반환하는 프로미스를 생성합니다.
getData 함수에서 "데이터를 가져오는 중..."을 출력한 후, fetchData의 결과를 기다립니다.
프로미스가 완료되면 결과를 출력합니다.

4. 실전 활용 예제

1. 쇼핑몰 장바구니 구현

쇼핑몰에서 장바구니에 상품을 추가할 때, 서버에 요청을 보내고 응답을 기다리는 과정이 필요합니다.

async function addToCart(productId: number) {
    console.log("장바구니에 상품을 추가하는 중...");
    const response = await fetch(/api/cart/add/${productId});
    
    if (response.ok) {
        console.log("상품이 장바구니에 추가되었습니다.");
    } else {
        console.log("장바구니에 추가하는 데 실패했습니다.");
    }
}

addToCart(123);

2. 사용자 정보 가져오기

사용자 정보를 비동기적으로 가져와서 화면에 표시하는 경우입니다.

async function loadUserProfile(userId: number) {
    console.log("사용자 정보를 불러오는 중...");
    const response = await fetch(/api/users/${userId});
    const userData = await response.json();
    console.log("사용자 이름:", userData.name);
}

loadUserProfile(456);

5. 흔한 실수와 주의사항

1. `await`를 놓치는 경우

async function fetchData() {
    return "데이터";
}

async function getData() {
    const data = fetchData(); // await를 사용하지 않음
    console.log(data); // Promise 객체가 출력됨
}

올바른 코드:

const data = await fetchData(); // await 사용

2. 프로미스 체이닝을 잊는 경우

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