10월 셋째 주는 리덕스 툴킷과 axios를 활용해서 게시글과 댓글의 CRUD 기능 구현을 연습해봤던 주 였다. 리덕스에서 뒤통수 한대 맞고나서 리덕스 툴킷은 어떨까하고 긴장이 꽤 됐었는데 리덕스를 여러번 사용해본 상태로 리덕스 툴킷을 공부하니 오히려 쉬웠던 기억이난다. 또 직접 구동, 배포한 json-server에 요청을 더 쉽고 간결하게 하기 위해서 JS의 fetch를 뒤로하고 axios를 사용해봤다.

Axios

일단 Axios 라고 하면 HTTP request 모듈 혹은 라이브러리이다. 이전에 다뤄봤던 ES6 문법 중 Promise API를 지원한다. then, async, await 키워드를 모두 사용할 수 있어서 깔끔하고 쉽게 HTTP request를 할 수 있다.

설치방법

npm으로 yarn 설치 후
yarn add axios 로 axios를 설치해줬다.

주로 get과 post요청을 많이 하게됐는데 사용방법은 아주 간단했다. 그냥 axios.get() 혹은 axios.post() 이런 식으로 작성하게 되면 axios 내장 메서드가 자동으로 불려서 해당하는 요청을 할 수 있게 해준다.
로컬환경에서 구동한 json-server는 localhost:3001 였으므로, 만약 해당 서버의 댓글들을 조회하고 싶다면

axios.get('http://localhost:3001/comments')

json-server는 base URL 뒤에 테이블 이름을 붙여주면
해당하는 테이블을 조회 할 수있는 api url이 되도록
설계가 되어있는 것 같다.

단순히 이런식으로 작성하기만 하면 성공적으로 get 요청을 보낼 수 있다. 만약 get요청에 의한 response를 변수에 저장하고 싶다면

const data = axios.get('http://localhost:3001/comments');

이런 식으로 담으면 된다...!

또한 Axios Instance를 사용해서 공통되는 url이나 헤더 부분의 중복 작성을 방지 할 수도 있다.