2월 23일 여정 46일차이다.

오늘은 간단하기 axios와 fetch에 대해 알아보고자 한다.

오늘의 Today I Learned

1. Axios

axios란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다.
즉 http를 이용하여 서버와 통신하기 위해 사용하는 패키지이다.

Axios GET

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
// config는 axios 공식문서에서 확인하세요.

axios.get(url[, config]) // GET

위는 axios에서 조회를 할때 사용한다.

일단 조회를 하기 전에 API 명세서를 확인해야 한다. API 명세서안에는 어떤 방식으로 요청해야 하는지에 대해 적혀 있다.
즉, Axios는 GET 요청을 할 수 있도록 도와주는 패키지일뿐이지, “어떻게 요청을 해야하지?” 와 같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 한다는 뜻이다. 예를 들어 GET 요청을 할 때 path variable로 해야할지, query로 보내야할지는 API를 만든 사람이 하라는대로 해야 하기 때문이다.

Axios POST

axios.post(url[, data[, config]])   // POST

post는 보통 서버에 데이터를 추가할 때 사용한다. 다만 post 요청에 대한 로직은 BE 개발자가 구현하는 것이기때문에 추가외에 다른 용도로 사용될 수 있지만, 보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용한다. 아래 코드를 작성하기에 앞서, GET 에서 본 것과 같이 API 명세서롤 보고 와야 한다.

post 요청을 보냈을 때는 브라우저의 네트워크 탭에는 어떤 로그가 생기는지 확인해야한다. 네트워크 쪽 개발을 할 때는 항상 브라우저에 있는 네트워크 탭을 확인하면서 개발을 진행해야 한다. 어떤 문제가 생겼을 때 이정보를 통해 디버깅을 할 수 있기 때문이다. BE개발자가 구현을 해놓지 않았다면 문맥과 다른 status code가 브라우저에 보일 수 있다.

보낸 내용은 payload의 body에서 확인이 가능하며 respnse에서는 보낸 post에 요청에 대한 서버의 응답값을 확일 할 수 있다.

Axios DELETE

DELETE는 저장되어 있는 데이터를 삭제하고자 요청을 보낼 때 사용합니다.

axios.delete(url[, config])  // DELETE

DELETE 역시나 어떤 로그가 보이는지 네트워크 탭을 확일할 필요가 있다.

Axios PATCH

axios.patch(url[, data[, config]])  // PATCH

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드이다. 다만, 이것은 http 환경에서 서로가 한 약속이자 문맥이기때문에, 수정을 하고자 반드시 patch, put 을 써야만 하는 것은 아니다. BE에 의해서 POST를 통해서 “수정" 이라는 기능은 충분히 만들 수 있기 때문이다. 다만 이러한 약속들을 대부분의 개발자들이 지키고 있다는 점을 알아야 될 필요성이 있따.

마지막으로

앞으로 axios를 많이 쓸 것 같다...