what to do
23.02.20-23.02.23 주특기 심화 주차 / React, Todo-list
23.02.24-23.02.26 미니프로젝트 주차 / mini-project
Axios
http를 이용해서 서버와 통신하기 위해 사용하는 패키지로 데이터는 서로 약속한대로 주고 받아야 한다. json server도 server이기 때문에 이 약속된 방법이 존재한다.
방법에는 크게 path방법과 query 방법이 있다.
이때 주의 점은 Axios의 경우 GET 요청을 도와주는 패키지이므로 어떻게 불러올지는 사용자인 내가 정해주어야 한다.
다음과 같이 사용해볼 수 있다.
axios.post('http://localhost:4000/todos', inputValue);
‘ ’ 안의 주소에서, inputValue를 post요청 해줘! 라고 말하는 코드이다.
axios.delete(`http://localhost:4000/todos/${id}`);
${id}에 따라 바뀔 ’ ‘ 안의 주소에서, delete 요청 해줘! 라고 말하는 코드이다.
Axios interceptor
주소를 정의하고 가져왔으나, 만약 그 주소가 100개이상이라면?
혹은 console.log()로 확인하고자 하는 값이 100개 이상이라면?
번거로움을 덜고, 요청이 처리되기전 혹은 응답의 처리 전(실패/성공) 코드에 관여하기 위해 사용되어진다.
api.js 파일 생성 후 다음과 같이 정의해보자.
const instance = axios.create({ baseURL: "http://localhost:4000", });
이렇게 정의할 경우 앞서 보았던 코드를 간략하게 수정할 수 있다.
axios.post('http://localhost:4000/todos', inputValue);
⬇️
api.post(‘/todos', inputValue);
request, reponse에 적용시켜보기
경우의 수가 2가지 있으므로 콜백함수도 2가지를 작성하자.
instance.interceptors.request.use(
function (config) { // 콜백함수 : 요청을 보내기 전 수행하는 부분
console.log("인터셉트 요청 성공!");
return config;
},
function (error) { // 콜백함수 : 오류 요청을 보내기 전 수행하는 부분
console.log("인터셉트 요청 오류!");
return Promise.reject(error);
}
);response도 마찬가지이다.
금주회고
지난주 목표 : 주어진 리액트 심화주차 Lv4 완성 및 3주간 배운 내용 복습
➕ 일찍 완료했다면 Lv5 도전
지난주 목표 달성률 65/100
Lv4 과제를 thunk와 react-query 두가지를 다 이용한 과제를 해보고 싶었으나 thunk가 어려워 시간이 부족해 thunk밖에 구현하지 못하였고, 배포 과정에서 db배포에 오류가 발생해 배포하지 않고 github만 제출함..
Lv5는 진행하지 못함
금주 목표 : 미니 프로젝트 완성...
