RESTful API를 알아보기 - axios

수민🐣·2022년 3월 21일

💭 REST API

REST(Representational State Transfer)는 HTTP 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습을 보며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 로이필딩에 의해 발표됨.

✔ REST 구성

자원(Resource) - URI
모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재
자원을 구별하는 ID는 '/groups/:group_id'와 같은 HTTP URI임
Client는 URI를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청
행위(Verb) - HTTP METHOD
HTTP 프로토콜의 METHOD(GET, POST, PUT, DELETE)를 사용

❕ HTTP METHOD
POST : 특정 URI를 요청하면 리소스를 생성한다 (Create)
GET : 특정 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져온다 (Read)
PUT : 특정 리소스를 수정한다 (Update)
DELETE : 특정 리소스를 삭제한다 (Delete)
표현(Representations)
Client가 자원의 상태(정보)에 대한 조작을 요청하면 Server는 이에 적잘한 응답(Representation)을 보냄
REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타내어 질 수 있고 보통 JSON 혹은 XML를 통해 데이터를 주고받는 것이 일반적

➡ HTTP URI를 통해 자원(Resource)을 명시하고, HTTP Method를 통해 해당 자원에 대한 CRUD Operation을 적용한다. 즉, REST는 중심에 자원(Resource)이 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.

✔ REST의 특징

1) Uniform (유니폼 인터페이스)
HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하며, 특정 언어나 기술에 종속되지 않는다.
즉, Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일이다.

2) Stateless (무상태성)
REST는 무상태성 성격을 갖는다. 이 말은 작업을 위한 상태정보를 따로 저장하고 관리하지 않는다는 말이다. 세션 정보나 쿠키정보를 별도로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청만을 단순히 처리하면 됩니다. 때문에 서비스의 자유도가 높아지고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순해진다.

3) Cacheable (캐시 가능)
REST의 가장 큰 특징 중 하나는 HTTP라는 기존 웹표준을 그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능하다. 따라서 HTTP가 가진 캐싱 기능이 적용 가능하다. HTTP 프로토콜 표준에서 사용하는 Last-Modified태그, E-Tag를 이용하면 캐싱 구현이 가능하다.

4) Self-descriptiveness (자체 표현 구조)
REST의 또 다른 큰 특징 중 하나는 REST API 메시지만 보고도 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어 있다.

5) Client - Server 구조
REST 서버는 API 제공, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리하는 구조로 각각의 역할이 확실히 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어들게 된다.

6) 계층형 구조
REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용할 수 있게 한다.

✔ API란

API는 Application Programming Interface의 줄임말로, 소프트웨어 프로그램(애플리케이션)내부에 존재하는 기능 및 규칙의 집합을 칭한다.
쉽게 말하면 API는 서버와 클라이언트 사이의 연결고리이다. API를 통해 클라이언트의 요청사항을 서버에 전달이 가능하고, 서버로부터 결과값을 클라이언트에게 받아올 수 있기 때문이다.

✔ API 역할

1) API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
API는 데이터베이스의 보안 유지를 위해 서버와 데이터베이스에 대한 출입구 역할을 하며, 허용된 사람들에게만 접근을 부여한다. 이를통해서 데이터베이스의 보안을 지킨다.

2) API는 애플리케이션과 기기가 원활하게 통신할 수 있도록 한다.
client-server간의 연결고리 역할

3) API는 서버와 데이터베이스에 대한 출입구 역할을 한다.
API는 모든 접속을 표준화하기 때문에 기계/운영체제 등과 상관없이 누구나 동일한 액세스를 얻을 수 있다.

💭 RESTful

RESTful는 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적을 발표한 것은 아니다.
즉, REST 원리를 따르는 시스템을 RESTful이란 용어로 부르는 것 뿐!

✔ RESTful의 목적

이해하고 사용하기 쉬운 REST API를 만드는 것!
일관적인 컨벤션을 통한 API의 이해도 및 호환성을 높이는 것이기에, 성능이 중요한 상황에서는 굳이 RESTful API를 구현할 필요는 없다

✔ RESTful의 조건

API가 RESTful로 간주되려면 다음 기준을 따라야 하는데, 위에 있는 REST의 특징을 그대로 적었다..!

클라이언트, 서버 및 리소스로 구성되었으며 요청이 HTTP를 통해 관리되는 클라이언트-서버 아키텍쳐여야한다.
클라이언트-서버 요청 간에 클라이언트 정보가 저장되지 않으며, 각 요청이 분리되어 있고 서로 연결되어 있지 않아야 한다.
클라이언트-서버 상호 작용을 간소화하는 캐시 가능 데이터가 있어야 한다.
정보가 표준 형식으로 전송되도록 하기 위한 구성 요소 간 통합된 인터페이스여야 한다.
요청된 정보를 검색하는 데 관련된 서버의 각 유형을 클라이언트가 볼 수 없는 계층 구조로 체계화하는 계층화된 시스템을 갖춰야 한다.

💭 Axios

자바스크립트에서 비동기 HTTP 통신을 하는 방법은 크게 AJAX, Axios, Fetch 이렇게 3가지가 있다.
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리로, 크로스 브라우징에 최적화되어 있어 IE11까지 지원한다.

💡 Axios 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용이 가능
Promise(ES6) API를 사용
요청과 응답 데이터의 변형
HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경 됨

💡 Axios 설치하기

<scirpt src="[http://unpkg.com/axios/dist/acios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></sciprt)을 삽입하거나

npm을 사용중이라면 터미널에 yarn add axios를 사용하면 설치 가능함

💡 Axios 사용법

axios({
  url: 'https://test/api/cafe/list/today', // 통신할 웹문서
  method: 'get', // 통신할 방식
  data: { // 인자로 보낼 데이터
    foo: 'diary'
  }
});

method : 요청방식. (get이 디폴트)
url : 서버 주소
headers : 요청 헤더
data : 요청 방식이 'PUT', 'POST', 'PATCH' 해당하는 경우 body에 보내는 데이터
params : URL 파라미터 ( ?key=value 로 요청하는 url get방식을 객체로 표현한 것)

📚 axios 응답(response) 데이터

axios요청 서버에게 보내면, 서버로부터 데이터를 응답 받게 된다.

{
  data: {}, // 서버가 제공한 응답(데이터)

  status: 200, // `status`는 서버 응답의 HTTP 상태 코드
  
  statusText: 'OK',  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지

  headers: {},  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공

  config: {}, // `config`는 요청에 대해 `axios`에 설정된 구성(config)

  request: {}
  // `request`는 응답을 생성한 요청
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
}

axios.get('/user/12345').then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

📚 axios 단축 메소드

GET : axios.get(url[, config])
POST : axios.post(url, data[, config])
PUT : axios.put(url, data[, config])
DELETE : axios.delete(url[, config])

① axios.GET

단순 데이터(페이지 요청, 지정된 요청) 요청을 수행할 경우
파라미터 데이터를 포함시키는 경우 (사용자 번호에 따른 조회)

const axios = require('axios'); // node.js쓸때 모듈 불러오기

// user에게 할당된 id 값과 함께 요청을 합니다.
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공했을 때
    console.log(response);
  })
  .catch(function (error) {
    // 에러가 났을 때
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 함수
  });
 
// 위와는 같지만, 옵션을 주고자 할 때는 이렇게 요청을 합니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });  
 
// async/await 를 쓰고 싶다면 async 함수/메소드를 만듭니다. 
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

② axios.POST
post 메서드에는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.
위에서 봤던 get 메서드에서 params를 사용한 경우와 비슷하게 수행된다.

axios.post("url", {
		firstName: 'Fred',
		lastName: 'Flintstone'
    })
    .then(function (response) {
        // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

③ axios.PUT
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신(수정)하는 목적으로 사용된다.
PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.
put 메서드는 서버 내부적으로 get -> post 과정을 거치기 때문에 post 메서드와 비슷한 형태이다.

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

④ axios.DELETE
delete 메서드에는 일반적으로 body가 비어있다.
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

axios.delete('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })