Ch.18 API 연동 — fetch와 데이터 흐름

fetch와 async/await

동기와 비동기의 차이를 이해한다fetch()로 API를 호출할 수 있다async/await + try/catch로 에러를 처리할 수 있다

데이터를 가져오는 데 시간이 걸린다?

API에서 데이터를 가져오려면 네트워크 요청이 필요합니다. 이 시간 동안 앱이 멈추면 안 되겠죠?

데이터가 올 때까지 기다리면서도 앱을 멈추지 않으려면?

비동기(async) — 데이터를 기다리는 동안 다른 작업을 계속 수행하는 방식입니다.

article

핵심 내용

카페에서 주문 후 자리에서 기다리기 vs 진동벨

콜백 (Callback): 함수 안에 함수... 콜백 지옥 발생

Promise: .then().catch()로 체인, 콜백보다 깔끔

async/await: 동기 코드처럼 읽히는 비동기 — 최신 표준

fetch() — 브라우저 내장 API 호출 함수

// fetch 기본 사용 (.then 체인)

fetch("https://api.example.com/users")
  .then(response => {
    // 1단계: 응답 객체를 받음
    console.log(response.status); // 200
    return response.json(); // JSON으로 파싱
  })
  .then(data => {
    // 2단계: 파싱된 데이터 사용
    console.log(data); // [{id:1, name:"김코딩"}, ...]
  })
  .catch(error => {
    // 에러 처리
    console.error("실패:", error);
  });

주의! fetch는 404 응답도 에러로 취급하지 않습니다. response.ok를 확인해야 진짜 성공인지 알 수 있습니다. .catch()는 네트워크 자체가 끊겼을 때만 실행됩니다.

.then 지옥 탈출 async/await로 깔끔하게

// 실전: POST 요청 (데이터 전송)

async function createUser(name, email) {
  try {
    const response = await fetch("/api/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name, email }),
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    const newUser = await response.json();
    console.log("생성 완료:", newUser);
  } catch (error) {
    console.error("생성 실패:", error);
  }
}

async/await 규칙 1. await는 반드시 async 함수 안에서만 사용 2. await는 Promise를 기다려서 결과를 반환 3. 에러 처리는 try/catch로 감싸기

// JSON 파싱 — API 응답은 거의 항상 JSON
const response = await fetch("https://api.example.com/data");
const data = await response.json(); // 문자열 → 객체 변환

console.log(data);        // { name: "김짓", age: 20 }
console.log(data.name);   // "김짓"
console.log(typeof data); // "object"

JSON = JavaScript Object Notation 서버와 브라우저가 데이터를 주고받는 표준 포맷입니다. 문자열이지만, `.json()`으로 파싱하면 JavaScript 객체가 됩니다.

fetch()가 반환하는 것은?

await 키워드는 일반 함수 안에서도 사용할 수 있다.

fetch 에러를 처리하는 올바른 async/await 패턴은?

key

핵심 용어

📡

fetch(url)

서버에 HTTP 요청 전송 → Promise 반환

📦

response.json()

응답 본문을 JSON으로 파싱 → Promise 반환

🛡️

.catch()

네트워크 에러, 파싱 실패 등 처리

compare_arrows

비교 정리

항목	동기 (Sync)	비동기 (Async)
비유	줄 서서 기다리기 — 내 차례가 올 때까지 아무것도 못 함	진동벨 받고 자리에 앉아 다른 일 하기 — 벨 울리면 가져옴
코드 동작	한 줄씩 순서대로 실행, 이전 줄 끝나야 다음 줄 시작	시간 걸리는 작업은 백그라운드, 끝나면 결과 받아서 처리

edit_note

정리 노트

fetch와 async/await 정리

핵심 개념

동기 vs 비동기: 동기는 순서대로, 비동기는 기다리지 않고 다음 실행
fetch: 브라우저 내장 API 호출 함수 — Promise를 반환
async/await: 비동기 코드를 동기처럼 읽기 쉽게 작성하는 문법
try/catch: async/await에서 에러를 안전하게 처리하는 패턴

★

await는 Promise가 완료될 때까지 기다립니다 — 반드시 async 함수 안에서 사용하세요.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작