[javascript] REST API 정리 및 실습 (with JSON Server)

이 글은 『자바스크립트 딥 다이브』를 공부하며 정리한 내용입니다.

REST API란

REST(Representational State Transfer)는 HTTP의 장점을 최대한 활용할 수 있도록 한 소프트웨어 아키텍처 스타일이다.
REST의 기본 원칙을 충실히 지켜 설계된 서비스를 RESTful하다고 표현한다.

즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 정의한 아키텍처이며,
REST API는 이를 실제 서비스 형태로 구현한 것이다.

---

REST API의 구성 요소

REST API는 세 가지 요소로 구성된다.

• 자원(Resource) → URL(엔드포인트)
• 행위(Verb) → HTTP 요청 메서드
• 표현(Representation) → 자원에 대한 데이터 표현(JSON 등)

REST는 자체 표현 구조(Self-descriptive structure)를 가지므로,
API 요청만으로도 수행 동작을 이해할 수 있다.

---

REST API 설계 원칙

1. URL은 리소스를 표현해야 한다
   리소스 이름은 명사를 사용하고, 동사를 포함하지 않는다.

# Bad
GET /getTodos/1
GET /todos/show/1

# Good
GET /todos/1

2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다

메서드	설명	CRUD
GET	리소스 조회	Read
POST	리소스 생성	Create
PUT	리소스 전체 교체	Update
PATCH	리소스 일부 수정	Update
DELETE	리소스 삭제	Delete

CRUD란?
데이터의 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)를 뜻하며,
프론트엔드는 요청 메서드로 이를 구분하고, 백엔드는 데이터베이스 조작으로 응답한다.

---

JSON Server로 REST API 실습

이번 실습에서는 JSON Server를 이용해 가상 REST API 서버를 구축하고
HTTP 요청을 전송하여 응답을 확인한다.
(fetch() 대신 이전에 학습한 XMLHttpRequest를 사용)

// db.json
{
  "posts": [
    { "id": 1, "title": "Hello JSON Server", "body": "Sample post", "published": true },
    { "id": 2, "title": "Second Post", "body": "Another article", "published": false }
  ]
}

---

✅ GET 요청 — 리소스 조회

const xhr = new XMLHttpRequest();
xhr.open("GET", "/posts");
xhr.send();
xhr.onload = () => {
  if (xhr.status === 200) console.log(JSON.parse(xhr.response));
};

• /posts → 전체 게시글 조회
• /posts/1 → 특정 게시글 조회

---

✅ POST 요청 — 리소스 생성

const xhr = new XMLHttpRequest();
xhr.open("POST", "/posts");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(
  JSON.stringify({
    title: "POST JSON",
    body: "Sample body text.",
    published: false,
  })
);

• 요청 본문(body)에 JSON 데이터 전송
• 반드시 Content-Type: application/json 헤더 설정

---

✅ PUT 요청 — 전체 교체

xhr.open("PUT", "/posts/2");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(
  JSON.stringify({
    id: 2,
    title: "Updated Post",
    body: "Replaced all fields.",
    published: true,
  })
);

• 리소스 전체를 새 데이터로 교체

---

✅ PATCH 요청 — 일부 수정

xhr.open("PATCH", "/posts/2");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ title: "Modified title" }));

• 리소스의 일부 속성만 변경

---

✅ DELETE 요청 — 삭제

xhr.open("DELETE", "/posts/2");
xhr.send();

• 지정된 리소스를 삭제

---

마무리

REST API는 자원(URL), 행위(HTTP 메서드), 표현(JSON) 으로 구성된다.
HTTP 메서드를 통해 CRUD를 명확히 구분한다.

실무에서는 주로 fetch() API나 Axios를 사용하지만,
XMLHttpRequest는 비동기 통신의 기초 원리를 이해하는 데 유용하다.