API 연동을 위한 Axios 활용법 🌐

웹 개발을 하다 보면 다양한 데이터를 다루게 되는데요, 이때 외부 데이터를 우리의 애플리케이션에 통합하는 것이 중요합니다. 오늘은 바로 그 방법 중 하나인 Axios를 사용하여 API를 연동하는 방법을 쉽게 설명해 드리겠습니다.

Axios는 자바스크립트에서 HTTP 요청을 쉽게 만들 수 있게 도와주는 라이브러리입니다. 간단한 설정과 코드 몇 줄로 외부 API와의 통신을 구현할 수 있죠. 그럼, Axios를 사용하는 기본적인 방법을 알아보겠습니다.

먼저, Axios를 사용하기 위해서는 프로젝트에 설치해야 합니다. 터미널에서 다음 명령어를 입력해주세요:

npm install axios

설치가 완료되면, 이제 Axios를 사용하여 API 요청을 보낼 수 있습니다. 가장 기본적인 GET 요청을 보내는 코드는 다음과 같습니다:

import axios from 'axios';

// API 요청을 보내는 함수
function fetchData() {
  axios.get('https://api.example.com/data')
    .then(response => {
      // 요청이 성공적으로 완료되면 이 부분이 실행됩니다.
      console.log(response.data);
    })
    .catch(error => {
      // 요청 중 오류가 발생하면 이 부분이 실행됩니다.
      console.error('Error fetching data:', error);
    });
}

// 함수 호출
fetchData();

이 코드는 https://api.example.com/data 주소로 GET 요청을 보내고, 응답을 받아 콘솔에 출력합니다. .then() 메소드는 요청이 성공적으로 완료되었을 때 실행되며, .catch() 메소드는 오류가 발생했을 때 실행됩니다.

데이터를 보내는 POST 요청도 마찬가지로 쉽게 할 수 있습니다. 예를 들어, 사용자 정보를 서버에 보내고 싶다면 다음과 같이 작성할 수 있습니다:

import axios from 'axios';

// 사용자 정보를 서버에 보내는 함수
function postUserData(userData) {
  axios.post('https://api.example.com/users', userData)
    .then(response => {
      // 요청이 성공적으로 완료되면 이 부분이 실행됩니다.
      console.log('User created:', response.data);
    })
    .catch(error => {
      // 요청 중 오류가 발생하면 이 부분이 실행됩니다.
      console.error('Error creating user:', error);
    });
}

// 예시 사용자 데이터
const newUser = {
  name: 'Jane Doe',
  email: 'jane.doe@example.com'
};

// 함수 호출
postUserData(newUser);

이 코드는 newUser 객체를 https://api.example.com/users 주소로 POST 요청하여 보냅니다. 서버에서는 이 데이터를 받아 새로운 사용자를 생성하고, 그 결과를 응답으로 보냅니다.

Axios를 사용하면 이처럼 간단하게 API 요청을 보내고 응답을 처리할 수 있습니다. 시작하기에 앞서 공식 문서를 참고하여 더 다양한 기능과 설정 방법을 알아보는 것도 좋겠죠. 웹 개발의 세계에서 데이터는 매우 중요하니, Axios를 통해 데이터를 자유롭게 다루는 법을 익혀보세요!