비동기 프로그래밍 (async/await)

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

비동기 프로그래밍은 웹 애플리케이션에서 사용자 경험을 향상시키기 위해 매우 중요한 기술입니다. 특히, 서버와 데이터를 주고받거나 외부 API와 통신할 때 비동기 처리를 통해 애플리케이션의 응답성을 높일 수 있습니다.

만약 비동기 프로그래밍을 모른다면, 네트워크 요청이 완료될 때까지 전체 애플리케이션이 멈춰버리는 경험을 하게 됩니다. 이는 사용자에게 불편함을 주고, 나쁜 사용자 경험으로 이어질 수 있습니다. 예를 들어, 쇼핑몰에서 상품을 검색하는 동안 페이지가 멈춘다면, 사용자는 즉시 다른 사이트로 이동해버릴 것입니다.

2. 핵심 개념 설명

비동기 프로그래밍

비동기 프로그래밍은 특정 작업이 완료될 때까지 기다리지 않고 다음 작업을 진행할 수 있는 프로그래밍 방식입니다. 이는 마치 요리를 하는 동안, 한 가지 요리가 끓는 동안 다른 요리를 준비하는 것과 비슷합니다.

async/await

• async: 함수가 비동기적으로 실행된다는 것을 나타냅니다. 이 키워드를 사용하면 해당 함수는 항상 프로미스를 반환합니다.
• await: 프로미스가 해결될 때까지 기다리게 합니다. 이는 마치 요리사가 물이 끓기를 기다리는 것과 같습니다.

용어	설명
async	비동기 함수를 정의하는 키워드
await	프로미스가 해결될 때까지 대기하는 키워드

3. 기본 코드 예제

다음은 async/await를 사용하는 가장 기본적인 예제입니다.

// 비동기 함수 정의
async function fetchData() {
    // 데이터 요청을 비동기로 수행
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    // 응답을 JSON 형태로 변환
    const data = await response.json();
    return data;
}

// 비동기 함수 호출 및 결과 출력
fetchData().then(data => console.log(data));

실행 결과:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit..."
}

• 코드 설명:

1. async function fetchData()로 비동기 함수를 정의합니다. 2. fetch() 메소드를 사용해 데이터를 요청합니다. 이때 await 키워드로 요청이 완료될 때까지 대기합니다. 3. 응답을 JSON 형태로 변환하기 위해 다시 await를 사용합니다. 4. 최종적으로 응답 데이터를 반환합니다. 5. fetchData()를 호출하고, 결과를 출력합니다.

4. 실전 활용 예제

1. 쇼핑몰에서 장바구니 구현

async function addToCart(productId) {
    const response = await fetch(/api/cart/add/${productId});
    const result = await response.json();
    console.log(result.message);
}

addToCart(123);

이 함수는 특정 상품을 장바구니에 추가하는 비동기 요청을 수행합니다.

2. 사용자 정보 가져오기

async function getUserInfo(userId) {
    const response = await fetch(/api/users/${userId});
    const userInfo = await response.json();
    return userInfo;
}

getUserInfo(1).then(user => console.log(user));

이 예제는 특정 사용자의 정보를 비동기로 가져오는 기능을 구현합니다.

5. 흔한 실수와 주의사항

실수 1: await를 사용하지 않음

잘못된 코드:

async function fetchData() {
    const response = fetch('https://jsonplaceholder.typicode.com/posts/1'); // await 누락
    const data = await response.json(); // 오류 발생
}

올바른 코드:

async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); // await 추가
    const data = await response.json();
}

실수 2: async가 아닌 함수에서 await 사용

잘못된 코드:

function getData() {
    const data = await fetchData(); // async가 아닌 함수에서 await 사용
}

올바른 코드:

async function getData() {
    const data = await fetchData(); // async로 정의
}

6. 정리

• async/await를 사용하면 비동기 코드를 더 쉽게 읽고 작성할 수 있습니다.
• async 키워드는 비동기 함수를 정의하고, await는 프로미스가 해결될 때까지 대기합니다.
• 비동기 프로그래밍은 웹 애플리케이션의 성능과 사용자 경험을 향상시킵니다.

다음에 학습하면 좋은 주제는 Promise와 에러 핸들링입니다. 비동기 프로그래밍의 오류를 처리하는 방법을 배우면 더욱 견고한 코드를 작성할 수 있습니다.