4주차 WIL

1. Axios
   Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이고, 동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있다고 한다. 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

특징으로는

브라우저를 위해 XMLHttpRequests 생성
node.js를 위해 http 요청 생성
Promise API를 지원
요청 및 응답 인터셉트
요청 및 응답 데이터 변환
요청 취소
JSON 데이터 자동 변환
XSRF를 막기위한 클라이언트 사이드 지원
등이 있다.

axios 설치

yarn add axios
axios 사용

const callSomethingAxios = () => {
  //첫번째 방법
  axios({
    method: "get",
    url: "http://localhost:5001/sleep_times",
  }).then((response) => {
    console.log(response);
  });
};
React.useEffect(() => {
  callSomethingAxios();
});
//두번째 방법 : 이와같이 get post 요청 메소드 사용(axios.get(),axios.post())
const callSomethingAxios = () => {
  //get
  axios.get("http://localhost:5001/sleep_times").then((response) => {
    console.log(response);
  });
  //post
  let data = {
    day: "일",
    sleep_time: "10:00",
  };
  axios
    .post("http://localhost:5001/sleep_times", data)
    //api,{데이터}, {config}
    .then((response) => {
      console.log(response);
    });
};
//axios가 알아서 json화해서 요청을 보내기 때문

React.useEffect(() => {
  callSomethingAxios();
});

발생했던 문제들
1. 파이어스토어에서 데이터가 삭제되지가 않았다.
리덕스에서는 데이터가 삭제되었는데 파이어스토어에서 데이터가 삭제되지 않아 새로고침을 하면 삭제된 친구들이 살아났다. 미들웨어의 필터 메소드를 잘못이용한 것 같았다.

해결방법
필터 메소드를 잘못 이해하고 있었다. 맨날 코드를 붙여넣기 식으로 짜다보니 이해가 부족했다. 친구에게 필터에 대해 설명을 다시 듣고 코드를 수정하니 작동을 했다. 앞으로 코드를 가져오더라도 완전히 분석하여 이해를 하고 사용해야겠다.