Week 5 · 데이터 통신과 동적 기능 Day 31 / 42

fetch 기초 — 서버에서 데이터 가져오기

더미 JSON은 이제 졸업. 진짜 서버에 요청을 보내볼 차례입니다

10초 핵심 요약

fetch(url)는 브라우저가 서버에 "이 데이터 주세요"라고 요청을 보내는 함수입니다.
응답은 바로 오지 않을 수 있어서(네트워크 지연) Promise라는 "나중에 도착할 값"의 형태로 돌아옵니다.
Day 30의 renderPosts는 그대로 두고, 더미 배열 대신 fetch 결과를 넣기만 하면 됩니다.

더미 데이터에서 진짜 데이터로

Day 29~30에서는 JSON을 직접 손으로 써서 연습했습니다. 하지만 실제 사이트에서는 그 데이터가 /functions/api/posts 같은 우리 서버(Cloudflare Pages Functions)에 저장돼 있고, 브라우저가 필요할 때마다 요청해서 받아와야 합니다. 식당에 비유하면, 지금까지는 미리 차려진 밑반찬(더미 데이터)을 봤다면, 오늘은 주방에 직접 주문을 넣고 요리가 나올 때까지 기다리는 과정입니다.

동기 vs 비동기 — 라면 끓이며 기다리지 않기

라면을 끓일 때, 냄비 앞에 서서 물이 끓기만을 하염없이 지켜보는 사람은 없습니다. 물을 올려두고 그사이 수저를 놓거나 다른 일을 하다가, 물이 끓으면 그때 돌아와 면을 넣습니다. 프로그래밍에서도 "오래 걸리는 일을 시켜두고, 결과를 기다리는 동안 다른 코드를 먼저 실행하는 방식"을 비동기(asynchronous)라고 부릅니다. 반대로 "한 줄이 완전히 끝나야만 다음 줄로 넘어가는 방식"은 동기(synchronous)입니다. 서버에 데이터를 요청하는 fetch는 응답이 몇 초 뒤에 올지, 아예 안 올지 미리 알 수 없기 때문에, 오늘 배우는 내용은 전부 비동기 방식으로 동작합니다.

fetch의 기본형

    fetch('/functions/api/posts')

      .then(res => res.json()) // ① 응답을 JSON으로 변환

      .then(data => {

        renderPosts(data); // ② Day 30에서 만든 그 함수

      })

      .catch(err => console.error(err)); // ③ 실패하면 여기로

fetch()가 반환하는 것은 데이터 자체가 아니라 Promise(약속)입니다. "지금 당장은 아니지만, 나중에 결과를 줄게"라는 뜻이라서 .then()으로 "결과가 오면 이걸 해줘"를 이어 붙입니다. 응답이 바로 데이터가 아니라 Response 객체이기 때문에, .json()으로 한 번 더 변환해야 우리가 다루던 배열/객체가 됩니다.

async/await — 같은 코드, 다른 표기

위 .then() 체인은 익숙해지면 괜찮지만, 여러 단계가 겹치면 코드가 옆으로 길게 늘어집니다. 그래서 실무에서는 아래처럼 async/await로 더 많이 씁니다. 둘은 완전히 같은 동작이고, 다음 시간에 async/await 자체를 더 깊이 다룹니다.

    async function loadPosts() {

      const res = await fetch('/functions/api/posts');

      const data = await res.json();

      renderPosts(data);

    }

위에서 아래로 그냥 순서대로 읽히죠? 그게 async/await의 장점입니다. "기다렸다가(await) 다음 줄로"를 문장 그대로 표현합니다.

오늘의 실습 + AI 프롬프트

1Day 30의 renderPosts 함수는 그대로 두고, 더미 배열을 넘기던 부분을 fetch 결과로 바꿔봅니다.

2존재하지 않는 URL로 fetch를 날려보고, .catch가 실제로 실행되는지 콘솔에서 확인합니다.

AI에게 이렇게 지시해 보세요: "async/await 문법으로 '/functions/api/posts'에서 데이터를 가져와서 renderPosts(data)를 호출하는 loadPosts 함수를 작성해줘. 실패하면 콘솔에 에러를 출력해줘."

안 될 때 확인하세요 콘솔에 Failed to fetch가 뜬다면 URL 경로 오타이거나, 로컬에서 미리보기 서버(Cloudflare Pages 개발 서버) 없이 파일을 그냥 열어봤을 가능성이 큽니다. /functions/api/*는 실제 서버 환경에서만 응답합니다.

Day 31 완료 체크리스트

fetch가 Promise를 반환한다는 것과, .then()/.json()의 역할을 설명할 수 있다.

.then 체인과 async/await가 같은 동작의 다른 표기라는 걸 이해했다.

더미 배열 대신 fetch 결과로 renderPosts를 호출해봤다.

스스로 설명해보기 — fetch()가 데이터 자체가 아니라 Promise를 반환하는 이유를 설명할 수 있나요?

오늘의 용어

동기(synchronous)

한 줄이 완전히 끝나야 다음 줄로 넘어가는 실행 방식

비동기(asynchronous)

결과를 기다리는 동안 다른 코드를 먼저 실행하는 방식

fetch()

서버에 네트워크 요청을 보내는 브라우저 내장 함수

Promise

나중에 도착할 값을 담는 상자. 성공/실패 여부를 나중에 알려줌

async/await

Promise를 위에서 아래로 읽히는 순서대로 다루는 문법