REST와 REST API

REST (Representational State Transfer)

HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처

REST API

REST를 기반으로 서비스 API를 구현한 것

※ REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라고 표현한다.

---

1. REST API의 구성

REST API는 자원(resource), 행위(verb), 표현(representations)의 3가지 요소로 구성된다.
REST는 자체 표현 구조(self-de-scriptiveness)로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.

구성 요소	내용	표현 방법
자원 (resource)	자원	URI(엔드포인드)
행위 (verb)	자원에 대한 행위	HTTP 요청 메서드
표현 (representations)	자원에 대한 행위의 구체적 내용	*페이로드

※ 페이로드(payload) : 클라이언트와 서버 간 데이터 전송 시 요청 또는 응답 본문에 포함된 데이터

1. 자원 (resource)

• API가 관리하는 모든 데이터나 기능
• 자원은 URI(Uniform Resource Locator)을 통해 식별된다.
  • ex.
  • /users → 모든 사용자 정보
  • /users/1 → 특정 사용자 정보

2. HTTP 메서드

• REST API는 자원에 대해 수행할 작업을 HTTP 메서드로 표현한다.

HTTP 요청 메서드	종류	목적	페이로드
GET	index/retrieve	모든/특정 리소스 취득	X
POST	create	리소스 생성	O
PUT	replace	리소스의 전체 교체	O
PATCH	modify	리소스의 일부 수정	O
DELETE	delete	모든/특정 리소스 삭제	X

3. HTTP 상태 코드

• 서버는 클라이언트 요청에 대한 결과를 HTTP 상태 코드로 전달한다.

HTTP 상태 코드	상태 메세지	설명
200	OK	요청 성공
201	Created	자원 생성 성공
400	Bad Request	잘못된 요청
404	Not Found	자원을 찾을 수 없음
500	Internal Server Error	서버 오류

4. 표현

• 클라이언트는 서버로부터 JSON, XML 등 다양한 포맷으로 자원의 상태를 받는다.
• 일반적으로 JSON이 많이 사용된다.

---

2. REST API 설계 원칙

REST에서 가장 중요한 기본적인 원칙은 두 가지다.
URI는 리소스를 표현하는데 집중하고 행위에 대한 정의는 HTTP 요청 메서드를 통해 하는 것이 RESTful API를 설계하는 중심 규칙이다.

1) 자원의 명확한 식별

• 자원은 URI를 통해 명확히 식별해야 한다.
• 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.

// BAD
GET /getUsers/1
GET /users/show/1

// GOOD
GET /users/1

2) HTTP 요청 메서드로 리소스에 대한 행위를 정의

HTTP 요청 메서드

클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법

• 주로 5가지 요청 메서드(GET, POST, PUT, PATCH, DELETE 등)를 사용하여 CRUD를 구현한다.
• 리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않는다.

// BAD
GET /todos/delete/1

// GOOD
DELETE /todos/1

---

3. JavaScript에서 REST API 활용

JavaScript는 REST API와 상호작용할 수 있는 다양한 방법을 제공한다.
주로 사용되는 두 가지 방법은 Fetch API와 Axios 라이브러리다.

1) Fetch API

HTTP request 전송 기능을 제공하는 클라이언트 사이드 Web API

// GET 요청 예제 (default method가 GET)
fetch("https://api.example.com/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Failed to load data.");
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("[ERROR] ", error));

2) Axios

브라우저, node.js를 위한 프로미스 기반 HTTP 비동기 통신 라이브러리

Axios는 Fetch API보다 간결한 문법과 추가 기능을 제공한다.

import axios from "axios";

// POST 요청 예제
axios.post("https://api.example.com/users", { name: "Sean", age: 25 })
  .then((response) => console.log(response.data))
  .catch((error) => console.error("에러 발생:", error));

---

마무리

REST API는 웹 애플리케이션 개발에서 백엔드와 프론트엔드 간 데이터를 주고받는 표준화된 방법을 제공한다. 명확한 구성과 설계 원칙을 준수하면 유지 보수성이 높은 API를 설계할 수 있다.