[React] Axios 모듈화 및 구성

지금까지 2번의 프로젝트를 진행하면서 axios에서 data말고 headers 나 여러 구성요소를 담아 보낸적이 없었다. 이번 프로젝트에서는 권한을 좀 더 철저히 하기위해 front에서만 권한을 나누는 것이 아니라 요청할 때 headers에 token을 담아 back에서도 권한을 확실하게 하였다.

axios()

axios()

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

HTTP 메서드 별칭

• 편의를 위해 지원되는 모든 요청 메소드에 별칭이 제공된다.

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

실제사용 예시

• 로그인한 사용자가 동영상을 업로드 할 때 사용하는 요청이다.

// _api/Video.js
import axios from 'axios';
import { SERVER, ACCESS_TOKEN } from 'Config.js';

export function postVideoUpload(video_info) {
    return axios.post(`${SERVER}/api/video/create`, video_info, {
        headers: { token: `${ACCESS_TOKEN}` },
    });
}

순서는 url,data,config로 위의 HTTP 메서드 별칭을 응용하였다.

(+) API 모듈화 파일구조

• 큰 파일구조는 Swagger의 콘트롤러를 기준으로 각가의 .js파일을 생성하고 안에는 위의 예시와 같이 코드를 작성하여 API의 재사용성을 높였다.