Axios, Fetch
Axios란?
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.
- Promise: 비동기 처리에 활용되는 객체
- XMLHttpRequest(XHR): 서버와 상호작용할 때 사용되는 객체. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있다. AJAX 프로그래밍에 많이 사용된다.
특징
- 브라우저를 위해 XMLHttpRequests 생성
- node.js를 위해 http요청 생성
- Promise API를 지원
- 요청 및 응답 인터셉트
- 요청 및 응답 데이터 변환
- 요청 취소
- JSON 데이터 자동 변환
- XSRF를 막기 위한 클라이언트 사이드 지원
GET
GET은 서버의 데이터를 조회할 때 사용한다. 기본적인 사용방법은 아래와 같다.
// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있다.
// config는 axios 공식 문서에서 확인 가능하다.
axios.get(url[, config]) //GETAxios를 사용해서 GET 요청 코드를 작성하기에 앞서, 어떤 방식으로 요청해야 할지는 우리가 사용하는 json-server의 방식을 알아야 한다.
다시 말해, Axios는 GET 요청을 할 수 있도록 도와주는 패키지일 뿐이지, '어떻게 요청을 해야하지?'와 같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 한다는 뜻이다.
예를 들어, GET 요청을 할 때 path variable로 해야할지, query로 보내야할지는 API를 만든 사람이 하라는 대로 해야 하기 때문이다.
json-server의 공식 문서를 보면, 전체 정보나 상세 정보는 path variable로 url을 작성해야 하고,
filter와 같은 기능을 위해서 GET요청을 할 때는 query로 보내라고 명시되어 있다.
POST
axios.post(url[, data[, config]]) // POSTPOST는 보통 서버에 데이터를 추가할 때 사용한다. 다만 post 요청에 대한 로직은 BE 개발자가 구현하는 것이기 때문에 추가 외에 다른 용도로 사용될 수 있지만, 보통은 클라이언트의 데이터를 body 형태로 서버에 보내고자 할 때 사용한다.
네트워크 쪽 개발을 할 때는 항상 브라우저에 있는 네트워크 탭을 확인하면서 개발을 진행해야 한다.
어떤 문제가 생겼을 때 이 정보를 통해 디버깅을 할 수 있기 때문이다.
- headers
- Request URL을 통해서 우리가 의도한 URL로 post 요청을 보냈음을 알 수 있다.
- Request Method를 동해서 우리가 POST 메서드를 사용했음을 알 수 있다.
- Status Code는 자동으로 생서오디는 것이 아니라 BE개발자가 직접 개발을 하고 설정한 code가 브라우저에 보이게 된다. 그래서 만약 BE개발자가 구현을 해놓지 않았다면 문맥과 다른 status code가 브라우저에 보일 수 있다.
- payload
- payload에서는 우리가 보낸 body를 확인할 수 있다.
- response
- response에서는 우리가 보낸 post에 요청에 대한 서버의 응답값을 확인할 수 있다. 이 response값은 자동으로 생성되는 것이 아니라, FE개발자가 BE개발자에게 요청한 것을 직접 개발을 해야 생기는 값이다. json-server의 경우 POST 요청을 했을 때, 클라이언트가 보낸 body를 그대로 응답해주도록 만들어진 패키지이다.
DELETE
DELETE는 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용한다.
axios.delete(url[, config]) // DELETEPATCH
PATCH는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다. 다만, 이것은 http 환경에서 서로가 한 약속이자 문맥이기 때문에, 수정을 하고자 반드시 patch, put을 써야만 하는 것은 아니다. BE에 의한 POST를 통해서 '수정'이라는 기능은 충분히 만들 수 있기 때문이다. 다만 이러한 약속을 대부분의 개발자들이 지키고 있다.
axios.patch(url[, data[, config]]) // PATCH.env
.env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다.
주의사항
- root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다.
- 변수명이 'REACTAPP'으로 시작하지 않으면 React가 인식하지 못하여 정상적으로 작동하지 않는다.
- .gitignore에 등록해주어야 git에 등록할 때 파일이 올라가지 않는다.
사용법
- root 폴더에 .env 파일을 생성한다.
- key, value 형식으로 환경변수를 입력해준다. 이 때 key 앞에 무조건 'REACTAPP'을 붙혀야 한다.
- 소스코드에서 import 없이 process.env.REACT _ APP__ 변수명으로 불러와 적용한다. (뒤 언더바 1칸)
- env의 값을 변경하여 적용하고 싶다면 변경 후 server를 다시 실행시켜주어야 한다.
Fetch
Fetch는 ES6부터 도입된 JavaScript 내장 라이브러리이다. Promise 기반 비동기 통신 라이브러리며, axios처럼 데이터를 다루기 쉽고, 내장 라이브러리이기 때문에 별도의 설치 및 import를 필요로 하지 않는다.
하지만 다음과 같은 단점을 가진다.
- 미지원 브라우저 존재
- 개발자에게 불친절한 response
- axios에 비해 부족한 기능
fetch와 axios의 차이
CASE 1. 데이터 읽어오기
(1) fetch
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => response.json())
.then(console.log);- fetch().then을 한 상태여도 여전히 JSON 포맷의 응답이 아니기 때문에 response.json()을 한 번 더 해주는 과정이 필요하다.
- 따라서, fetch로 데이터를 요청하는 경우 두 개의 .then()이 필요하다.
(2) axios
const url = "https://jsonplaceholder.typicode.com/todos";
axios.get(url).then((response) => console.log(response.data));- axios는 response를 기본적인 JSON 포맷으로 제공한다. 우리는 단순히 response.data로 사용한다.
CASE 2. 에러 처리
(1) fetch
const url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then((response) => {
if (!response.ok) {
throw new Error(
`This is an HTTP error: The status is ${response.status}`
);
}
return response.json();
})
.then(console.log)
.catch((err) => {
console.log(err.message);
});fetch의 경우, catch()가 발생하는 경우는 오직 네트워크 장애 케이스이다. 따라서 개발자가 일일히 then() 안의 모든 케이스에 대한 HTTP 에러 처리를 해야한다.
(2) axios
const url = "https://jsonplaceholder.typicode.com/todos";
axios
.get(url)
.then((response) => console.log(response.data))
.catch((err) => {
console.log(err.message);
});- axios.get() 요청이 반환하는 Promise 객체가 갖고 있는 상태코드가 2xx의 범위를 넘어가면 reject를 한다.
- 따라서, 곧바로 catch() 부분을 통해 error handling이 가능하다. 예시는 다음과 같다.
const url = "https://jsonplaceholder.typicode.com/todos";
// axios 요청 로직
axios
.get(url)
.then((response) => console.log(response.data))
.catch((err) => {
// 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다
if (err.response) {
const { status, config } = err.response;
// 없는 페이지
if (status === 404) {
console.log(`${config.url} not found`);
}
// 서버 오류
if (status === 500) {
console.log("Server error");
}
// 요청이 이루어졌으나 서버에서 응답이 없었을 경우
} else if (err.request) {
console.log("Error", err.message);
// 그 외 다른 에러
} else {
console.log("Error", err.message);
}
});