실전프로젝트

오늘은 환승시민의 코드 리팩토링을 진행 하였다 .
기존 axios 에다가 데이터를 서버에 넘겨줄때 headers 안에다가 토큰을 넘겨주어야 한다. 그리고 env 쓰면서 환경변수가 너무 길어지는데 instance 자체에다가 환경변수를 다 지정해줘서
코드를 좀 더 줄일수 있다.

try {
      const { data } = await trainApi2.chattingForm(`${thURL}/uploadFile`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${token}`,
        },
      });

해당 코드를 인스턴스를 도입 시키면 ?

try {
      const { data } = await trainApi2.chattingForm();

한줄로 줄일 수 있다.

instance의 사용방법은

const instance = axios.create({
  baseURL: `${yhURL}`,
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

아래 instance 는 일반 파일에 대한 instance 이고,

const instanceF = axios.create({
  baseURL: `${yhURL}`,
  headers: {
    "Content-Type": "multipart/form-data",
    Authorization: `Bearer ${token}`,
  },
});

아래 instance 는 폼 데이타에 대한 instance 이다.

인스턴스 생성 후 trainApi 라는 컴포넌트를 만들어 안에다가 chattingForm 이라는 함수를 만들어주고 instanceF.post 서버와 axios 통신할때 처럼 주소,보낼 값 그리고 위에 instance 에서 headers 안에 multipart/form-dada 와 Authorization: 토큰을 담아 만들었기 때문에

export const trainApi2 = {
  chattingForm:(payload)=>instanceF.post("/uploadFile",payload)

};

payload 만 보내주면 끝이난다.
정말 instance 하나 도입 했는데 코드의 가독성과 간결함이 살아나는거 같다.