웹 개발 기초집LESSON 27

Fetch로 JSON 데이터 가져오기

난이도입문

예상 시간25분

선수지식이전 강의

27강. Fetch로 JSON 데이터 가져오기

이번 강의의 결과물은 로컬 JSON 파일을 HTTP로 가져와 프로젝트 제목을 화면에 표시하고 실패 상태도 안내하는 페이지입니다.

1. 이번 강의에서 해결할 문제

프로젝트 정보를 JavaScript 파일 안에 직접 작성하면 데이터를 바꿀 때 화면 코드도 함께 수정해야 합니다. fetch()로 JSON을 가져오면 데이터와 화면 로직을 분리하고, 이후 실제 백엔드 API를 연결할 준비를 할 수 있습니다.

학습 목표

프로젝트 정보를 JavaScript 파일 안에 직접 작성하면 데이터를 바꿀 때 화면 코드도 함께 수정해야 합니다. fetch()로 JSON을 가져오면 데이터와 화면 로직을 분리하고, 이후 실제 백엔드 API를 연결할 준비를 할 수 있습니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

JSON: 문자열, 숫자, 불리언, 배열, 객체 등으로 데이터를 표현하는 텍스트 형식
fetch(url): URL의 자원을 비동기로 요청하고 Promise<Response>를 반환
async: 함수 안에서 await를 사용할 수 있게 표시
await: 비동기 작업의 결과가 결정될 때까지 해당 async 함수의 다음 줄을 미룸
response.ok: HTTP 상태가 200부터 299인지 나타내는 불리언
response.json(): 응답 본문을 읽고 JSON 값으로 변환
try...catch: 요청이나 변환 과정에서 발생한 오류 처리

fetch()는 404나 500 응답만으로 Promise를 거부하지 않습니다. 따라서 네트워크 오류 처리와 별개로 response.ok를 확인해야 합니다. 현재 Fetch API의 동작은 WHATWG Fetch Living Standard에 정의되어 있습니다.

3. 코드 예시

파일 구조:

web-basics/fetch-practice/
├─ index.html
├─ data/
│  └─ projects.json
└─ js/
   └─ main.js

파일명: index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프로젝트 불러오기</title>
  </head>
  <body>
    <h1>프로젝트</h1>
    <p id="status" role="status">불러오는 중...</p>
    <ul id="project-list"></ul>
    <script type="module" src="js/main.js"></script>
  </body>
</html>

파일명: data/projects.json

[
  { "title": "반응형 포트폴리오", "category": "web" },
  { "title": "게임 상호작용 시스템", "category": "game" }
]

파일명: js/main.js

const status = document.querySelector("#status");
const projectList = document.querySelector("#project-list");

async function loadProjects() {
  try {
    const response = await fetch("./data/projects.json");

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

    const projects = await response.json();

    for (const project of projects) {
      const item = document.createElement("li");
      item.textContent = `${project.title} (${project.category})`;
      projectList.append(item);
    }

    status.textContent = `${projects.length}개를 불러왔습니다.`;
  } catch (error) {
    console.error(error);
    status.textContent = "프로젝트를 불러오지 못했습니다.";
  }
}

loadProjects();

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\fetch-practice

python -m http.server 5500

브라우저에서 http://localhost:5500을 엽니다. JSON도 URL로 요청하므로 index.html을 더블 클릭하지 않습니다.

4. 코드가 동작하는 이유

모듈 스크립트가 DOM을 조회하고 loadProjects()를 호출합니다.
fetch()가 현재 페이지를 기준으로 data/projects.json을 요청합니다.
첫 번째 await 뒤에는 본문 자체가 아니라 상태와 헤더를 포함한 Response가 들어옵니다.
response.ok가 거짓이면 직접 오류를 발생시켜 실패 처리로 이동합니다.
두 번째 await가 응답 본문을 읽고 JSON 배열로 변환합니다.
반복문이 배열의 객체마다 li를 만들고 DOM에 추가합니다.
네트워크, HTTP 상태, JSON 문법 중 하나라도 실패하면 catch가 사용자 메시지를 바꿉니다.

5. 자주 하는 실수

fetch()의 결과를 곧바로 프로젝트 배열이라고 생각함
response.json() 앞의 await를 빠뜨림
response.ok를 검사하지 않아 404 응답을 성공처럼 처리함
JSON에서 작은따옴표, 주석, 마지막 쉼표를 사용함
JavaScript 파일 위치를 기준으로 fetch URL을 계산함
실패 정보를 화면에는 보여 주지 않고 Console에만 남김
로컬 서버 없이 file://에서 요청함

6. 짧은 실습 과제

예시 구조와 파일을 만들고 정상 목록을 확인합니다.
JSON에 프로젝트 하나를 추가하고 새로 고칩니다.
상태 문구의 개수가 함께 바뀌는지 확인합니다.
fetch 경로를 일부러 틀려 실패 메시지와 Network 탭의 404를 확인합니다.
경로를 복구한 뒤 JSON 쉼표를 잘못 작성해 변환 오류를 관찰합니다.
오류를 모두 복구하고 성공 상태로 돌아옵니다.

완료 기준은 응답 상태 확인, JSON 변환, DOM 출력, 실패 안내의 네 단계가 모두 동작하는 것입니다.

7. 이해 점검 질문 3개

fetch()와 response.json() 앞에 각각 await가 필요한 이유는 무엇인가요?
fetch()가 404에서 자동으로 catch로 가지 않을 수 있는 이유는 무엇인가요?
JSON 데이터와 DOM 생성 코드를 분리하면 어떤 변경이 쉬워지나요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ