[Front end] axios 배열 직열화

axios를 사용할 때 get 메서드로 배열 데이터로 요청을 하게 되면 400 에러 잘못된 요청이라고 오류나 난다. 서버 Controller에서 처리하거나 axios get 요청할 때마다 paramsSerializer 직렬화를 추가해주면된다. 하지만 get 요청할 때마다 직렬화 옵션을 넣는다는 게 여간 귀찮고 알맞은 방식의 코드는 아니다.

아래와 같이 axios를 생성할때 옵션을 지정하면 간단히 해결된다.

import qs from 'qs';

const instance = axios.create({
  headers: {
    'Content-Type': 'application/json',
  },
  // `paramsSerializer`는`params`를 직렬화(serializing) 하는 옵션 함수입니다.
  // (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: (params) => {
    // parmas 직렬화(serializing)
    return qs.stringify(params, { arrayFormat: 'brackets' });
  },
});