Ch.18 API 연동 — fetch와 데이터 흐름
API란? — 프론트와 백의 대화
앱에 진짜 데이터를 어떻게 넣을까?
지금까지 만든 UI에는 하드코딩된 가짜 데이터만 있습니다. 실제 서버에서 데이터를 받아오려면 API가 필요합니다.
프론트엔드와 백엔드는 어떻게 대화할까?
API — 프론트엔드가 백엔드에 데이터를 요청하고 받아오는 약속된 규칙입니다.
핵심 내용
레스토랑의 웨이터가 바로 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에서 올바른 형식은?
핵심 용어
GET
데이터 조회 (Read) — 목록 가져오기, 상세 보기
POST
데이터 생성 (Create) — 새 글 작성, 회원가입
PUT
데이터 수정 (Update) — 프로필 편집, 글 수정
DELETE
데이터 삭제 (Delete) — 글 삭제, 계정 탈퇴
200 OK
요청 성공! 데이터를 정상적으로 받음
201 Created
새 데이터 생성 성공 (POST 응답)
404 Not Found
요청한 리소스가 존재하지 않음
500 Server Error
서버 내부 오류 (백엔드 문제)
정리 노트
API란? — 프론트와 백의 대화
핵심 개념
- API
- 프론트엔드와 백엔드가 데이터를 주고받는 약속(인터페이스)
- HTTP 메서드
- GET(조회), POST(생성), PUT(수정), DELETE(삭제)
- 상태코드
- 200(성공), 404(없음), 500(서버 에러)
- JSON
- API 통신의 표준 데이터 형식 — 키:값 쌍의 구조
API는 레스토랑의 메뉴판 — 무엇을 요청할 수 있는지 정의합니다.
시각 자료
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작