23.02.17-23.02.23 주특기 심화 주차 / React
주요 일정
2월 23일(목) ~21시 개인 심화주차 과제 제출
2월 23일(목) ~21시 팀 과제 노션 작성 제출
Redux Toolkit
리덕스툴킷이란 리덕스의 구조와 패러다임을 가졌지만, 코드 양을 줄이기 위해 API를 추가하였고, 코드작성이 편리해진 하나의 도구이다.
yarn add react-redux @reduxjs/toolkit
먼저 위 명령어로 리덕스 툴킷을 설치하자.
만들었던 todo_ver2에서는 추가, 삭제, 취소, 완료에 대해 action value를 선언하고, action creator를 만들어 reducer안에 해당하는 동작을 넣어주었다.
redux-toolkit의 경우 configStore자체가 toolkit안에 API로 포함되어있다.
따라서 Slice라는 API를 사용하면 객체-리듀서-키,밸류 값을 한번에 만들고, 넣어 줄 수 있게 된다.
즉, reducer, ction value, action creartor를 따로 만들 필요가 없게 되는 것이다.
json server
간단한 DB와 API를 만들어 주는 패키지로, 사용 목적은 실제 데이터 및 서버가 구축되기 전, 임시적으로 사용할 mock data를 생성하고자 함에 있다.
yarn json-server --watch db.json --port 3001
위 명령어로 서버를 실행할 수 있으며, 생성되는 주소는 다음과 같다.
http://localhost:3001/todos
따라서 3001의 경우 변경 가능하다.
3001/todos에서 todos의 경우 배열형태를 가진 데이터리스트의 이름이다.
3001을 불러올 경우 json에 저장된 모든 데이터를 3001/todos의 경우 여러 데이터중 todos라는 이름의 데이터만 불러오게 된다.
※ 주의 : 실행시 react, json 각각을 실행해 주어야 한다.)
HTTP
- 서버와 클라이언트 간의 대화 : 웹통신
- 프로토콜 : 약속
따라서 웹에서 서버와 클라이언트 간의 상호간 약속을 HTTP프로토콜 이라고 한다.
client는 request(요청)하고, server는 response(응답)한다.
메서드는 GET, POST, PATCH, DELETE, PUT 등이 있으며 용도에 따라 사용하면 된다.
상태코드의 경우 크게 다음과 같이 나누어 볼 수 있다.
- 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다.
- 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용하였습니다.
- 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요합니다.
- 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없습니다.
- 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패했습니다.
우리가 잘 알고 있는 404 error 의 경우 요청을 처리할 수 없는 클라이언트 오류인 셈이다.
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도 마찬가지이다.
