기능 정리 axios 사용하기

[주인장]

1. axios 

- axios는 JavaScript의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다. axios는 Promise를 기반으로 한 강력한 기능과 다양한 설정 옵션을 제공하여 네트워크 요청을 보다 편리하게 다룰 수 있도록 도와줍니다.

2. Axios 설정 객체(config)의 주요 속성
url: 요청을 보낼 URL
method: HTTP 메서드 (GET, POST, PUT, DELETE 등)
params: URL에 추가할 쿼리 매개변수
data: 요청 바디에 포함될 데이터 (POST, PUT 등에서 사용)
headers: 요청 헤더 설정
timeout: 요청이 얼마나 길어질 수 있는지 설정

3. Axios의 반환값
axios 메서드는 Promise를 반환합니다. 이 Promise는 성공적인 응답일 경우 response 객체를 resolve하고, 오류가 발생한 경우 error 객체를 reject합니다.

4. 사용 예제 

a. get 방식

// axios 라이브러리 가져오기
const axios = require('axios');

// GET 요청 보내기
axios.get('https://httpbin.org/get')
  .then(response => {
    // 성공적인 응답 처리
    console.log(response.data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Request failed:', error);
  });

b. post 방식 

const axios = require('axios');

const url = 'https://httpbin.org/post';

const data = { name: 'Kitae', age: 20 };

const headers = { 'Content-Type': 'application/json' };

// POST 요청 보내기

axios.post(url, data, headers)

  .then(response => {

    console.log("Response : ", response.data);

  })

  .catch(error => {

    console.error('Request failed:', error);

  });

5. proxy가 설정되어 있는지 확인해야 함.

- vate.config.js 에 설정 필요!

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

// https://vite.dev/config/

export default defineConfig({

  plugins: [react()],

  server: {

    proxy: {

      '/api': {

        target: 'http://localhost:8080',

        changeOrigin: true,

        secure: false,

        rewrite: (path) => path.replace(/^\/api/, '')

      }

    }

  }

})