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

여태까지 백엔드는 Spring(Java), 프론트엔드는 React(JavaScript/TypeScript)를 사용해서 둘 다 camelCase를 썼었다.

그래서 이런 상황을 겪을 일이 없었는데, 이번에는 백엔드에서 파이썬을 사용하고 있어 이런 문제를 겪었다.

 

파이썬에서는 snake_case를 주로 사용해서 백엔드에서 응답으로 오는 데이터의 key가 snake_case로 작성되어 있었다.

프론트엔드에서는 camelCase로 작성하고 있어서 어떻게 해야 하나 싶었는데 이를 변환해 주는 라이브러리를 찾았다.

 

🐫 camelcase-keys

• yarn, npm

yarn add camelcase-keys

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

우리 프로젝트의 경우, 모든 응답의 데이터 key를 snake_case에서 camelCase로 바꿔줄 필요가 있었기에 axios의 interceptor를 활용했다.

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

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

axiosInstance.interceptors.response.use(
  (response) => {
    response.data = camelcaseKeys(response.data, { deep: true });
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;

 

deep: true 옵션을 사용하면 객체의 모든 중첩 구조에서도 snake_case를 camelCase로 변환한다.