항해 37일차(instance)

항해 37일차

오늘은 프로젝트를 진행하면서 다른 페어분이 instance를 공부해라고 해서 공부해보았다.

앞에서 axios를 이용하여 HTTP를 통신하는 방법을 배웠다.

axios.get("http://localhost:3001/todos");
axios.post("http://localhost:3001/todos", todo);
axios.delete(`http://localhost:3001/todos/${todoId}`);

이런 식으로 axios들을 많이 사용하면 서버가 바뀌면 모든 url를 바꿔줘야 한다.

그 부분에서 너무 많은 노가다를 해야 하기 때문에 많은 힘이 든다....😇

그래서 이런 힘듬을 없애줄 수 있는 instance라는 것을 설명해보겠다.

instance

import axios from "axios";

// axios.create의 입력값으로 들어가는 객체는 configuration 객체에요.
// https://axios-http.com/docs/req_config
// 위 주소를 참고해주세요!
const instance = axios.create({
	baseURL: "http://localhost:4000",
});

export default instance;

기본적으로 이런 틀로 인스턴스를 사용한다.

baseURL은 .env의 역할을 하여 주소들을 쉽게 변경할 수 있다.

또한 inteceptors 라는 것이 있다. 인터셉터는 요청을 보낼 때, 서버로부터 응답을 받을 때 특정한 일을 수행할 때 사용한다.

import axios from "axios";

const instance = axios.create({
  baseURL: "http://localhost:4000",
});

instance.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전 수행
    console.log("인터셉트 요청 성공!");
    return config;
  },
  function (error) {
    // 오류 요청을 보내기 전 수행
    console.log("인터셉트 요청 오류!");
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    console.log("인터넵트 응답 받았어요!");
    // 정상 응답
    return response;
  },

  function (error) {
    console.log("인터셉트 응답 못받았어요...ㅠㅠ");
    return Promise.reject(error);
  }
);

export default instance;