<aside> 💡

Mission

1. tanstack query 설치

• provider로 감싸주세요

2. axios 설치

• axios.create에 baseURL와 headers를 추가해주세요

  baseURL: import.meta.env.VITE_APP_API_URL,
  headers: {
    Authorization: `Client-ID ${import.meta.env.VITE_APP_CLIENT_ID}`,
  },

3. server port 설정

• vite.config.ts 폴더에서 서버 포트 설정 추가해주세요

server: {
  port: 3000
}

</aside>

TanStack Query 설정

검색 Tip) velog : vite react tanstack query 설치

TanStack Query와 Axios를 설치한 후, 다음과 같이 설정할 수 있습니다:

TanStack Query 설정

TanStack Query를 설정하기 위해 다음과 같이 코드를 작성할 수 있습니다:

// src/main.jsx 또는 src/index.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
)

기존에 Router 반영한 코드로 재수정 했습니다.

// src/main.jsx 또는 src/index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// React Query 클라이언트 생성
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>;
      <RouterProvider router={router} />;
    </QueryClientProvider>;
  </React.StrictMode>;
);

이 설정에서는 React Router와 TanStack Query를 함께 사용하고 있습니다. QueryClientProvider가 RouterProvider를 감싸고 있어, 모든 라우트에서 TanStack Query의 기능을 사용할 수 있습니다.

API 폴더 구조 및 Axios 세팅

프로젝트의 API 관련 파일을 구성하기 위해 다음과 같은 폴더 구조를 사용할 수 있습니다:

src/
  api/
    index.js
    auth.js
    user.js
    ...
  .env.local

각 파일의 역할은 다음과 같습니다:

index.js

이 파일은 Axios 인스턴스를 생성하고 기본 설정을 적용합니다:

// src/api/index.js
import axios from 'axios';

const api = axios.create({
  baseURL: '<https://api.example.com>',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'X-Client-ID': import.meta.env.VITE_APP_CLIENT_ID,
  },
});

// 요청 인터셉터
api.interceptors.request.use(
  (config) => {
    // 요청 전에 수행할 작업
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 응답 인터셉터
api.interceptors.response.use(
  (response) => {
    // 응답 데이터를 가공
    return response;
  },
  (error) => {
    // 오류 응답을 처리
    return Promise.reject(error);
  }
);

export default api;

.env.local