CSNetwork

[Javascript] Axios 사용하기

웹 개발에서 API 통신은 필수불가결한 요소입니다. 그 중에서도 Axios는 가장 인기 있고 강력한 JavaScript HTTP 클라이언트 라이브러리로 자리잡고 있습니다. 이 글에서는 Axios의 기본 사용법부터 고급 기능까지 실무에서 바로 활용할 수 있는 예제와 함께 상세히 알아보겠습니다.

Axios란 무엇인가?

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

✨ 주요 특징

  • Promise 기반: async/await와 완벽 호환
  • 요청/응답 인터셉터: 공통 로직 처리 가능
  • 자동 JSON 변환: 별도 변환 과정 불필요
  • 요청/응답 변환: 데이터를 원하는 형태로 가공
  • 요청 취소: 불필요한 요청 중단 가능
  • 광범위한 브라우저 지원: IE11까지 지원

설치 및 기본 설정

📦 설치

# npm 사용시
npm install axios

# yarn 사용시  
yarn add axios

# pnpm 사용시
pnpm add axios

🔧 기본 import

// ES6 모듈
import axios from 'axios';

// CommonJS
const axios = require('axios');

// CDN (브라우저에서 직접 사용)
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

기본 HTTP 메서드 사용법

🔍 GET 요청 - 데이터 조회

// 기본 GET 요청
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('데이터:', [response.data](http://response.data));
    console.log('상태코드:', response.status);
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

// async/await 패턴 (권장)
async function fetchPost() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log('게시글 데이터:', [response.data](http://response.data));
    return [response.data](http://response.data);
  } catch (error) {
    console.error('게시글 조회 실패:', error.message);
    throw error;
  }
}

// 쿼리 파라미터 포함
const posts = await axios.get('/api/posts', {
  params: {
    page: 1,
    limit: 10,
    category: 'tech'
  }
});

➕ POST 요청 - 데이터 생성

// 새로운 게시글 생성
const newPost = {
  title: 'Axios로 HTTP 요청하기',
  content: 'Axios 사용법에 대한 상세한 가이드입니다.',
  author: 'Developer',
  tags: ['javascript', 'axios', 'http']
};

async function createPost(postData) {
  try {
    const response = await [axios.post](http://axios.post)('/api/posts', postData, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token-here'
      }
    });
    
    console.log('게시글 생성 성공:', [response.data](http://response.data));
    return [response.data](http://response.data);
  } catch (error) {
    console.error('게시글 생성 실패:', error.response?.data);
    throw error;
  }
}

🔄 PUT & PATCH 요청 - 데이터 수정

// PUT: 전체 데이터 교체
const updatedPost = {
  id: 1,
  title: '수정된 제목',
  content: '수정된 내용',
  author: 'Updated Author'
};

await axios.put('/api/posts/1', updatedPost);

// PATCH: 일부 데이터만 수정
const partialUpdate = {
  title: '새로운 제목만 변경'
};

await axios.patch('/api/posts/1', partialUpdate);

🗑️ DELETE 요청 - 데이터 삭제

async function deletePost(postId) {
  try {
    await axios.delete(`/api/posts/${postId}`);
    console.log(`게시글 ${postId} 삭제 완료`);
    return true;
  } catch (error) {
    console.error('삭제 실패:', error.message);
    return false;
  }
}
Share