12. [클라이언트] 서버와 통신하기 (2) Axios 의 적용

1. 폴더를 리팩토링하자.

 

api 폴더에는 실제로 적용될 함수가

util 폴더에는 기본 axios 세팅이 들어갈 것이다.

 

2. axios 기본세팅

 

config  종류들은 이렇게나 많다.

https://axios-http.com/kr/docs/req_config

요청 Config | Axios Docs

기본적으로 필요한 것만 세팅한다. 

< util / axios.ts >

    import axios from "axios";

    const axiosConfig = {
      baseURL: "http://localhost:5000/api/diary/",
      timeout: 1000000,
      headers: { "Content-Type": "application/json" },
    };

    export const client = axios.create(axiosConfig);

 

3. 실제로 사용할 함수 생성

 

< api / user-diary.ts >

    import { TypeUserDiary } from "../store/user-diary-slice";
    import { client } from "../util/axios";

    export const getUserDairy = async (userEmail: string) => {
      const response = await client.get(`/${userEmail}`);
      return response.data.data;
    };

    export const insertUserDiary = async (userInput: TypeUserDiary) => {
      const response = await client.post("/insert", userInput);
      return response.data;
    };

    export const deleteUserDiary = async (id: string) => {
      const response = await client.delete(`/delete/${id}`);
      return response.data;
    };

 

간단하게 생성 가능하다.

 

4. 사용

 

어려울게 있나. 그냥 사용하면된다.

 

일반 컴포넌트 함수 내에서

  // 제출 핸들러
  const submitHandler = async (e: FormEvent) => {
    e.preventDefault();
    		...
    const inserResult = await insertUserDiary(userInputData);
    
  // 삭제 핸들러
    const deleteHandler = () => {
        if (window.confirm("정말 삭제하시겠습니까?")) {
            deleteUserDiary(String(selectedDiary!._id)); // DB 에서 삭제

혹은 Action 생성자 안에서

    
export const getRequest = (userEmail: string) => {
	return async (dispatch: Dispatch) => {
		const userDiaryData = await getUserDairy(userEmail);

 

 

5. 인터셉터의 사용

 

에러 핸들링을 만들어놓은 함수 각각마다 할 수도 있지만,

인터셉터를 이용하면 전체의 axios 에러 핸들링을 한번에 할 수 있다.

 

https://axios-http.com/kr/docs/interceptors

인터셉터 | Axios Docs

기본적으로 이런 형식을 띄게 되고

 

실제 axios 기본 세팅 파일에, 인터셉터까지 적용하게 된다면

 

import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios'

const axiosConfig: AxiosRequestConfig = {
  baseURL: "...",
  timeout: 180000,
  withCredentials: false,
  headers: {
    'Content-Type': 'application/json',
  },
}

export const client = axios.create(axiosConfig)

// 요청 을 가로채기
client.interceptors.request.use(
  config => {
    const token: string | null = localStorage.getItem('ACCESS_TOKEN')
    
    if (token !== null) {		// 토큰이 있다면
      config.headers.Authorization = `Bearer ${token}`	// 속성을 추가한채로
    }

    return config	// (가로채서)config.header.Authorization 을 생성 후 요청
  },
  error => {
    return Promise.reject(error)	// 에러가 있다면 에러핸들링
  }
)

// 응답 을 가로채기
client.interceptors.response.use(
  (response: AxiosResponse) => return response,	// 일반적이라면 그냥 reponse 를 return(기존과동일)
  // (res: AxiosResponse) => res,
  
  error => {	// 에러가 있다면 thorw new Error 를 해본다.
    if (error instanceof AxiosError) {
      throw new Error()
    }
  }
)

 

이렇게 되면 기본적인 에러핸들링이 되기 때문에,

해당 client 로 만든 요청과 응답에 대해 전부 적용된다.

 

이는 코드 가독성 뿐 아니라, 유지보수와 재사용성에도 유리하다.

 

나중에 배포할때, baseURL 만 바꿔주면 모든 서버 요청 URL 이 바뀐다!!