React Query json-server에 데이터 업데이트 하기 (patch) 내가 만들고자 한 기능은 작성한 게시물을 수정하는 기능이었다! 입력한 값을 모두 받아서 수정함수에 전달할 것이지만 put을 사용했을 경우 전달되지 않은 필드는 삭제된다고 한다. 그래서 전달되지 않은 필드가 있더라도 필드를 유지하도록 하기위해 patch를 사용했다.\ id와 password, date 필드는 게시글을 처음 작성한 시점부터 변경되지 않고, 유지되어야 하는 정보이기 때문에 수정된 전달 내용에 포함되지 않을 것이므로 patch가 적절하다! 해당 내용은 아래의 블로그를 참고했다! https://redux-advanced.vlpt.us/3/01.html 3-1. json-server 이해하기 · GitBook 3-1 j..
React Query thunk는 보일러 플레이트 코드량이 많고, 비동기 데이터 관리가 어렵다. 그에 비해 Query는 쉽고 직관적이게 사용할 수 있다는 장점이 있다. Query : 데이터에 대한 요청 Mutation : 데이터를 변경 Query Invalidation : Query를 무효화 시키는 것 패키지 설치 yarn add react-query 가장 상위의 컴포넌트인 App.jsx에서 QueryClient를 불러와야 한다. 데이터를 읽어오는 기능을 App 전체에 주입하는 과정이다! const queryClient = new QueryClient(); 데이터 서버는 json-server를 사용할 것이고, 데이터를 불러오는 api는 axios를 사용할 것이다. axios api관련 내용을 전부 넣어놓..
Axios axios는 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다. 즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다. yarn add axios 패키지를 다음과 같이 설치하면 바로 사용가능하다! GET, POST, PATCH, DELETE 등 메서드가 있다. axios.get('url') axios.post('url', todo) axios.delete(`url/${id값}`) 위와 같은 방식으로 사용할 수 있다. Axios Interceptor instance.interceptors.request.use( function (config) { // 요청을 보내기 전 수행 console.log("인터셉트 요청 성공!"); return config; }, f..
axios를 사용해서 데이터를 가져올 경우에 데이터를 가져오는 서버나 주소 값은 노출되어선 안된다! 그래서 .env 파일을 생성해서 git에 올라가지 않도록 해야한다. .env를 작성할 때는 리액트이기 때문에 제일 앞에 REACT_APP_을 꼭 붙여주어야 한다! 그래야지 리액트에서 .env 파일을 읽어올 수 있다고 한다. 그리고 환경변수를 사용할 때는 process.env.환경변수이름 이런 식으로 작성하면 된다! 이렇게 다 작성을 하고, 리액트를 실행시켰는데 계속해서 404 에러가 나타났다. Get을 해오는 주소가 잘못되었다는 내용인 것 같았다. Get을 하는 주소가 http://localhost:4000/todos 로 확인되어야 하는데, 계속해서 앞에 localhost:3000이 붙어서 나온 것이다....
firebase를 컴포넌트로 바로 불러와서 map으로 화면에 뿌려줄 때는 페이지가 뜨자마자 바로 작동했는데, redux에 firebase 데이터를 저장하고 redux store에서 데이터를 불러와서 사용하는 방식으로 바꾸고 난 뒤 리렌더링이 일어나지 않으면 화면에 firebase에서 불러온 데이터가 나타나지 않는 현상이 발생했다. 리렌더링을 일으키면 데이터가 화면에 뿌려진다는 것을 확인하기 위해서 state를 하나 생성해서 setState를 일으키는 버튼을 만들어보았다. const PostList = () => { const posts = useSelector((state) => state.posts); const [num, setNum] = useState(0); console.log(posts); r..
숫자 세자리 마다 콤마 붙이기 toLocaleString() 정규식 toLocaleString() 메서드를 이용했을 때 오류가 있었다. input에서 입력받은 value를 onChange를 이용해서 state에 저장하는 방식에 toLocaleString()을 추가해서 사용해보고자 했지만 잘 동작하지 않았다. { setPrice(event.target.value); }} /> 처음 시도했던 코드가 위의 코드이다. toLocaleString() 메서드를 사용하려면 숫자형식에만 사용이 가능하기 때문에 먼저 parseInt() 를 이용해서 입력받은 값을 string에서 number로 형변환을 했다. 그리고 그 값에 toLocaleString()을 하면 1,234이렇게 네자리까지는 문제 없이 콤마를 찍어준다! 하..
React styled components const StButton = styled.button` cursor: pointer; padding: 10px 49px; margin: 0px 10px 0px 10px; background-color: white; border-radius: 10px; `; styled components를 사용하기 위해서는 먼저 yarn add 로 설치를 해주어야 한다. 그리고 import한 후에 사용할 수 있다. 위의 코드처럼 변수에 원하는 요소이름 앞에 styled를 붙이고 사용하면 된다. 백틱 안에 css요소를 작성하면, 은 이제 해당 스타일이 적용된 버튼으로 보인다. { const deletedtodos = todosStore.filter((item) => item.i..
