본문 바로가기

프로그래밍/js

lessons 35. REST API

2023.03.19

자바스크립트 스터디 9회차

공부 사이트: https://poiemaweb.com/

 

35. REST API

REST(Representational State Transfe)

· REST(REpresentational State Transfer): 자원을 이름으로 구분하여 자원의 상태를 주고받는 모든 것. URI로 자원을 구분하고 해당 자원에 CRUD Operation을 적용한다.

· REST API: REST 아키텍처 스타일을 준수하는 API

· CRUD Operation: Create, Read, Update, Delete

    > GET 요청으로 레코드 검색
    > POST 요청으로 레코드 작성
    > PUT 요청으로 레코드 업데이트
    > DELETE 요청으로 레코드 삭제

 

HTTP request의 URI에 DELETE와 같이 삭제 행위에 대한 표현이 나오면 REST 규칙을 만족하지 않은 것.

삭제 기능은 DELETE 메소드 통해 요청되어야 한다.

URI REST 규칙 만족 여부
GET /members/delete/1  X
DELETE /members/1 O

 

 

1) REST API 주요 규칙

①  URI는 정보의 자원을 표현해야 한다.

- 리소스명은 동사보다는 명사 사용

- get과 같은 행위에 대한 표현이 들어가선 안 됨.

 

② 자원에 대한 행위는 HTTP Method로 표현한다.

 

 

 

2) HTTP Method

Method Action 역할 페이로드
GET index / retrieve 모든/특정 리소스 조회 X
POST create 리소스 생성 O
PUT replace 리소스 전체를 교체 O
PATCH modify 리소스 일부를 수정 O
DELETE delete 모든/특정 리소스 삭제 X

 

 

 

3) REST API 구성

구성 요소 내용 표현 방법
Resource 자원 HTTP URI
Verb 자원에 대한 행위 HTTP Method
Representations 자원에 대한 행위의 내용 HTTP Message Payload

 

 

 

 

4) json-server 이용한 REST API  사용

json-server: json 파일을 사용하여 REST API Mock server 구축할 수 있는 툴

mkdir rest-api-exam && cd rest-api-exam
npm init -y
npm install json-server
// db.sjon
{
  "todos": [
    { "id": 1, "content": "HTML", "completed": false },
    { "id": 2, "content": "CSS", "completed": true },
    { "id": 3, "content": "Javascript", "completed": false }
  ]
}
// package.json 수정
{
  "name": "json-server-exam",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "json-server --watch db.json --port 5000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "json-server": "^0.17.3"
  }
}

 

npm start하면

 

① GET

- todo 리소스에서 모든 todo를 조회할 수 있다.

 

- todos 리소스에서 id를 사용하여 특정 todo를 조회할 수 있다.

 

 

② POST

- todos 리소스에서 새로운 doto를 생성할 수 있다.

poiemaweb의 설명으로는 아래와 같이 명령어를 쓰면 된다고 했지만, 나는 오류가 나더라.

curl -X POST http://localhost:5000/todos -H "Content-Type: application/json" -d '{"id": 4, "content": "Angular", "completed": true}'

 

그래서 작은따옴표로 묶는 대신 큰 따옴표로 묶었고, 안에 있는 키와 값은 \"를 사용해 주었다.

curl -X POST http://localhost:5000/todos -H "Content-Type: application/json" -d "{\"id\" : 4, \"content\" : \"addContent\", \"completed\" : true}"

 

 

③ PUT

- 특정 리소스의 전체를 갱신할 때 사용

- id=4인 todo를 특정하여 리소스를 갱신 (todos/4는 id=4인 리소스만 나옴. 전체 갱신..)

 

 

④ PATCH

- 특정 리소스의 일부를 갱신

- id=4인 completed만 갱신

 

 

⑤ DELETE

- todos 리소스에서 id를 사용하여 todo를 특정한 후 삭제

'프로그래밍 > js' 카테고리의 다른 글

ES6 lesson 1 ~ 2  (0) 2023.03.26
lessons 36. SPA & Routing  (0) 2023.03.26
lessons 34. Ajax  (0) 2023.03.22
lessons 32. 이벤트  (0) 2023.03.21
lessons 31. 동기식/비동기식 처리 모델  (0) 2023.03.03