init: axios, tanstack query 세팅

[heesunee]

#️⃣ Related Issue

Closes #8

☀️ New-insight

• axios instance, 공통 에러메세지 상수화, 응답 타입 정의를 진행했습니다.
• axios interceptor는 요청/응답을 보내기 직전에 가로채서, 공통 처리 로직을 삽입할 수 있도록 도와줍니다.
• 서버 API 명세서의 응답 포맷을 기반으로 status, message, data 구조를 타입화하고 에러코드(400, 404 등)에 대응하는 메세지도 상수로 분리했습니다.
• 추후 카카오 로그인 인증 처리 (토큰관련 ..)는 나중에 .... 추가로 ...진행하겠습니다!
• http 메서드 유틸 함수도 미리 작성해 두었습니다.
• .env 파일에 VITE_API_URL을 임시로 작성해 진행했습니다.

💎 PR Point

interceptor 설명

instance.interceptors.response.use(
  (response) => {
    // response.data: { status, message, data } 구조를 기준으로 data만 추출
    return response.data.data;
  },
  (error: AxiosError) => {
    if (error.response) {
      const { status, message } = error.response.data as errorResponseTypes;
      const displayMessage =
        RESPONSE_MESSAGE[status] || message || '알 수 없는 오류입니다.';
      console.log(displayMessage); 
    } else {
      console.log('서버에 연결할 수 없습니다.');
    }

    return Promise.reject(error);   }
);

• 서버에서 응답을 항상 { status, message, data }로 내려주기 때문에, response.data.data만 꺼내서 전달함
• 호출부에서는 .data만 받아서 간결하게 사용할 수 있음, 에러 상황은 status를 기준으로 정의된 RESPONSE_MESSAGE에서 메시지를 추출해 출력함
• 에러는 Promise.reject로 다시 던져서 호출부에서 catch 가능하게 만듦

공통 API 유틸함수 설명

export function get<T>(...args: Parameters<typeof instance.get>) {
  return instance.get<T>(...args).then((res) => res.data);
}

각각 get, post, put, patch, delete 요청을 래핑해서 instance에 연결한 유틸 함수들 입니다.

import { get } from '@/shared/apis/http';

export const getUserInfo = () => get<User>('/user');

이런식으로 더 간결하게 작성할 수 있습니다. 미리 정의해둔 이유는, 매번 axios.instance.get ... 등을 쓰지 않고 짧고 일관된 API 호출 패턴을 유지하고, 응답 구조를 명확히해 타입 오류방지+코드 가독성을 향상시키기 위해서입니다. 이후 요청별 공통 처리(로깅, 로딩, 에러처리 등)을 이곳에만 추가하면 됩니다.

query-client

import { QueryClient } from '@tanstack/react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 1, // 1분간은 fresh 상태로 간주
      refetchOnWindowFocus: false, // 브라우저 포커싱 시 자동 재요청 방지
    },
  },
});
export default queryClient;

대부분의 API 응답은 단시간에 변경되지는 않으므로 1분정도를 fresh하게 유지했습니다.
사용자가 다시 탭을 클릭했을때 자동으로 refetch되지 않도록 refetchOnWindowFocus 설정을 false로 작성했습니다. 탭 이동만으로 데이터를 재요청하는건 오히려 성능과 UX를 해칠 수 있습니다.

📸 Screenshot

Summary by CodeRabbit

• 신규 기능

  • React Query 및 React Query Devtools가 앱에 통합되어 데이터 관리 및 개발자 도구 기능이 추가되었습니다.
  • Axios 기반 HTTP 요청 유틸리티가 도입되어 REST API와의 통신이 표준화되었습니다.
  • 표준 HTTP 상태 코드와 한국어 에러 메시지 매핑이 추가되어 일관된 오류 메시지가 제공됩니다.
  • API 응답과 오류에 대한 타입 정의가 추가되어 안정적인 타입 검사가 가능해졌습니다.
  • React Query 클라이언트가 기본 옵션과 함께 설정되어 앱 전반에 적용됩니다.

• 스타일

  • 코드의 세미콜론 및 포맷팅이 일관되게 정리되었습니다.