비동기 HTTP 요청 처리하기: Axios와 Fetch API 활용법

비동기 HTTP 요청 처리하기: Axios와 Fetch API 활용법

비동기 요청을 사용하는 것은 현대 웹 개발에서 아주 중요한 부분이죠. 특히, 사용자 경험을 향상시키기 위해 서버와의 통신이 원활히 이루어져야 합니다. 이번 글에서는 비동기 HTTP 요청을 처리하는 두 가지 주요 방법인 Axios와 Fetch API를 다룰 거예요.

비동기 요청의 중요성

비동기 프로그래밍은 사용자가 웹 페이지에서 다른 작업을 수행할 수 있도록 하면서도, 필요한 데이터를 백그라운드에서 서버로부터 가져올 수 있도록 오랜 대기 시간을 없애줍니다. 이는 다음과 같은 장점이 있습니다.

• 향상된 사용자 경험: 사용자는 대기하지 않고도 페이지를 탐색할 수 있어요.
• 동시 작업 처리: 여러 HTTP 요청을 동시에 처리할 수 있어요.
• 성능 최적화: 서버의 응답 시간이 길더라도 사용자에게는 매끄러운 경험을 제공할 수 있어요.

Axios와 Fetch API 소개

Axios란?

Axios는 HTTP 요청을 수행하기 위해 Promise 기반의 JavaScript 라이브러리예요. 사용이 간단하고 다양한 기능을 제공해 줍니다. 주요 기능은 다음과 같아요.

• 요청과 응답을 변환하는 간편한 방법
• 인터셉터 기능을 통해 요청과 응답에 대한 전처리 및 후처리 가능
• JSON 데이터 전송/수신이 용이

Fetch API란?

Fetch API는 자바스크립트의 내장 함수로, 비동기 HTTP 요청을 관리할 수 있도록 설계되었어요. 인지도가 높아 많은 개발자들이 사용하고 있어요. Fetch API의 주요 특징으로는 다음과 같아요.

• Promise 기반으로 비동기 처리가 매끄러움
• 다양한 옵션 지원 (HTTP 메서드, 헤더, 바디 등)
• 사용이 간편하고, 코드가 깔끔해짐

Axios와 Fetch API 비교

이 두 가지를 비교해보면 각각의 장단점이 있는데, 이를 표로 요약해보았습니다.

특징	Axios	Fetch API
사용 용이성	매우 쉬움	다소 복잡함
JSON 데이터 자동 변환	지원	지원 안 함
인터셉터 지원	지원	지원 안 함
IE 지원	지원	지원 안 함

이 내용을 바탕으로 여러분의 필요에 맞추어 적절한 라이브러리를 선택하는 것이 중요해요.

Axios 사용해보기

Axios를 사용하는 방법에 대해 구체적으로 살펴볼게요. 먼저 Axios를 설치해야 해요.

bash
npm install axios


설치 후, 다음과 같은 코드로 GET 요청을 보내볼 수 있어요.

axios.get(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(‘Error fetching data:’, error);
});

POST 요청도 가능해요

POST 요청의 경우, 다음과 같이 작성할 수 있어요.

javascript
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error('Error posting data:', error);
});


Fetch API 사용해보기

이제 Fetch API를 사용해볼까요?
Fetch API는 추가 설치가 필요 없어요. 예를 들어, 아래와 같이 GET 요청을 보낼 수 있어요.

javascript
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});


POST 요청 예제

Fetch API를 사용하여 POST 요청을 하는 방법은 다음과 같아요.

javascript
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
}).then(response => response.json()).then(data => {
console.log(data);
}).catch(error => {
console.error('Error posting data:', error);
});


결론

이제 Axios와 Fetch API를 이용한 비동기 HTTP 요청의 기본적인 사용법을 익혔어요. 두 방법 모두 각기 장단점이 있으며, 상황에 맞춰 적절히 활용하면 좋습니다.

개발의 세계는 끊임없이 발전하고 있죠. 따라서 최신 기술을 익히고, 적용하는 것이 중요해요. 여러분도 직접 코드를 작성해 보고, 필요한 API와 라이브러리를 활용해보세요. 이것이야말로 여러분의 개발자로서의 성장에 큰 도움이 될 거예요!