Rest API란?

REST란?

REpresentaional State Transfer

효율적이고 안정적이며 확장가능한 분산 시스템을 가져올 수 있는 소프트웨어 아키텍쳐 디자인 제약의 모음

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

RESTful?

REST의 기본 원칙을 성실히 지킨 서비스 디자인

REST API

REST를 기반으로 서비스 API를 구현한 것

구성요소

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

설계 원칙

리소스 표현

URI는 리소스를 표현하는 데 집중해야 함

동사보다는 명사를 사용

 

좋은 예시

/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

URI가 아닌 메서드를 통해 행위를 표현해야 함

실습

fetch API

HTTP request 전송 기능을 제공하는 클라이언트 사이드 Web API

client -> server => requetst
server -> client => response

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

사용방법

fetch(url [, options])

option

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

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

• 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

실제 데이터 업데이트는 없지만 api 테스트는 가능

GET

1. 일부 리소스 취득

   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
    }

2. 전체 리소스 취득

   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',
});