Library] Axios

Axios

Node.js와 브라우저를 위한 HTTP 비동기 통신 라이브러리로서, Promise 타입입니다.

BackEnd ↔ FrontEnd 사이의 통신하는 수단으로, JS에서 주로 사용되는 ajax나 fetch와 같다고 보면 됩니다.

 

• Promise기반이라 데이터를 다루는데 편리함
• Response가 자동으로 JSON형태로 변경
• CSRF보호 기능이 내장
• 기본적으로 내장된 것이 아니기 때문에 따로 설치가 필요

등으로 볼 수 있을 것이다. fetch와 ajax를 보완한 라이브러리로 볼 수 있습니다.

 

CSRF(XSRF) : 웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(CRUD  등)를 특정 웹사이트에 요청하게 하는 공격

 

 

---

 

 

설치

npm install axios

yarn add axios

 

 

---

 

 

문법

기본 구성

axios({
  url: 'http://localhost:3000/account/user',	
  method: 'get'
  data: {
    email: 'wanga@naver.com'
    }
})
.then((response)=>{
  console.log(response);
});

큰 틀에서 봤을 때, 크게 다를 것 없는 문법입니다.

 

 

---

 

 

Request

자주 사용하는 옵션

• url : 통신할 서버 주소
• method : 요청 방식(get, post, patch, put, delete)
• data : get을 제외한 요청방식에서 body에 보내는 데이터
• params : query string을 객체로 담아주는 데이터
• headers : 요청 헤더
• withCredentials : cross-site access-control 요청을 허용 유무. true시 cross-origin으로 쿠키값 전달
• xsrfCookieName : xsrf 토큰 값으로 사용할 쿠키의 이름. default는 'XSRF-TOKEN'.
  보통 'csrftoken'으로 값을 주는 듯하다.
• xsrfHeaderName: xsrf 토큰 값을 운반하는 HTTP 헤더의 이름으로 BE와 맞춰야 된. default는 'X-XSRF-TOKEN'
  보통 'X-CSRFToken'으로 값을 주는 듯하다.

withCredentials
FE와 BE의 서버가 다르면 서로 쿠키를 생성하거나 전달할 수 없기 때문에 사용됩니다.
따라서 Client에서도 요청 보낼 때 해당 옵션은 true로 줘야 되지만, 서버에서도 Access-Control-Allow-Credentials 헤더를 true로 줘야 됩니다.

 

알아두면 좋을 듯한 옵션

• baseURL : url을 상대경로로 사용할 때, 앞에 붙는 주소
  http://localhost:3000/account/user를 예로 들어,
  baseURL이 http://localhost:3000/account/ 여기까지라고 가정하고, url은 /user이라고 해서
  최종적인 url이 http://localhost:3000/account/user 이게 된다.
• responseType : default는 json이라 바꿀 경우가 많지는 않지만 혹시나 바꾸게 된다면 설정
  text, blob, arraybuffer 등...
• timeout : 요청이 설정된 시간보다 길어지게 되면 요청을 취소.
• validateStatus : HTTP응답 상태코드에 대해 resolve 또는 reject를 지정할 수 있음.

더 많기는 하지만, 따로 사용해 볼 때마다 추가해도 될 듯싶습니다.

 

 

---

 

 

Response

.then으로 찍어서 response로 받아 객체에 담긴 데이터입니다.

내용은 request 할 때랑 달리, 그냥 console.log(response) 찍어보면 다 나오기 때문에 필요한 거 가져다 쓰면 됩니다.

 

 

---

 

 

method 단축 사용법

get, post, put, patch, delete를 option에 method로 주지 않고 함수형식으로 간결하게 사용할 수 있습니다.

axios.get(url, {option});
axios.delete(url, {option});

axios.post(url, {data}, {option});
axios.put(url, {data}, {option});
axios.patch(url, {data}, {option});

 

delete의 경우, queryString로 보내기에 부담스럽거나 어려움이 있을 때, option에 data로 담아서 보내면 됩니다.

 

 

---

 

 

기본적으로 axios에 대한 사용 설명입니다.
React를 하면서는 axios 외에는 잘 안 쓰는 듯하다. 바닐라JS할떄는 fetch랑 ajax를 주로 썼던 거 같은데..

추가적으로 instance, 이미지 다운로드, default값 설정, interceptors, 에러 핸들링(validateStatus) 등
다뤄보면서 공부할 예정입니다.