바닐라 자바스크립트만으로도 웹 요청을 보낼 수 있다는 사실을 알고 계셨나요? 별도의 라이브러리를 설치할 필요 없이 네트워크 요청을 처리할 수 있습니다. 게다가 여기서 소개할 내용은 오래되고 복잡한 XMLHttpRequest가 아닙니다.
Fetch API를 사용하면 순수 자바스크립트만으로 Ajax 요청을 만들 수 있습니다. 웹 서버에서 데이터를 가져오거나 기존 데이터를 수정할 때 유용하게 활용되는 도구입니다.
이 가이드에서는 Fetch API가 무엇인지, 그리고 이 API를 사용해 어떻게 웹 요청을 보내는지 살펴보겠습니다. GET 요청과 POST 요청 두 가지 예제를 통해 차근차근 설명합니다.
Fetch API란 무엇인가?
자바스크립트는 오랫동안 네트워크 요청을 보낼 수 있는 언어였습니다. XMLHTTPRequest 도구는 서버에서 데이터를 가져오고 정보를 갱신하는 데 필요한 기능을 제공했습니다.
이 도구는 나름 효과적이었지만, 코드가 장황하고 사용하기 복잡하다는 단점이 있었습니다. 반면 Fetch는 웹 요청을 훨씬 간단하게 만들어 주는 새로운 대안입니다.
Fetch API는 모든 최신 브라우저에서 지원됩니다. 따라서 한 번 사용법을 익혀두면 웹 요청을 보낼 때 브라우저 호환성을 걱정할 필요가 없습니다.
Fetch로 GET 요청 보내는 방법
fetch의 작동 방식은 직접 예제를 통해 확인하는 것이 가장 좋습니다. 이 튜토리얼에서는 JSONPlaceholder라는 웹 서비스를 사용합니다. JSONPlaceholder는 미리 작성된 더미 데이터를 제공하는 API로, 웹 요청을 테스트하기에 적합합니다.
다음 코드는 JSONPlaceholder에서 첫 번째 게시물을 가져오는 GET 요청을 생성합니다:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
이 코드는 다음과 같은 결과를 반환합니다:
{ body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto", id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", userId: 1 }
코드를 하나씩 살펴보겠습니다. 첫 번째 줄에서는 fetch() 메서드를 사용해 JSONPlaceholder API로 웹 요청을 시작합니다. 그다음 .then() 메서드를 사용해 요청이 완료된 후 실행할 동작을 지정합니다.
첫 번째 .then() 메서드에서는 API가 반환한 응답을 JSON으로 변환합니다. 이렇게 하면 데이터를 훨씬 읽기 쉬워집니다. 이어지는 .then() 메서드에서는 변환된 응답을 콘솔에 출력합니다. 그 결과 JSONPlaceholder API에서 ID가 1인 게시물이 화면에 표시됩니다.
POST 요청 보내는 방법
GET은 Fetch API로 보낼 수 있는 유일한 요청 유형이 아닙니다. POST, PUT, DELETE 요청도 지원하며, 문법은 모두 동일합니다. 여기서는 POST 요청 예제 하나만 살펴보겠습니다.
POST, PUT, DELETE 요청을 보낼 때는 일반적으로 세 가지 정보를 지정해야 합니다:
- 요청을 보낼 URL
- 요청에 사용할 HTTP 메서드(여기서는 POST)
- 서버로 전송할 데이터
다음 코드 스니펫은 JSONPlaceholder API를 사용해 새 댓글을 생성합니다:
const data = {
name: "Leslie Tudor",
email: "leslie.tudor@email.com",
body: "This is an example post by Career Karma!",
postId: 1
}
const options = {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
}
};
fetch('https://jsonplaceholder.typicode.com/comments', options)
.then(response => response.json())
.then(json => console.log(json))
코드를 실행하면 새로 생성된 게시물이 JSON 형식으로 반환됩니다:
{ body: "This is an example post by Career Karma!", email: "leslie.tudor@email.com", id: 501, name: "Leslie Tudor", postId: 1 }
코드에서는 먼저 data 객체를 선언합니다. 이 객체에는 서버로 전송할 데이터가 저장됩니다. 여기서는 Leslie Tudor라는 사용자가 작성한 댓글 정보를 전송하고 있습니다.
그다음에는 fetch 요청과 관련된 옵션을 담는 또 다른 객체를 선언합니다. 이 객체는 요청에 사용할 메서드(POST), 전송할 데이터, 그리고 함께 보낼 헤더를 지정합니다.
마지막으로 fetch() 메서드를 사용해 실제 요청을 보냅니다. 첫 번째 예제와 마찬가지로 .then() 메서드를 사용해 응답을 받아 JSON으로 변환한 후 콘솔에 출력합니다.
JavaScript Fetch로 에러 처리하는 방법
모든 웹 요청이 의도대로 작동하지 않는 경우도 있습니다. 데이터 구조가 잘못되었거나 서버에 문제가 생길 수도 있습니다. 이런 상황을 미리 예측하고, 실제로 발생했을 때 적절히 대응할 수 있도록 준비해 두는 것이 중요합니다.
.catch() 메서드를 사용하면 코드에서 반환된 오류를 잡아낼 수 있습니다. Promise.reject() 메서드와 함께 사용하면 오류를 효과적으로 처리할 수 있습니다:
fetch('https://jsonplaceholder.typicode.com/comments/999', options)
.then(response => {
if (response.ok) {
console.log(response.json());
return response.json();
} else {
return Promise.reject({ statusText: response.statusText })
}
})
.catch(error => console.log("ERROR:", error.statusText));
이 코드는 다음과 같은 결과를 출력합니다:
"ERROR:", "Not Found"
코드에서는 response.ok 속성으로 요청의 성공 여부를 확인합니다. 이 예제에서는 존재하지 않는 999번 댓글을 조회하려고 시도했습니다. 이로 인해 else 문의 내용이 실행되어 거부(rejected) 상태의 프로미스가 반환되며, 이 프로미스에는 JSONPlaceholder API가 반환한 오류 메시지가 담겨 있습니다.
그런 다음 .catch() 문으로 이 오류를 받아 콘솔에 출력합니다.
마무리
Fetch API를 사용하면 자바스크립트에서 웹 요청을 아주 손쉽게 처리할 수 있습니다. 이 API는 바닐라 자바스크립트의 일부이므로 별도의 라이브러리를 설치하거나 참조할 필요가 없습니다. 또한 Fetch API를 활용하면 GET, POST, PUT, DELETE 요청을 모두 보낼 수 있습니다.
이제 여러분도 전문 개발자처럼 Fetch API를 사용해 웹 요청을 보낼 준비가 되었습니다!