📌 REST 란?
REST(Representational State Transfer)는 HTTP 기반으로 필요한 자원에 접근하는 방식을 정해놓은 아키텍쳐
📌 REST 속성
- 서버에 있는 모든 resource는 각 resource 당 클라이언트가 바로 접근할 수 있는 고유 URI가 존재
- URI ? 특정 리소스를 식별하는 통합 자원 식별자 (Uniform Resource Identifier)로, 웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스이다.
- URL ? 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디있는지 알려주기 위한 규약이다. (URI의 서브셋)
즉, URI는 식별하고, URL은 위치를 가르킨다.
📝 http://www.charlezz.com/index.html : 웹서버의 실제 파일 위치를 나타내는 주소이므로 URI이자 URL
📝 http://www.charlezz.com/index : index라는 파일이 실제로 웹서버에 존재하지 않으므로 URL은 아니고 서버 내부에서 이를 처리하여 결국 index.html을 가리키기 때문에 URI
- 모든 요청은 클라이언트가 요청할 때마다 필요한 정보를 주기 때문에 서버에서는 세션 정보를 보관할 필요가 없다. 즉, 서비스의 자유도가 높아지고 유연한 아키텍쳐 적응이 가능하다.
- HTTP method를 사용한다. (GET, POST, PUT, DELETE)
- 서비스 내 하나의 resource가 주변에 연관된 resource들과 연결되어 표현되어야 한다.
📌 REST 구성 요소
REST는 자원(Resource), 행위(Verb), 표현(Representation of Resource) 세 가지로 구성되어 있다.
📍 자원 (Resource)
REST에서는 자원의 위치를 나타내는 URI로 접근한다. URI 설계 시 지켜야하는 규칙이 있다.
- / 의 쓰임새
/ 는 계층관계를 나타내는데 사용하므로 URI 마지막 문자로 / 를 포함하지 않는다 - URI를 이루는 resource들은 동사보단 명사로 이루어져 있어야 한다.
- URI에서는 _ 보다 - 을 권장한다.
- URI 경로에는 소문자가 적합하다.
- 파일 확장자는 URI에 포함시키지 않고, Accept header를 사용한다.
📍 행위 (Verb)
자원에 접근할 때 어떤 행위의 요청인지 HTTP 메서드가 알려준다.
GET, PUT, POST, DELETE를 사용하며, 이것으로 CRUD를 구현한다.
- GET : 해당 리소스를 조회한다. 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져온다.
- PUT : 해당 리소스를 수정한다. (특정 데이터 수정 시 patch도 사용)
- POST : 해당 URI를 요청하면 리소스를 생성한다.
- DELETE : 해당 리소스를 삭제한다.
URI가 같더라도 메소드에 따라 다른 요청을 할 수 있으며, 이를 Endpoint라고 한다.
📍 표현 (Representation of Resource)
클라이언트가 자원의 상태에 대한 조작을 요청하면, 서버는 이에 적절한 응답을 보낸다.
REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 응답으로 나타내어 질 수 있다.
JSON 혹은 XML을 통해 데이터를 주고 받는 것이 일반적이다.
XML (eXtensible Markup Language)
데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어
XML은 데이터를 텍스트 형식으로 저장하므로, 소프트웨어나 하드웨어에 독립적으로 데이터를 저장하고 전달할 수 있다.JSON (JavaScript Objext Notation)
좀 더 쉽게 데이터를 교환하고 저장하기 위해 만들어진 텍스트 기반의 데이터 교환 표준
JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위해 고안되었다.
JSON은 종료 태그를 사용하지 않으며, JSON 구문이 XML 구문보다 더 짧다. 또한 XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있다.
📌 RESTful
📍 RESTful이란?
RESTful은 일반적으로 REST라는 아키텍처를 구현하는 웹 서비스를 나타내기 위해 사용되는 용어로, REST API를 제공하는 웹 서비스를 RESTful하다고 할 수 있다.
즉, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다.
📍 RESTful 목적
- 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것
- 근본적인 목적은 성능향상이 아닌 일관적인 컨벤션을 통한 API의 이해도 및 호환성을 높이는 것이므로 성능이 중요한 상황에서는 굳이 RESTful한 API를 구현할 필요는 없다.
📍 RESTful하지 못한 경우
- CRUD 기능을 모두 POST로만 처리하는 API
- route에 resource, id 외의 정보가 들어가는 경우
📌 Fetch와 Axios
- Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스로, 모든 브라우저에 내장되어 있어 따로 설치할 필요가 없다.
- Axios는 thrid party 라이브러리로 npm이나 yarn을 통해 설치하여 프로젝트에 추가할 수 있다.
Fetch와 Axios 모두 promise 기반의 HTTP 클라이언트이다.
📍 문법
📝 Fetch
Fetch는 두 개의 인자를 받는다. 첫 번째 인자는 가져오고자 하는 리소스의 URL, 두 번째 인자는 요청의 설정 옵션을 포함하는 객체로 선택적 인자이다.
두 번째 인자로 설정 옵션을 넘기지 않을 경우 기본적으로 GET 요청을 생성한다.
fetch(url, {
method: "GET", // 다른 옵션도 가능 (POST, PUT, DELETE, etc.)
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({}),
});📝 Axios
Axios는 다양한 방법으로 요청할 수 있다.
HTTP 메서드를 붙일 수 있으며, HTTP 메서드 없이 요청할 경우 기본적으로 GET 요청을 생성한다.
axios(url, {
method: "get", // 다른 옵션도 가능 (post, put, delete, etc.)
headers: {},
data: {},
});axios.get(url, {
// 설정 옵션
});axios({
method: "get",
url: url,
headers: {},
data: {},
});📍 JSON 데이터 처리 예시
📝 Fetch
- GET 요청
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())
.then(console.log);fetch()는 .then() 메서드에서 처리된 promise를 반환한다.
이 때 우리가 필요한 JSON 데이터 포맷이 아니기 때문에 .json() 메서드를 호출함으로써 JSON 형식의 데이터로 이행된 또 다른 promise를 반환한다.
일반적인 fetch 요청은 두 개의 .then() 호출을 갖는다.
- POST 요청
const url = "https://jsonplaceholder.typicode.com/todos";
const todo = {
title: "A new todo",
completed: false,
};
fetch(url, {
method: "post",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(todo),
})
.then((response) => response.json())
.then((data) => console.log(data));Fetch API를 사용할 경우 JOSN.stringify()를 사용하여 객체를 문자열로 변환한 뒤 body에 할당해야 한다.
또한, Fetch API를 사용할 경우 명시적으로 Content-Type을 application/json으로 설정해야 한다.
📝 Axios
- GET 요청
const url = "https://jsonplaceholder.typicode.com/todos";
axios.get(url).then((response) => console.log(response.data));Axios를 사용할 경우 응답 데이터를 기본적으로 JSON 타입으로 사용할 수 있다.
응답 데이터는 언제나 응답 객체의 data 프로퍼티에서 사용할 수 있다.
- POST 요청
const url = "https://jsonplaceholder.typicode.com/todos";
const todo = {
title: "A new todo",
completed: false,
};
axios
.post(url, {
headers: {
"Content-Type": "application/json",
},
data: todo,
})
.then(console.log);Axios로 POST 요청을 할 때, 요청 본문 (request body)으로 보내고자 하는 데이터는 data 프로퍼티에 할당한다.
컨텐츠 유형 헤더도 설정할 수 있으며, 기본적으로 Axios는 Content-Type을 application/json으로 설정한다.
📍 에러 처리
📝 Fetch
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then(console.log)
.catch((err) => {
console.log(err.message);
});Fetch API는 네트워크 장애가 발생하지 않는 이상 404에러나 다른 HTTP 에러 응답을 받았다고 해서 promise를 거부하지 않는다.
따라서 .then절을 사용해 수동으로 HTTP 에러를 처리해야 한다.
📝 Axios
const url = "https://jsonplaceholder.typicode.com/todos";
axios
.get(url)
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});📍 응답 시간 초과 / 요청 취소 (timeout)
HTTP 클라이언트에서 HTTP 요청이 시간 초과될 경우 Axios는 timeout을 사용할 수 있으나, Fetch는 timeout을 사용하지 못한다.
📝 Fetch
const url = "https://jsonplaceholder.typicode.com/todos";
const controller = new AbortController();
const signal = controller.signal;
setTimeout(() => controller.abort(), 4000);
fetch(url, {
signal: signal,
})
.then((response) => response.json())
.then(console.log)
.catch((err) => {
console.error(err.message);
});📝 Axios
const url = "https://jsonplaceholder.typicode.com/todos";
axios
.get(url, {
timeout: 4000, // 기본 설정은 '0' (타임아웃 없음)
})
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});<참고 :
https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html
https://velog.io/@cil05265/XML%EA%B3%BC-JSON%EC%9D%98-%ED%8A%B9%EC%A7%95-%EA%B3%B5%ED%86%B5%EC%A0%90-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://velog.io/@eunbinn/Axios-vs-Fetch >
