api 연동

proxy-middleware

브라우저에서 host나 port가 다른 백엔드 서버로 API 요청 시 호출할 때 발생할 수 있는 CORS 관련 오류를 방지하기 위하여 Proxy를 설정하여 줍니다.

const { createProxyMiddleware } = require('http-proxy-middleware');

const apiProxy = createProxyMiddleware('/api', { target: 'http://www.example.org', changeOrigin: true });
//                                    \____/   \_____________________________/
//                                      |                    |
//                                    context             options

// 'apiProxy' is now ready to be used as middleware in a server.

context : 대상 호스트에 프록시되어야 하는 request를 결정합니다. 다중 경로는 [ ] 를 사용하여 표시합니다.

options.target : 프록시할 대상 호스트.

changeOrigin : 대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하여 줍니다.

Axios

React에서 AJAX를 구현하기 위해서는 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야 합니다.

보통 사용하는 HTTP Client Library는 Fetch API와 Axios가 있습니다.

AJAX(Asynchronous Javascript And XML)

전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 Javascript를 사용한 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.

즉 JavaScript를 통해 서버에 데이터를 요청하는 것 입니다.

Axios 란

브라우저 및 node.js를 위한 Promise 기반 HTTP 클라이언트입니다.

Axios는 다음과 같은 특징이 있습니다.
1. 브라우저에서 XMLHttpRequests 를 만듭니다.
2. Promise API를 지원합니다.
3. JSON 데이터를 자동 변환합니다.

axios.create()를 사용하여 custom config로 axios의 새 인스턴스를 생성할 수 있습니다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

baseURL : url이 절대적이지 않으면 baseURL이 url 앞에 추가됩니다.

이외에도 transformRequest, headers, params, data, timeout 등 다양한 옵션을 지정할 수 있습니다.

사용 예시

// 파라미터에 API 주소를 넣어줍니다.
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })

// 두번째 파라미터에 정보를 넣을 수도 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })

// async/await을 사용할 수 있습니다.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}