REST API

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

REST API의 구성

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

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

REST API 설계 원칙

아래는 가장 중요한 기본적인 원칙 두가지이다.

1. URI는 리소스를 표현
2. 행위에 대한 정의는 HTTP 요청 메서드

URI는 리소스를 표현해야한다.

URI는 리소스를 표현하는 데 중점을 두어야 하므로 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.

• ❌ GET /getTodos/1 : get을 사용하면 안된다.
• ❌ GET /todos/show/1 : show를 사용하면 안된다.
• ⭕ GET /todos/1

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

HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다.

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

사용법

fetch함수는 XMLHttpRequest 객체와 마찬가지로 HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API다. fetch 함수는 XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다. fetch 함수는 비교적 최근에 추가된 WEB API로서 인터넷 익스플로러를 제외한 대부분의 모던 브라우저에서 제공한다.

XHLHttpRequest는 비동기 처리를 할 때 콜백 패턴을 사용해야하므로 콜백 헬이 발생할 수 있다는 문제점이 있다. fetch 함수는 기존의 콜백 패턴을 극복한 프로미스 객체를 반환하므로 콜백 헬에서 벗어날 수 있고 에러 처리도 비교적 쉽다.

fetch 함수

fetch 함수에는 HTTP 요청을 전송할 URL과 HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달한다.

const promise = fetch(url [, options])

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

---

모던 자바스크립트 Deep Dive 참고