서버와 통신하기
fetch같은 경우 .json()을 통해 데이터 포멧이 필요하다면
axios는 자동으로 변환해 준다.
XSRF도 보호해준다.
Axios는 브라우저와 Node.js를 위해 만들어진
Promise를 활용하는 HTTP 비동기 통신 라이브러리.
주요 특징 : 운영환경에 따라 브라우저 XMLHTTPRequest 객체 또는 Node.js의 HTTP api 사용
Promise 사용
HTTP 요청을 취소할 수 있다
요청(request)과 응답(response)를 JSON 형태로 자동 변경
axios는 라이브러리로 설치가 필요하다
axois는 XSRF보호를 해준다
axios는 data 속성을 사용한다
axios는 자동으로 JSON 데이터 형태로 변환한다
axios는 요청취소 및 타임아웃을 걸 수 도 있다.
axios는 axios.post()를 통해 쉽게 구현 가능
fetch는 현대 브라우저에서 빌트인이라 별도의 설치가 필요하지 않다.
fetch는 body 속성을 이용한다
fetch는 .json()메서드를 사용해야한다
fetch를 통해 가져온 데이터는 JSON.parse()를 해주어야 한다.
fetch의 기본 get 형태에서는 res.json() 과정을 통해 변환해야 하지만
axios는 할 필요가 없다.
fetch는 데이터를 넘기거나 받을 때 body 속성으로 넘기고
JSON.stringify를 통해 JSON으로 데이터를 변환한다.
그 이유는 body로 데이터를 전송할 때 fetch의 특징으로 문자열로 된 자료를 전송하기에
별도의 JSON.stringify를 통해 JSON 형태로 변환 작업이 필요하다.
axios 작업 중 async , await를 쓰는 이유
return response.data를 받기 위해서는
axios.post 요청이 먼저 필요하기에 await를 post요청에 걸어놓은 것이다.
url 옆에 data 매개변수를 사용한 이유는 ?
axios를 쓰는 비동기함수를 정의해놓고 인자로 data 객체를 넣어서 실행하면
post 요청에 data 를 담아서 전송하게 정의해놓은 것이다.
response에서 필요한 response.data 만 리턴받기 위해 response.data 입력
https://jsonplaceholder.typicode.com/
오픈 api를 이용해서 get과 post 연습하기
https://velog.io/@yh20studio/CS-Http-Method-%EB%9E%80-GET-POST-PUT-DELETE
기본적인 HTTP Method 공부하기
ajax는 비동기 방식으로 데이터를 교환할 수 있는 통신 기법
fetch,axios도 다 이런 ajax 비동기 통신 기법을 구현하기 위한 여러가지 방법 중 하나
예전에는 XMLHttpRequest로 ajax를 구현하다보니 불편하여 jquery에서 ajax 메서드를 제공한것이고
JS ES6부터는 fetch와 같이 편리한 ajax 구현 기능들이 들어 왔다.
즉 제이쿼리의 ajax와 실제 통신기능인 ajax는 동일 언어지만 개념이 다르다
https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch
Ajax , fetch , Axios 에 대한 개념 정리
