12/18 WIL

React Axios

 

Axios 란?

공식문서에 따르면 axios란 node.js 와 브라우저를 위한 promise 기반 http 클라이언트 라고

소개하고 있습니다. 다시말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고

생각하시면 됩니다.

 

Axios 설치 후 json-server 설정 ( 테스트용 db.json 설정 )

 

Axios get

get 은 서버의 데이터를 조회할 때 사용합니다. 기본적인 사용방법은 아래와 같습니다.

( url에는 서버의 url 이 들어가고 config에는 기타 여러가지 설정을 추가할수 있습니다.

  config 는 axios 공식문서에서 확인하세요. )

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

https://axios-http.com/kr/docs/req_config ( Axios config 공식문서 )

 

우리가 사용하는 json-server API 명세서 확인하기 

우리가 Axios 를 사용해서 GET 요청 코드를 작성하기에 앞서, 어떤 방식으로 요청 해야할지는

우리가 사용하는 json-server의 방식을 알아보아야 합니다.

다시말해, Axios는 GET 요청을 할 수 있도록 도와주는 패키지일뿐, "어떻게 요청 해야하지?"와

같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 한다는 뜻 입니다.

예를 들어 GET 요청을 할 때 vath variable로 해야할지, query로 보내야 할지는 API를 만든 사람이 하라는대로

해야 하기 때문입니다.

 

json-server의 공식 문서를 보면, 전체 정보나 상세 정보는 아래와 같이 path variable로 url을 작성해야합니다.

그리고 filter와 같은 기능을 위해서 GET 요청을 하고자 할 때는 query 로 보내라고 명시하고 있습니다.

 

 

Axios POST

 

post는 보통 서버에 데이터를 추가할 때 사용합니다. 

다만 post 요청에 대한 로직은 BE개발자가 구현하는 것이기때문에 추가외에 다른 용도로 사용 될 수 있지만,

보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용합니다. 

아래 코드를 작성하기에 앞서, GET 에서 본 것과 같이 json-server POST 요청 방식을 확인해야 합니다.

 

 

Axios delete

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

 

 

Axios patch

 

patch는 보통 어떤 데이터를 수정하고자 서버에 요청을 보낼 때 사용하는 메서드 입니다.

다만, 이것은 http 환경에서 서로가 한 약속이자 문맥이기 때문에,

수정을 하고자 반드시 patch,put을 써야만 하는것은 아닙니다.

BE에 의해서 POST를 통해서 "수정" 이라는 기능은 충분히 만들 수 있기 때문입니다.

다만 이러한 약속들을 대부분의 개발자들이 지키고 있습니다.

 

정리

Axios를 이요해서 API 서버와 통신할 수 있다.

Axios는 http 통신을 도와주는 패키지이며, 구체적인 명세는 API 명세를 확인해야 한다.

브라우저 네트워크 탭을 잘 봐야 한다.

http method, status code와 같은 정보들은 BE개발자가 구현해주는 부분이며,

약속이자 문맥이므로 BE와 FE간의 커뮤니케이션이 잘 되어야 한다.

네트워크 통신 이후, 화면을 업데이트 하고자 한다면 별도로 FE 에서 추가로 구현해야 한다.