camelCase 요청 데이터를 snake_case로 변환하기

 

🐫 snake_case 응답 데이터를 camelCase로 변환하기

 

이전에 백엔드(Python)에서 프론트엔드(React)로 보내는 응답을 받았을 때, snake_case로 작성되어 있어서 프론트엔드 코드와 key가 맞지 않는 문제가 있었다. 그래서 camelcase-keys 라이브러리를 사용했다.

 

이번에는 파라미터에 값을 넣고 보내려고 하니까 400번대가 뜨는 거 아닌가..?! 확인해보니 파라미터명이 맞지 않았다.

생각해 보니 내 코드는 camelCase로 작성되어 있어서 요청할 때도 snake_case로 바꿔서 보내야 하는 것이었다..

 

당연한데 저땐 생각 못했당 ㅠ 그래서 찾아보니 snakecase-keys 라이브러리도 있었다!! (앗싸)

 

🐍 snakecase-keys

• yarn, npm

yarn add snakecase-keys

 

위 패키지를 설치해서 사용하면 된다.

이번에도 모든 요청을 camelCase에서 snake_case로 변환해야 했기에 axios interceptor를 활용해 구현했다.

 

import axios from 'axios';
import camelcaseKeys from 'camelcase-keys';
import snakecaseKeys from 'snakecase-keys';

const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true,
});

// 응답: snake_case -> camelCase
axiosInstance.interceptors.response.use(
  (response) => {
    response.data = camelcaseKeys(response.data, { deep: true });
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 요청: camelCase -> snake_case
axiosInstance.interceptors.request.use(
  (config) => {
    if (config.data) {
      config.data = snakecaseKeys(config.data, { deep: true });
    }
    if (config.params) {
      config.params = snakecaseKeys(config.params, { deep: true });
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default axiosInstance;