비전공자 코딩 배우기 _16주차 REST API

Jinny·2021년 8월 28일

JavaScript 개발입문 코딩 코린이 프로그래밍

TIL

목록 보기

13/28

REST API

REST(Representational State Transfer) API(RESTful API, 레스트풀 API)란 REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻한다.

REST API의 구성

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

REST API 설계 원칙

URI는 리소스를 표현해야 한다.
- URI는 리소스를 표현하는 데 중점을 두어야 한다.
- 리소스를 식별할 수 있는 이름은 동사보다는 명사를 사용한다.
- 이름에 get 같은 행위에 대한 표현이 들어가서는 안 된다.
```
# bad
GET /getTodos/1
GET /todos/show/1

# good
GET /todos/1
```

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

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

HTTP 요청 메서드

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

# bad
GET /todos/delete/1

# good
DELETE /todos/1

💡 JSON Server 예시

GET 요청

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

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
	<script>
	// XMLHttpReauest 객체 생성
	const xhr = new XMLHttpRequest();

	// HTTP 요청 초기화
	// todos 리소스에서 모든 todo를 취득(index)
	xhr.open('GET', '/todos');

	// HTTP 요청 전송
	xhr.send();

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

todos 리소스에서 id를 사용하여 특정 todo를 취득(retrieve)한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
	<script>
		// XMLHttpRequest 객체 생성
		const xhr = new XMLHttpRequest();

		// HTTP 요청 초기화
		// todos 리소스에서 id를 사용하여 특정 todo를 취득(retrieve)
		xhr.open('GET', '/todos/1');

		// HTTP 요청 전송
		xhr.send();

		// load 이벤트는 요청이 성공적으로 완료된 경우 발생
		xhr.onload = () => {
		// status 프로퍼티 값이 200이면 정상적으로 응답된 상태.
		if(xhr.status === 200) {
		  document.querySelector('pre').textContent = xhr.response;
		  } else {
		  console.error('Error', xhr.status, xhr.statusText);
		  }
		};
	</script>
</body>
</html>

POST 요청

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

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
	<script>
		// XMLHttpRequest 객체 생성
		const xhr = new XMLHttpRequest();

		// HTTP 요청 초기화
		// todos 리소스에 새로운 todo를 생성
		xhr.open('POST', '/todos');

		// 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정
		xhr.setRequestHeader('content-type', 'application/json');

		// HTTP 요청 전송
		// 새로운 todo를 생성하기 위해 페이로드를 서버에 전송해야 한다.
		xhr.send(JSON.stringfy({ id: 4, content: 'Angular', completed: false }));

		// load 이벤트는 요청이 성공적으로 완료된 경우 발생
		xhr.onload = () => {
		// status 프로퍼티 값이 200(OK) 또는 201(Created)이면 정상적으로 응답된 상태
		if(xhr.status === 200 || xhr.status === 201) {
		  document.querySelector('pre').textContent = xhr.response;
		  } else {
		  console.error('Error', xhr.status, xhr.statusText);
		  }
		};
	</script>
</body>
</html>

PUT 요청

PUT은 특정 리소스 전체를 교체할 때 사용
todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체
PUT 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
	<script>
		// XMLHttpRequest 객체 생성
		const xhr = new XMLHttpRequest();

		// HTTP 요청 초기화
		// todos 리소스에서 id로 todo를 특정하여 id를 제외한 리소스 전체를 교체
		xhr.open('PUT', '/todos/4');

		// 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정
		xhr.setRequestHeader('content-type', 'application/json');

		// HTTP 요청 전송
		// 리소스 전체를 교체하기 위해 페이로드를 서버에 전송해야 한다.
		xhr.send(JSON.stringfy({ id: 4, content: 'React', completed: true }));

		// load 이벤트는 요청이 성공적으로 완료된 경우 발생
		xhr.onload = () => {
		// status 프로퍼티 값이 200이면 정상적으로 응답된 상태
		if(xhr.status === 200) {
		  document.querySelector('pre').textContent = xhr.response;
		  } else {
		  console.error('Error', xhr.status, xhr.statusText);
		  }
		};
	</script>
</body>
</html>

PATCH 요청

PATCH는 특정 리소스의 일부를 수정할 때 사용
todos 리소스의 id로 todo를 특정하여 completed만 수정한다.
PATCH 요청 시에는 setRequestHeader 메서드를 사용하여 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정해야 한다.

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
	<script>
		// XMLHttpRequest 객체 생성
		const xhr = new XMLHttpRequest();

		// HTTP 요청 초기화
		// todos 리소스의 id로 todo를 특정하여 completed만 수정
		xhr.open('PATCH', '/todos/4');

		// 요청 몸체에 담아 서버로 전송할 페이로드의 MIME 타입을 지정
		xhr.setRequestHeader('content-type', 'application/json');

		// HTTP 요청 전송
		// 리소스 수정하기 위해 페이로드를 서버에 전송해야 한다.
		xhr.send(JSON.stringfy({ completed: false }));

		// load 이벤트는 요청이 성공적으로 완료된 경우 발생
		xhr.onload = () => {
		// status 프로퍼티 값이 200이면 정상적으로 응답된 상태
		if(xhr.status === 200) {
		  document.querySelector('pre').textContent = xhr.response;
		  } else {
		  console.error('Error', xhr.status, xhr.statusText);
		  }
		};
	</script>
</body>
</html>

DELETE 요청

todos 리소스에서 id를 사용하여 todo를 삭제

<!DOCTYPE html>
<html>
<body>
	<pre></pre>
	<script>
		// XMLHttpRequest 객체 생성
		const xhr = new XMLHttpRequest();

		// HTTP 요청 초기화
		// todos 리소스의 id를 사용하여 todo를 삭제한다.
		xhr.open('DELETE', '/todos/4');

		// HTTP 요청 전송
		xhr.send();

		// load 이벤트는 요청이 성공적으로 완료된 경우 발생
		xhr.onload = () => {
		// status 프로퍼티 값이 200이면 정상적으로 응답된 상태
		if(xhr.status === 200) {
		  document.querySelector('pre').textContent = xhr.response;
		  } else {
		  console.error('Error', xhr.status, xhr.statusText);
		  }
		};
	</script>
</body>
</html>