😲CreateAsyncThunk가 필요했던 이유 toastify 라이브러리를 분석해보면 더 좋았겠고.. 실제로 toastify 라이브러리는 코드를 분석해본 사람들도 꽤 많아서 참고해볼 수 있었지만 우선 조금 이상하게라도 최소 기능은 할 수 있는 Toast를 만들어보고 싶었습니다. 다만 다른 사람들의 방식을 참고해보았을때는 이해하기가 조금 힘들었습니다. 따라서 제 방식대로 바퀴의 재발명을 시도해보았는데 제 시행착오 과정은 다음과 같습니다. 1. 우선 useState를 통해 state가 true이면 토스트를 보여줍니다. -> 문제 : 토스트를 여러개 보여주고 싶으면 어떻게 해야할까요? 2. 토스트를 여러개 보여주기 위해 각각의 카드에게 개별적인 이벤트 핸들러를 달아주고 이벤트 핸들러가 눌렸을때 toast C..
👻 Local Storage는 어떻게 설정해줘야할까 https://xionwcfm.tistory.com/313 updateQueryData RTKquery로 클라이언트에서만 쿼리 데이터를 조작하고 싶다면 🙀 이거.. 어떻게 하는거지..? 프로젝트를 진행하던 와중 약간의 난관에 부딪혔습니다. 참고로 프로젝트는 타입스크립트와 리액트로 진행되고 있습니다. 제 프로젝트는 createApi로 생성한 비동기 xionwcfm.tistory.com updateQueryData를 이용하여 이벤트가 발생했을때 서버에 mutation 요청을 보내지않고 클라이언트 측 데이터만 조작하는 것은 성공했습니다. 다만 로컬스토리지가 문제였는데 https://redux-toolkit.js.org/rtk-query/usage/persis..
👻RTK Query 미들웨어를 사용해야 했던 이유 솔로 프로젝트를 진행하던 중 약간의 문제가 있었습니다. API 에 요청을 보내서 데이터를 받아오는데 받아오는 데이터에 일괄적으로 특정 프로퍼티를 추가시켜줘야했습니다. API 데이터를 들어올때 처음부터 조작해줘야하니 모든 응답에 대해 거쳐가는 미들웨어를 만들어주고싶었습니다. 다만 미들웨어 로직을 redux thunk로는 한번 정도 해보았지만 RTK Query가 제공하는 미들웨어는 사용해본적이 없어서 시도해보았습니다. 우선은 이래저래 공식문서를 빠르게 읽으면서 사용법만 대충 익힌 뒤 사용을 했지만 이번 포스트에서는 미들웨어에 대해 차근차근 탐구해보도록 하겠습니다. 간단한 사용법만을 원하시는 분을 위해 먼저 사용법만 간략하게 소개해드리겠습니다. 1. confi..
🙀 이거.. 어떻게 하는거지..? 프로젝트를 진행하던 와중 약간의 난관에 부딪혔습니다. 참고로 프로젝트는 타입스크립트와 리액트로 진행되고 있습니다. 제 프로젝트는 createApi로 생성한 비동기 요청 데이터를 가지고 화면에 뿌려주는 형태입니다. RTK Query를 통해 비동기 데이터를 받아오는 로직을 작성했습니다. 그런데 약간의 문제가 생겼습니다. 서버를 따로 두지 않는 작은 프로젝트인 탓에 클라이언트측의 데이터 변화를 useMutation을 통해서 서버에 변화된 데이터를 전송 -> 서버에서 업데이트 -> 다시 서버에게 데이터를 받아 클라이언트도 업데이트 와 같은 로직으로만 업데이트하는 것을 상상했는데 클라이언트측에서만 비동기 데이터를 조작해야하는 상황이 있었습니다. 예컨대 이 bookmark의 boo..
ReduxToolkit Query에 대해서 잘 정리된 문서 / 영상을 찾아보기가 굉장히 힘들었고 특히 한국어로 되어있는 양질의 문서는 거의 전멸에 가까운 수준이었습니다. 그나마.. 영미권 유튜브로 눈길을 돌려보면 좋은 자료들이 있었지만 그럴바에는 그냥 잘 정리된 공식문서를 보면서 해나가는 게 낫겠다.라는 결론을 내렸습니다. 제목이 Slow Start인 이유는 공식문서를 따라가며 천천히 각 기능들을 파악하는 시간을 가지면서 시작을 하고 싶은 사람(저같은 사람)들을 위해 작성했기 때문입니다. 🐕 공식문서를 따라서. https://redux-toolkit.js.org/tutorials/rtk-query RTK Query | Redux Toolkit redux-toolkit.js.org RTK Query를 사용..
🐕 Redux Redux는 상태관리 라이브러리이며 리액트에 종속되는 라이브러리가 아닙니다. 따라서 리액트 환경 뿐만 아니라 다양한 환경 심지어는 바닐라 자바스크립트에서도 리덕스를 사용할 수 있습니다. 리덕스는 하위 컴포넌트의 상태 공유를 위해서 상태 끌어올리기와 props drilling을 반복해야한다는 리액트의 구조에서 기인한 문제점을 해결해줍니다. 컴포넌트의 깊이가 깊지 않은 경우에는 props를 사용해서 상태를 내려주는 것도 상태 끌어올리기를 통해 서로 다른 하위 컴포넌트에서 사용해야 할 상태를 상위 컴포넌트에서 관리하는 것 또한 그리 귀찮지 않은 범위에서 가능하지만 구조의 복잡도가 심해지고 깊이가 깊어질수록 이런식의 데이터흐름은 복잡도가 올라갑니다. 어느정도의 시점까지는 필요한 상태를 최대한 가까..
🐕 redux 리덕스는 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리 시켜서 효율적으로 관리할 수 있도록 도와주는 라이브러리입니다. 또한 컴포넌트끼리 똑같은 상태를 공유해야 할 때에도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트 할 수 있게 도와줍니다. 리덕스 라이브러리는 위와 같은 설명을 보았을때 알 수 있듯이 전역 상태를 관리할 때 매우 효과적인 대안 중 하나입니다. ContextAPI를 기반으로 만들어진 리덕스는 일반적인 전역 상태 관리를 위한 목적으로만 사용한다면 ContextAPI를 이용하여서도 충분히 비슷하게 구현할 수 있습니다. ContextAPI에 대한 내용을 정리한 포스트가 있으니 ContextAPI가 궁금하시다면 아래 링크를 참고하세요 https://xion..
