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

API란? — 프론트와 백의 대화

API의 개념을 레스토랑 비유로 이해한다HTTP 메서드(GET, POST, PUT, DELETE)를 구분할 수 있다JSON 데이터 구조를 읽고 이해할 수 있다

앱에 진짜 데이터를 어떻게 넣을까?

지금까지 만든 UI에는 하드코딩된 가짜 데이터만 있습니다. 실제 서버에서 데이터를 받아오려면 API가 필요합니다.

프론트엔드와 백엔드는 어떻게 대화할까?

API — 프론트엔드가 백엔드에 데이터를 요청하고 받아오는 약속된 규칙입니다.


article

핵심 내용

레스토랑의 웨이터가 바로 API입니다

손님 (프론트엔드): 메뉴를 보고 주문서를 작성

웨이터 (API): 주문을 주방에 전달, 음식을 가져옴

주방 (백엔드/DB): 주문에 맞는 음식을 만듦

REST API 가장 널리 쓰이는 API 스타일입니다. URL(주소) + HTTP 메서드(동작)로 요청을 구성합니다. 예: GET /api/users → 사용자 목록 조회

4가지 동작, 3가지 결과 HTTP의 핵심 약속

// REST API URL 패턴
GET    /api/users       // 전체 사용자 목록
GET    /api/users/42    // id=42 사용자 상세
POST   /api/users       // 새 사용자 생성
PUT    /api/users/42    // id=42 사용자 수정
DELETE /api/users/42    // id=42 사용자 삭제

API가 주고받는 데이터 JSON 형식으로 통일됩니다

// JSON = JavaScript Object Notation

// 1. 객체 (Object) — { } 중괄호
{
  "name": "김코딩",
  "age": 25,
  "isStudent": true
}

// 2. 배열 (Array) — [ ] 대괄호
[
  { "id": 1, "name": "김코딩" },
  { "id": 2, "name": "이디자인" },
  { "id": 3, "name": "박데이터" }
]

// 3. 중첩 (Nested)
{
  "user": {
    "name": "김코딩",
    "address": {
      "city": "서울",
      "zip": "06000"
    },
    "skills": ["React", "Tailwind", "API"]
  }
}

JSON 규칙 키(key)는 반드시 "쌍따옴표"로 감싸야 합니다. 값(value): 문자열, 숫자, boolean, 배열, 객체, null 가능. 마지막 항목 뒤에 쉼표를 넣으면 에러! (trailing comma 금지)

// JavaScript에서 JSON 다루기

// JSON 문자열 → JavaScript 객체
const data = JSON.parse(jsonString);
console.log(data.name); // "김코딩"

// JavaScript 객체 → JSON 문자열
const json = JSON.stringify({ name: "김코딩" });
// '{"name":"김코딩"}'

새로운 데이터를 서버에 생성할 때 사용하는 HTTP 메서드는?

상태코드 404는 서버 내부 오류를 의미한다.

JSON에서 올바른 형식은?

key

핵심 용어

📖

GET

데이터 조회 (Read) — 목록 가져오기, 상세 보기

POST

데이터 생성 (Create) — 새 글 작성, 회원가입

✏️

PUT

데이터 수정 (Update) — 프로필 편집, 글 수정

🗑️

DELETE

데이터 삭제 (Delete) — 글 삭제, 계정 탈퇴

200 OK

요청 성공! 데이터를 정상적으로 받음

🆕

201 Created

새 데이터 생성 성공 (POST 응답)

404 Not Found

요청한 리소스가 존재하지 않음

💥

500 Server Error

서버 내부 오류 (백엔드 문제)

edit_note

정리 노트

API란? — 프론트와 백의 대화

핵심 개념

API
프론트엔드와 백엔드가 데이터를 주고받는 약속(인터페이스)
HTTP 메서드
GET(조회), POST(생성), PUT(수정), DELETE(삭제)
상태코드
200(성공), 404(없음), 500(서버 에러)
JSON
API 통신의 표준 데이터 형식 — 키:값 쌍의 구조

API는 레스토랑의 메뉴판 — 무엇을 요청할 수 있는지 정의합니다.

image

시각 자료

다이어그램: wd-scene-api

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

play_circle인터랙티브 레슨 시작