Base URL (feat.axios)

프로젝트를 하면서 페어분께서 항상 불편하다고 하셨던 기능이고, 덕분에 잘 배운 기능이다. 로그인 오어스때문에 항상 빌드할때와 로컬에서 테스트할때 유알엘을 바꿔야하는 경우가 생겼다. 그러나 파일에 따로 저장해놓고 필요할때마다 가지고와서 사용하니 계속 바꿀 필요없었다.
(프로젝트를 할때 썻던 코드를 가지고 온 것이다. 그러므로 이해가 안되는 코드가 있을것인데, 그건 무시하시면 된다!)

아래는 코드다.

// apis/baseUrl.tsx
import axios from 'axios';

export const clientURL = 'https://www.bitda.ga';

export default axios.create({
  baseURL: 'https://www.bitda.ml'
});

위와 같이 베이스 유알엘을 정의한 파일을 생성한다.
그 후에 우리가 이 유알엘을 사용할 곳에서 불러오고 사용하기만 하면된다.
코드는 아래와 같다.

import url, { clientURL } from '../../apis/server';

const submitHandler = async () => {
    try {
      let getLoginInfo = await url.post(
        '/users/signin',
        { ...info },
        {
          headers: { 'Content-Type': 'application/json'},
          withCredentials: true,
        }
      )
    } catch (err) {
      setErrorMessage(err);
    }
  };

1. url로 불러와진 녀석은 처음에 정의한 디폴드가 붙은 녀석이고, 그렇지 않은 녀석은 객체로 감싸서 import를 한다.
2. 그전엔 axios.post('url', ...)이런식으로 적었던것을 이번에는 await url.post( '/users/signin', ...)와 같이 적어주면 같은 역할을 하게된다.