Redux Toolkit
- 리덕스를 더 편하게 쓰기위한 기능들을 흡수해서 만든 패키지이다.
이전 주차(숙련)에서 배웠던 createStore 대신 configureStore를 사용하여 가독성과 간결성을 높임.
createSlice를 사용하여 action creator,value,reducer를 한번에 담아준다.
JSON Server
- mock data를 만들어 사용할 수 있는 패키지.
Axios
- Promise기반 HTTP 클라이언트 라이브러리다.
fetch,axios 차이
1)fetch
fetch(url)
.then((res) => res.json())
.then(console.log)fetch().then을 한 상태여도 res.json()을 한번 더 해주는 과정이 필요하다.
2)axios
const url = "https://www~~~"
axios.get(url).then((res) => console.log(res.data))응답(res)를 기본적으로 JSON포맷으로 제공한다.
thunk
- 리덕스에서 많이 사용하고 있는 미들웨어중 하나이다.
- thunk를 사용하면 dispatch를 할때 객체가 아닌 함수를 사용할 수 있다. ( dispatch(함수) )
(중간에 하고자 하는 작업을 함수에 넣을 수 있다.) - 리덕스 미들웨어를 사용하게 되면, 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 더 할 수 있다.
Custom Hook
- 반복적으로 사용되는 기능적인 함수를 여러곳에서 사용하기 위해 만드는것
React Query
Query
- 어떤 데이터에 대한 요청(get)
Mutation
- 어떤 데이터를 변경하는것
Query Invalidation
- 기존의 쿼리를 무효화 시킨다는 의미(최신 데이터를 업데이트한다)
인증(Authentication)/인가(Authorization)
- 인증 : 서비스를 이용하는 유저가 등록된 회원인지 확인하는 절차
- 인가 : 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차
CORS?
- Cross Origin Resource Sharing(CORS)는 다른 출처에 리소스를 요청하는것을 허용하는 정책이다.
(서버-클라이언트 API요청)
세션/토큰
- 세션 : 서버에서 인증정보를 저장하는것
- 토큰 : 클라이언트에서 인증정보를 저장하는것 (보안성에서 취약하다)
⌛️ 심화주차에선 thunk, react query등 접해보지 못했던부분에 대해 배워서 한번 완강한다고 다 이해하지는 못할거 같고 여러번 들어야 머릿속에 들어올거 같다. 개념은 정리했으나, 아직 이해까지는 하지 못했기에 몇번 더 봐야할거 같고 Toolkit으로는 이전에 사용하여 TodoList를 만든적이 있는데 다시 한번 개념을 듣게 되어 나름 정리가 되었다. 심화주차에선 완벽하게 이해하지 못했기에 해당 게시물은 천천히 보충해 나가야할거같다.
