[TIL] 전역 axios 설정

첫 협업 미니프로젝트

• 첫 주특기로 프로젝트 협업을 진행했었는데, 생각보다 에러가 꽤 많았고, 해결하는데 시간이 오래 걸렸다.
  개인 프로젝트를 할 때와 확연히 다름이 느껴 졌고 새벽까지 잠도 안자고 재밌게 코딩을 했다.

  전역 axios 설정

• axios는 브라우저가 처음 실행될때 같이 실행 된다. 이때 token을 담은 header를 넣게 되면,
  이후 로그인을 하고 난 후 토큰을 새로 발급받고 난 후에도 브라우저에는 쿠키가 잘 들어가있지만 undefined가 출력이 된다. 새로고침을 해야지만 제대로된 토큰 값이 들어오는 상황이 발생했다.

• 방법은 두가지 였는데 아래의 코드 처럼 선언하고 interceptors로 try catch 가 실행 되기전 가로 채는 것이다.

  export const apis = axios.create({
  baseURL: process.env.REACT_APP_API,
  headers: {
    Authorization: `Bearer ${cookies.get("token")}`,
  },
  });
  apis.interceptors.request.use(config => {
  if (config.headers.Authorization === "Bearer undefined") {
    const token = cookies.get("token");
    config.headers.Authorization = token;
  }
  return config;
  });
  

• 두번 째는 post, put, patch 를 보낼때 마다 thunk함수에 headers 를 넣어 주는 것이다.

  export const __deletePost = createAsyncThunk(
  "DELETE_POST",
  async (payload, thunkAPI) => {
    if (window.confirm("게시글을 삭제하시겠습니까?")) {
      try {
        const [token, tokenPayload] = getToken();
        const response = await apis.delete(`/api/posts/${payload.postId}`, {
          headers: { authorization: `Bearer ${token}` }
        });
        const postList = payload.posts.filter((item) => item.postId !== Number(payload.postId));
        return thunkAPI.fulfillWithValue({ data: response.data, posts: postList });
      } catch (error) {
        return thunkAPI.rejectWithValue(error.response.data.errorMessage);
      }
    }
  }

  처음엔 아무 생각없이 headers를 넣으면 되겠지 하고 선언을 했지만 axios에 대해 제대로 알지 못해 실행 될 때를 잘 알지 못했고 그렇기에 발생한 문제였던 것 같다.

  두개 중 어느 것을 쓰던 장단점은 있는 것 같지만 interceptors가 제대로 정리 되어 있지 않았는데 이번 기회에 제대로 정리를 할 수 있게 되었다.