발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍처로서 REST를 소개했다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라고 표현한다.

REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다.

즉 REST란

  1. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
  2. HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해
  3. 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다.

44.1 REST API의 구성

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

구성요소 내용 표현 방법
자원 자원 URI
행위 자원에 대한 행위 HTTP 요청 메서드
표현 자원에 대한 행위의 구체적 내용 페이로드

44.2 REST API 설계 원칙

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

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

    URI는 리소스를 표현하는 데 중점을 두어야 한다. 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다. 따라서 이름에 get 같은 행위에 대한 표현이 들어가서는 안 된다.

    #bad
GET/getTOdos/1
GET/ todos/show/1

#good
GET/todos/1

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

    HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법이다. 주로 5가지 요청 메서드(GET,POST,PUT,PATCH,DELETE 등)를 사용하여 CRUD를 구현한다.

    리소스에 대한 행위는 HTTP 요쳥 메서드를 통해 표현하며 URI에 표현하지 않는다. 예를 들어, 리소스를 취득하는 경우에는 GET, 리소스를 삭제하는 경우에는 DELETE를 사용하여 리소스에 대한 행위를 명확히 표현한다.

    #bad
GET/todos/delete/1

#good
DELETE/todos/1

44.3 JSON server를 이용한 실습

44.3.4 GET 요청

todos리소스에서 모든 todo를 취득한다.

const xhr= new XMLHttpRequest(); //객체 생성

//HTTP 요청 초기화
//todos 리소스에서 모든 todo를 취득

xhr.open('GET',"/todos");
xhr.send();

xhr.onload = () => {
	if(xhr.status === 200 ) {
		document.querySelector('pre').textContent = xhr.response;
	}
	else {
		console.log('Error',xhr.status,xhr.statusText);
	}
}

44.3.5 POST 요청

todos 리소스에 새로운 todo를 생성한다. POST 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

const xhr = new XMLHttpRequest();

xhr.open("post" ,"todos");

xhr.setRequestHeader("content-type","application/json");

xhr.send(JSON.stringify({id:4, content: "Angular",completed:false}));

//load 이벤트는 요청이 성공적으로 완료된경우 발생한다.
xhr.onload = () => { 
	if(xhr.status === 200 || xhr.status === 201){
		document.querySelector('pre').textContent = xhr.response;
	}
	else {
		console.log("Error", xhr.status, xhr.statusText);
	}
}

44.3.6 PUT 요청

PUT은 특정 리소스 전체를 교체할 때 사용한다.

const xhr = new XMLHttpRequest();

xhr.open("PUT","/todos/4");

xhr.setRequestHeader("content-type","application/json");

xhr.send(JSON.stringify({id:4, content: "React",completed:true}));

//load 이벤트는 요청이 성공적으로 완료된경우 발생한다.
xhr.onload = () => { 
	if(xhr.status === 200 || xhr.status === 201){
		document.querySelector('pre').textContent = xhr.response;
	}
	else {
		console.log("Error", xhr.status, xhr.statusText);
	}
}

44.3.7 PATCH 요청

todos 리소스에 새로운 todo를 생성한다. POST 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

const xhr = new XMLHttpRequest();

xhr.open("PATCH" ,"/todos/4");

xhr.setRequestHeader("content-type","application/json");

xhr.send(JSON.stringify({completed:false}));

//load 이벤트는 요청이 성공적으로 완료된경우 발생한다.
xhr.onload = () => { 
	if(xhr.status === 200){
		document.querySelector('pre').textContent = xhr.response;
	}
	else {
		console.log("Error", xhr.status, xhr.statusText);
	}
}

44.3.8 DELETE 요청

todos 리소스에 새로운 todo를 생성한다. POST 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

const xhr = new XMLHttpRequest();

xhr.open("DELETE" ,"/todos/4");

xhr.send(JSON.stringify();

//load 이벤트는 요청이 성공적으로 완료된경우 발생한다.
xhr.onload = () => { 
	if(xhr.status === 200 || xhr.status === 201){
		document.querySelector('pre').textContent = xhr.response;
	}
	else {
		console.log("Error", xhr.status, xhr.statusText);
	}
}