API 통합을 위한 Axios 라이브러리 활용하기 💻

웹 개발에서 데이터를 주고받는 일은 정말 중요해요. 오늘은 여러분이 웹 개발 프로젝트에서 API와 쉽게 대화할 수 있게 도와주는 멋진 도구, Axios 라이브러리에 대해 알아볼 거예요. Axios는 자바스크립트에서 HTTP 요청을 간단하게 만들어주는 라이브러리랍니다. 특히 API와의 통신을 위해 많이 사용되죠.

Axios 시작하기

Axios를 사용하기 전에, 먼저 프로젝트에 추가해야 해요. 만약 npm(노드 패키지 매니저)을 사용하고 있다면, 다음 명령어로 쉽게 설치할 수 있어요.

npm install axios

설치가 완료되면, 이제 Axios를 사용하여 API 요청을 보낼 준비가 된 거예요!

간단한 GET 요청 보내기

웹 페이지에서 외부 데이터를 가져오고 싶을 때, GET 요청을 사용해요. Axios로 이를 아주 간단하게 할 수 있어요. 예를 들어, 무작위 사용자 정보를 제공하는 API에서 데이터를 가져와 볼게요.

import axios from 'axios';

axios.get('https://randomuser.me/api/')
  .then(function (response) {
    // 요청이 성공하면 여기 코드가 실행돼요
    console.log(response.data);
  })
  .catch(function (error) {
    // 요청이 실패하면 여기 코드가 실행돼요
    console.log(error);
  });

위 코드는 https://randomuser.me/api/에서 데이터를 요청하고, 결과를 콘솔에 출력해요. .then()은 요청이 성공했을 때 실행되고, .catch()는 요청이 실패했을 때 실행돼요.

POST 요청으로 데이터 보내기

이제 데이터를 서버로 보내는 방법을 알아볼게요. POST 요청을 사용하면 됩니다. 예를 들어, 사용자 정보를 새로 생성하고 싶을 때 사용할 수 있어요.

axios.post('https://your-api.com/users', {
    firstName: 'Jamie',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

이 코드는 https://your-api.com/users 주소로 새 사용자의 이름과 성을 보내고, 서버의 응답을 콘솔에 출력해요.

마무리

Axios 라이브러리를 사용하면, API와의 통신을 훨씬 쉽게 할 수 있어요. GET과 POST 요청 외에도, PUT, DELETE 등 다양한 HTTP 요청을 지원해요. 이제 여러분도 Axios를 활용하여 멋진 웹 애플리케이션을 만들어볼 준비가 되었나요? Happy coding! 🚀