요청 1번의 실제 흐름
- 브라우저에서
/api/v1/todos로 요청 - 서버가 인증/검증 후 비즈니스 로직 실행
- 서버가 상태코드 + JSON으로 응답
- 프론트엔드가 응답을 해석해 화면 업데이트
상태코드 빠른 해석
200: 조회/수정 성공201: 생성 성공204: 성공했지만 본문 없음400: 잘못된 요청 형식401/403: 인증/권한 문제404: 경로 또는 리소스 없음500: 서버 내부 오류
실전 예시: 조회와 생성
터미널 (curl)
# 목록 조회
curl -X GET http://localhost:8000/api/v1/todos
# 항목 생성
curl -X POST http://localhost:8000/api/v1/todos \
-H "Content-Type: application/json" \
-d '{"title":"문서 보강"}'실전 예시: 프론트에서 호출
frontend/api.ts
export async function fetchTodos() {
const res = await fetch('/api/v1/todos');
if (!res.ok) throw new Error('요청 실패');
return res.json();
}
export async function createTodo(title: string) {
const res = await fetch('/api/v1/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title }),
});
if (!res.ok) throw new Error('생성 실패');
return res.json();
}60분 챌린지에서 쓰는 지점
초심자 실수 TOP 3
- 경로를
/api/todovs/api/todos처럼 다르게 호출 Content-Type: application/json헤더 누락- 에러 상태코드인데도 무조건
res.json()만 호출