Axios: HTTP 요청을 쉽게 만드는 JavaScript 라이브러리

Axios는 웹 개발자들이 브라우저와 Node.js 환경에서 쉽게 HTTP 요청을 보낼 수 있도록 도와주는 JavaScript 라이브러리입니다. 주로 API와의 통신을 위한 요청을 보내고 응답을 처리할 때 사용됩니다.

1. 주요 기능

• Promise 기반 비동기 처리: async와 await를 통해 비동기 처리를 쉽게 작성할 수 있습니다.
• 자동 JSON 데이터 변환: 요청과 응답 데이터를 JSON으로 자동 변환하여 다루기 쉽게 해줍니다.
• 요청/응답 인터셉터: 요청이 보내지기 전이나 응답이 도착하기 전에 미리 작업을 지정할 수 있습니다. 예를 들어, 인증 토큰을 자동으로 추가할 때 유용합니다.
• 브라우저와 Node.js 환경 모두에서 사용 가능: Axios는 클라이언트와 서버에서 동일한 방식으로 사용할 수 있습니다.
• CSRF 보안 및 헤더 설정 지원: CSRF 토큰과 같은 인증 보안을 추가하기 쉬워 보안 강화를 도와줍니다.

2. 설치 방법

npm 또는 yarn을 사용하여 설치할 수 있습니다.

# npm
npm install axios

# yarn
yarn add axios

3. 기본 사용법

import axios from 'axios';

// 데이터 가져오기 (GET 요청)
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);  // 가져온 데이터를 콘솔에 출력
  })
  .catch(error => {
    console.error("Error fetching data:", error);  // 에러 처리
  });

// 데이터 전송하기 (POST 요청)
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'New Post',
    body: 'This is the content of the new post.',
    userId: 1
  })
  .then(response => {
    console.log("Data posted successfully:", response.data);  // 전송 결과 출력
  })
  .catch(error => {
    console.error("Error posting data:", error);
  });

4. 주요 기능 예시

4.1 인터셉터 사용

인터셉터를 이용하여 요청이나 응답을 처리하기 전에 작업을 추가할 수 있습니다.

// 요청 인터셉터
axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer token';  // 토큰 추가
  return config;
});

// 응답 인터셉터
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      console.error("Unauthorized access - maybe log the user out?");
    }
    return Promise.reject(error);
  }
);

4.2 다양한 요청 방식

axios.get('/api/data');  // GET 요청
axios.post('/api/data', { name: 'John' });  // POST 요청
axios.put('/api/data/1', { name: 'Jane' });  // PUT 요청 (데이터 수정)
axios.delete('/api/data/1');  // DELETE 요청 (데이터 삭제)

5. Axios의 장점

1. 비동기 코드 작성의 간편함: async와 await로 작성이 간단하고 직관적입니다.
2. 다양한 요청 기능 지원: GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 지원합니다.
3. 다양한 환경에서 사용 가능: 브라우저와 Node.js 모두에서 사용 가능하여 일관성을 제공합니다.

6. Axios가 사용되는 곳

• 데이터 조회 및 업데이트: 사용자 데이터, 게시글, 댓글 등을 서버에서 가져오거나 수정할 때.
• 인증/인가 시스템: 로그인, 로그아웃, 권한 체크 시 인증 토큰을 요청 헤더에 추가할 때.
• 파일 업로드 및 다운로드: 파일을 서버에 전송하거나 내려받는 작업.

요약

Axios는 간결한 코드로 API 서버와의 상호작용을 쉽게 해주는 필수 도구로, 웹 개발에서 데이터를 처리하는 작업을 단순화합니다. JSON 데이터를 자동으로 변환하고, 응답을 처리하는 과정을 간소화해 개발자가 데이터에 더 집중할 수 있게 도와줍니다.