1. Thunk란? 리덕스의 액션에서 비동기 처리를 할 수 있게 해준다. 2. 사용법 리덕스 설치 및 thuck 설치 npm install @reduxjs/toolkit react-redux npm install redux-thunk store에 추가 해주기 import { applyMiddleware, legacy_createStore as createStore } from 'redux'; import { reducer } from '../Reducers'; import ReduxThunk from 'redux-thunk'; const store = createStore(reducer, applyMiddleware(ReduxThunk)); export default store; thunk를 사용하면 액..

1. 최종 완성 모습 2. 어려웠던 점 2-1. json server와 연결하기 위한 수정 데이터를 state에만 관리 했는데 json server를 사용해 목업서버에 데이터를 저장하게 수정을 하게 되었다. 근데 패치를 리덕스의 과정 중 어디에 넣어야할지 잘 모르겠어서 어려웠다. 해결방안 fetch 함수-> 응답 -> 데이터 가공 -> dispatch-> action-> reducer 순으로 작성했다. 좀 더 알아 보니깐 일반적으로 미들웨어, redux-thunk를 사용해서 비동기 작업을 하는 것 같다.. 나중에 시간되면 다시 수정해야할 것 같다ㅜ 2-2. josn server의 patch ptach 메서드로 데이터를 보내니깐 응답이 `{}`으로 왔다. 해결방안 바디에 데이터를 잘 못 보내서 발생한 문제..

1. CORS CORS는 Cross-Origin Resource Sharing의 줄임말로, 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 보통 웹 사이트는 동일한 출처의 리소스는 자유롭게 접근할 수 있지만, 다른 출처의 리소스는 보안상의 이유로 접근이 제한된다. 이를 해결하기 위해 웹 서버에서는 Access-Control-Allow-Origin 헤더를 사용하여 허용된 출처의 목록을 설정하고, 웹 브라우저는 이 헤더를 확인하여 해당 출처에서만 리소스에 접근할 수 있도록 제한한다. 이를 통해 보안상의 문제를 예방할 수 있다. 출처 웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(..

useFetch fetch 할 때 반복되는 코드를 커스텀 훅으로 만들어 활용할 수 있다. import { useState, useEffect } from 'react'; const useFetch = (url) => { const [data, setData] = useState(null); const [isPending, setIsPending] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch(url, { // get의 경우 헤더를 작성하지 않아도 괜찮 headers: { "Content-Type" : "application/json", Accept: "application/json" } }) .then..