Rest API란?

hanlabong 2024. 12. 24. 09:32

728x90

REST란?

HTTP URI를 통해 자원(resource)을 명시하고
HTTP Methode를 통해
해당 자원(URI)에 대한 CRUD 연산을 적용하는 것

RESTful?

REST API

구성요소

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

설계 원칙

리소스 표현

좋은 예시

/todos/1

나쁜 예시

/getTodos/1

행위 표현(get) 포함

/todos/show/1

행위 표현(show) 포함

리소스에 대한 행위는 HTTP 요청 메서드 사용

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

실습

fetch API

브라우저에 내장된 함수
서버와 통신을 통해 CRUD 가능
프로미스 지원 내장 함수

사용방법

fetch(url [, options])

option

https://developer.mozilla.org/ko/docs/Web/API/Window/fetch

fetch() 전역 함수 - Web API | MDN

전역 fetch() 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스를 반환합니다.

developer.mozilla.org

method
- GET
- POST
- PUT
- DELETE
- PATCH
- …
mode
- no-cors : 교차 출거 불가능
- cors 교차 출처 가능
- same-origin 동일 리소스만 허용
cache
- https://developer.mozilla.org/ko/docs/Web/API/Request/cache
- default
  - HTTP 캐시에서 리소스 가져옴
  - 오래된 항목 조건부 요청
  - 일치하는 항목 없으면 캐시 업데이트
- no-store
  - 원격 서버에서 리소스 가져옴
  - 캐시 업데이트 X
- reload
  - 원격 서버에서 리소스 가져옴
  - 캐시 업데이트
- no-cache
  - HTTP 캐시에서 리소스 가져옴
  - 조건부 요청
  - 일치하는 항목 없으면 캐시 업데이트
- force-cache
  - HTTP 캐시에서 리소스 가져옴
  - 일치하는 항목 없으면 캐시 업데이트
- only-if-cachedd
  - HTTP 캐시에서 리소스 가져옴
  - 일치하는 항목 없으면 504 Gateway timeout 응답
credentials : 자격 증명 전송 대상 (쿠키, HTTP 인증 항목, TLS 클라이언트 인증서)
- inlude ⇒ 모두 자격 증명
- same-origin ⇒ 동일 출처에 자격 증명
- Omit → 자격 증명 제외
headers : 추가 요청
- https://developer.mozilla.org/ko/docs/Web/HTTP/Headers
- Authorization
  - 인증을 위한 데이터
- Content-Type
  - 리소스 미디어 타입
redirect : 리다이렉트 처리 방법
- manual
  - 호출자가 응답을 다른 컨텍스트에서 처리
- follow
  - 자동으로 리다이렉트 따라감
- error
  - 리다이렉트 발생 시 오류와 함께 요청 중단
referrer
- 요청 리퍼러를 지정하는 문자열
  - https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Referer
  - 리퍼러: 어떤 웹페이지에서 요청한지 알 수 있음
- 동일 출처
body
- 서버에 전달할 데이터
- Content-Type과 동일한 데이터 유형 사용해야 함
- GET HEAD 메서드는 사용 불가
priority
- 중요도
- high
- low
- auto

응답

Response.status

상태 코드 값
200 ⇒ 성공

https://developer.mozilla.org/ko/docs/Web/HTTP/Status

	클래스	설명
1xx	Informational	처리 중
2xx	Success	정상적으로 처리됨
3xx	Redirection	완료를 위한 추가 동작 필요
4xx	Client Error	서버에서 이해 불가능
5xx	Server Error	서버에서 처리 실패

Response.statusText
- 상태 코드 메시지 문자열
- 빈 문자열이 기본
- HTTP/2는 지원 X
Response.ok
- 상태 코드가 200 이상 299 이하인지 확인 가능
- 성공 / 실패 확인

JSON Placeholder

JSONPlaceholder - Free Fake REST API

GET

일부 리소스 취득

fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json)

{
   "userId": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
 }

전체 리소스 취득

fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(json => console.log(json))
      
[
 {
   "userId": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
 },// [object Object] 
 {
   "userId": 1,
   "id": 2,
   "title": "quis ut nam facilis et officia qui",
   "completed": false
 },// [object Object] 
 {
   "userId": 1,
   "id": 3,
   "title": "fugiat veniam minus",
   "completed": false
 },// [object Object] 
 {
   "userId": 1,
   "id": 4,
   "title": "et porro tempora",
   "completed": true
 },// [object Object] 
 {
   "userId": 1,
   "id": 5,
   "title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
   "completed": false
 },// [object Object] 
 ...
 ]

POST

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

{
  "title": "foo",
  "body": "bar",
  "userId": 1,
  "id": 101
}

PUT

fetch('https://jsonplaceholder.typicode.com/posts/101', {
  method: 'PUT',
  body: JSON.stringify({
    title: 'hello',
    body: 'hi',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

{
  "title": "hello",
  "body": "hi",
  "userId": 1,
  "id": 101
}

PATCH

fetch('https://jsonplaceholder.typicode.com/posts/101', {
  method: 'PATCH',
  body: JSON.stringify({
    title: 'bye',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

{
  "title": "bye"
}

DELETE

fetch('https://jsonplaceholder.typicode.com/posts/108', {
  method: 'DELETE',
});

728x90