Axios 란?

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.

 

 

 

Axios는 다음과 같은 주요 특징을 가지고 있습니다:

1. 간편한 API: 요청을 만들고 보낼 때 간편하고 직관적인 API를 제공합니다.
2. HTTP 요청과 응답을 Promise로 처리: 비동기 작업을 처리할 때 Promise를 사용하여 요청을 보내고 응답을 받습니다.
3. 자동 변환: JSON 데이터를 자동으로 파싱하고, ArrayBuffer 또는 Blob과 같은 바이너리 데이터를 처리할 수 있습니다.
4. 요청/응답 인터셉터: 요청이나 응답을 인터셉트(intercept)하여 중간에 수정할 수 있는 기능을 제공합니다.
5. CSRF 보호: 기본적으로 XSRF(Cross-Site Request Forgery) 보호를 제공합니다.
6. 취소 요청: 요청을 취소할 수 있는 기능을 제공하여 불필요한 네트워크 요청을 줄일 수 있습니다.
7. 서버 및 클라이언트 환경에서 사용 가능: 브라우저와 Node.js 환경에서 모두 사용할 수 있습니다.

 

npm install axios

 

 

 

서버로 데이터를 전송하는 방식

• GET:
  • 목적: 데이터를 요청하기 위해 사용.
  • 데이터 전송: URL의 쿼리 문자열(query string)을 통해 전송.
  • 보안: URL에 데이터가 노출되어 보안에 취약할 수 있음.
  • 캐싱: 응답을 캐싱할 수 있음.
  • 제한: 데이터 전송에 크기 제한이 있을 수 있음.
• POST:
  • 목적: 데이터를 서버로 제출하거나 업데이트하기 위해 사용.
  • 데이터 전송: HTTP 요청의 본문(body)에 포함하여 전송.
  • 보안: URL에 데이터가 노출되지 않아 보안적으로 더 강력함.
  • 캐싱: 일반적으로 응답을 캐싱하지 않음.
  • 제한: 일반적으로 데이터 전송에 크기 제한이 더 큼.

 

 

 

Get - Fetch

async function getProducts() {

    const res = await fetch('https://learn.codeit.kr/api/codeitmall/products/');

    const products = await res.json();

    return products;

  }

 

 

Get - Axios

import './App.css';

import axios from 'axios';

import React, { useEffect, useState } from 'react';

function App() {

  const [data, setData] = useState(null);

  useEffect(() => {

    // GET 요청을 보낼 URL

    const url = 'http://jsonplaceholder.typicode.com/posts/1';

    // axios를 사용하여 GET 요청 보내기

    axios.get(url)

      .then(response => {

        // 성공적으로 데이터를 받았을 때 실행될 코드

        console.log('GET 요청 성공:', response.data);

        setData(response.data); // 받은 데이터를 상태에 저장

      })

      .catch(error => {

        // 오류 발생 시 실행될 코드

        console.error('GET 요청 오류:', error);

      });

  }, []);

  return (

    <div>

      <h1>GET 요청 예제</h1>

      {data ? (

        <div>

          <h2>Title: {data.title}</h2>

          <p>Body: {data.body}</p>

        </div>

      ) : (

        <p>Loading...</p>

      )}

    </div>

  );

}

export default App;

 

 

Post - Fetch

async function createSizeReview(body) {

    const res = await fetch(

      'https://learn.codeit.kr/api/codeitmall/size-reviews/',

      {

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

        },

        body: JSON.stringify(body),

      }

    );

 

    const newSizeReview = await res.json();

    return newSizeReview;

  }

 

 

Post - Axios

import './App.css';

import axios from 'axios';

import React, { useEffect, useState } from 'react';

function App() {

  const [postData, setPostData] = useState({ title: '', body: '' });

  // POST 요청을 보내는 함수

  const handlePostRequest = () => {

    // POST 요청을 보낼 URL

    const url = 'http://jsonplaceholder.typicode.com/posts';

    // axios를 사용하여 POST 요청 보내기

    axios.post(url, postData)

      .then(response => {

        // 성공적으로 데이터를 받았을 때 실행될 코드

        console.log('POST 요청 성공:', response.data);

        // POST 요청 후 처리할 코드 작성

      })

      .catch(error => {

        // 오류 발생 시 실행될 코드

        console.error('POST 요청 오류:', error);

      });

  };

  return (

    <div>

      <h1>POST 요청 예제</h1>

      <form>

        <label>Title:</label>

        <input

          type="text"

          value={postData.title}

          onChange={(e) => setPostData({ ...postData, title: e.target.value })}

        />

        <br />

        <label>Body:</label>

        <textarea

          value={postData.body}

          onChange={(e) => setPostData({ ...postData, body: e.target.value })}

        />

        <br />

        <button type="button" onClick={handlePostRequest}>Submit</button>

      </form>

    </div>

  );

}

export default App;

 

 

 

 

 

 

 

 

 

https://chatgpt.com/

 

https://www.codeit.kr/tutorials/47/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95

 

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94