15.3.2 axios 인스턴스만들기

이전에 axios를 사용할 때는 axios.get(...)과 같은 형식으로 라이브러리를 불러와서 메서드에 따라 get, post 등의 함수를 바로 사용했는데요. 이번에는 별도의 axios 클라이언트 인스턴스를 따로 만들어서 작업을 진행하겠습니다. 이렇게 하는 이유는 두 가지입니다.

첫 번째 이유는 요청에 baseURL을 설정하기 위함입니다. axios 인스턴스를 만들어서 baseURL 설정을 적용하면 주소의 앞부분(http://localhost:1337)을 포함하지 않고 다음과 같이 경로만 입력하여 요청할 수 있습니다.

const client = axios.create({
  baseURL: 'http://localhost:1337'
});

client.get('/articles');

참고로 안드로이드 환경에서는 localhost 주소로 요청하게 되면 localhost 주소가 우리의 PC가 아닌 기기 자체를 가리키게 되어서 요청이 제대로 이뤄지지 않습니다. 반면 iOS의 경우에는 localhost로 바로 접속할 수 있습니다. 다만 iOS 기기에서는 localhost로 접속할 수 없습니다.

따라서 주소 부분에 PC의 실제 내부 주소를 입력해줘야 합니다(터미널에서 ifconfig로 확인, 윈도우의 경우 ipconfig).

안드로이드에서 실제 내부 주소를 입력하지 않고도 localhost에 접속하는 방법이 있는데요. 바로 adb의 reverse 기능을 사용하면 됩니다.