개발 기록 남기기✍️

[Deep Dive] 44장 - REST API 본문

Front-End/숨참고 Deep Dive🏊‍♀️

[Deep Dive] 44장 - REST API

너해동물원 2023. 2. 13. 01:43

이 카테고리는 모던 자바스크립트 Deep Dive 책을 공부하며 정리한 글을 포스팅하는 공간입니다.

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

 

 

 

44.1 REST API의 구성

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

 

REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다.

 

 

 

44.2 REST API 설계 원칙

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

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

# bad
GET /getTodos/1
GET /todos/show/1

# good
GET /todos/1

 

 

 

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

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

주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다.

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

 

리소스에 대한 행위는 HTTP 요청 메서드를 통해 표현하며 URI에 표현하지 않는다.

 

 

 

 

44.3 JSON Server를 이용한 REST API 실습

44.3.1 JSON Server 설치

JSON Server는 json 파일을 사용하여 가상 REST API 서버를 구축할 수 있는 툴이다.

npm 을 이용해서 json-server 를 로컬 설치한다.

mkdir json-server-exam && json-server-exam
npm init -y
npm install json-server --save-dev

 

44.3.2 db.json 파일 생성

프로젝트 root 폴더 아래에 db.json 파일을 생성한다. 해당 파일은 리소스를 제공하는 데이터베이스 역할을 한다.

{
    "todos": [
      {
        "id": 1,
        "content": "HTML",
        "completed": true
      },
      {
        "id": 2,
        "content": "CSS",
        "completed": false
      },
      {
        "id": 3,
        "content": "Javascript",
        "completed": true
      }
    ]
  }

 

44.3.3 JSON Server 실행

 

package.json 내 script 에 json-server 관련 스크립트를 추가한다.

// package.json
...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "json-server --watch db.json"
},
...

 

터미널에서 npm start 명령어를 입력하여 JSON Server를 실행한다.

 

npm run start

 

localhost 접속

 

localhost:3000

 

 

 

44.3.4 GET 요청

 

JSON-SERVER 에서 읽는 파일을 별도로 지정할 수 있다.
경로는 ./public/index.html 파일이다.

// index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre></pre>
    <script>
    	// XMLHttpRequest 객체 생성
        const XHR = new XMLHttpRequest()
        
        // HTTP 요청 초기화
        // todos 리소스에서 id를 사용하여 특정 todo를 취득(retrieve)
        XHR.open(`GET`, `/todos`)
        
        // HTTP 요청 전송
        XHR.send()

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

 

 

44.3.5 POST 요청

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

<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.stringify({ id: 4, content: "React", complete: true }));

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

 

 

44.3.6 PUT 요청

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

<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.stringify({ id: 4, content: "React-2", complete: true }));

  // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
  XHR.onload = () => {
    // status 프로퍼티 값이 200이면 정상적으로 응답된 상태다.
    if (XHR.status == 200) {
      document.querySelector(`pre`).teßxtContent = XHR.response;
    } else {
      console.log(`error`, XHR.status, XHR.statusText);
    }
  };
</script>

 

 

44.3.7 PATCH 요청

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

<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.stringify({ content: "React-3" }));

  // load 이벤트는 요청이 성공적으로 완료된 경우 발생한다.
  XHR.onload = () => {
    // status 프로퍼티 값이 200이면 정상적으로 응답된 상태다.
    if (XHR.status == 200) {
      document.querySelector(`pre`).teßxtContent = XHR.response;
    } else {
      console.log(`error`, XHR.status, XHR.statusText);
    }
  };
</script>

 

 

44.3.8 DELETE 요청

<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`).teßxtContent = XHR.response;
		} else {
			console.log(`error`, XHR.status, XHR.statusText);
		}
	};
</script>
저작자표시 (새창열림)

'Front-End > 숨참고 Deep Dive🏊‍♀️' 카테고리의 다른 글

[Deep Dive] 46장 - 제너레이터와 async/await  (0) 2023.02.20
[Deep Dive] 45장 - Promise  (0) 2023.02.19
[Deep Dive] 43장 - Ajax  (0) 2023.02.11
[Deep Dive] 42장 - 비동기 프로그래밍  (0) 2023.02.08
[Deep Dive] 41장 - 타이머  (0) 2023.02.06
'Front-End/숨참고 Deep Dive🏊‍♀️' Related Articles more