😲CreateAsyncThunk가 필요했던 이유 toastify 라이브러리를 분석해보면 더 좋았겠고.. 실제로 toastify 라이브러리는 코드를 분석해본 사람들도 꽤 많아서 참고해볼 수 있었지만 우선 조금 이상하게라도 최소 기능은 할 수 있는 Toast를 만들어보고 싶었습니다. 다만 다른 사람들의 방식을 참고해보았을때는 이해하기가 조금 힘들었습니다. 따라서 제 방식대로 바퀴의 재발명을 시도해보았는데 제 시행착오 과정은 다음과 같습니다. 1. 우선 useState를 통해 state가 true이면 토스트를 보여줍니다. -> 문제 : 토스트를 여러개 보여주고 싶으면 어떻게 해야할까요? 2. 토스트를 여러개 보여주기 위해 각각의 카드에게 개별적인 이벤트 핸들러를 달아주고 이벤트 핸들러가 눌렸을때 toast C..
😍createPortal은..? https://react.dev/reference/react-dom/createPortal createPortal – React The library for web and native user interfaces react.dev 공식문서를 참고할 수 있습니다. createPortal은 일부 자식들을 DOM의 다른 부분으로 렌더링할 수 있는 기능을 제공합니다. 편의상 vite, cra 등 보일러플레이트를 사용해 리액트 프로젝트를 구성했다고 가정하고 진행하겠습니다. 리액트로 구성한 프로젝트는 기본적으로 보통 index.jsx 혹은 main.jsx 와 같은 엔트리포인트에서 위와 같이 렌더를 시켜줍니다. import ReactDOM from 'react-dom/client'; ..
👻 Local Storage는 어떻게 설정해줘야할까 https://xionwcfm.tistory.com/313 updateQueryData RTKquery로 클라이언트에서만 쿼리 데이터를 조작하고 싶다면 🙀 이거.. 어떻게 하는거지..? 프로젝트를 진행하던 와중 약간의 난관에 부딪혔습니다. 참고로 프로젝트는 타입스크립트와 리액트로 진행되고 있습니다. 제 프로젝트는 createApi로 생성한 비동기 xionwcfm.tistory.com updateQueryData를 이용하여 이벤트가 발생했을때 서버에 mutation 요청을 보내지않고 클라이언트 측 데이터만 조작하는 것은 성공했습니다. 다만 로컬스토리지가 문제였는데 https://redux-toolkit.js.org/rtk-query/usage/persis..
👻useState의 setState 타입을 어떻게 설정해야할까? 이런 부분들은 이해가 어렵다기보다는 자주 사용하지 않다보면 기억이 안나는 경우가 많은 것 같습니다. 간단하게 예제를 작성 하면서 알아보도록 하겠습니다. import {useState} from 'react' import HiReactItems from '대충 경로' const HiReact = () => { const [state, setState] = useState(false) return ( ) } 이렇게 작성은 해두었는데... 이걸 쉽게 생각을해서 타입을 받는다 치면 interface StateProps { setState: (state:boolean) => void } 이렇게 작성을 할 수 있겠죠? 하지만 좀 더 타입을 멋지게 작성..
👻RTK Query 미들웨어를 사용해야 했던 이유 솔로 프로젝트를 진행하던 중 약간의 문제가 있었습니다. API 에 요청을 보내서 데이터를 받아오는데 받아오는 데이터에 일괄적으로 특정 프로퍼티를 추가시켜줘야했습니다. API 데이터를 들어올때 처음부터 조작해줘야하니 모든 응답에 대해 거쳐가는 미들웨어를 만들어주고싶었습니다. 다만 미들웨어 로직을 redux thunk로는 한번 정도 해보았지만 RTK Query가 제공하는 미들웨어는 사용해본적이 없어서 시도해보았습니다. 우선은 이래저래 공식문서를 빠르게 읽으면서 사용법만 대충 익힌 뒤 사용을 했지만 이번 포스트에서는 미들웨어에 대해 차근차근 탐구해보도록 하겠습니다. 간단한 사용법만을 원하시는 분을 위해 먼저 사용법만 간략하게 소개해드리겠습니다. 1. confi..
🙀 이거.. 어떻게 하는거지..? 프로젝트를 진행하던 와중 약간의 난관에 부딪혔습니다. 참고로 프로젝트는 타입스크립트와 리액트로 진행되고 있습니다. 제 프로젝트는 createApi로 생성한 비동기 요청 데이터를 가지고 화면에 뿌려주는 형태입니다. RTK Query를 통해 비동기 데이터를 받아오는 로직을 작성했습니다. 그런데 약간의 문제가 생겼습니다. 서버를 따로 두지 않는 작은 프로젝트인 탓에 클라이언트측의 데이터 변화를 useMutation을 통해서 서버에 변화된 데이터를 전송 -> 서버에서 업데이트 -> 다시 서버에게 데이터를 받아 클라이언트도 업데이트 와 같은 로직으로만 업데이트하는 것을 상상했는데 클라이언트측에서만 비동기 데이터를 조작해야하는 상황이 있었습니다. 예컨대 이 bookmark의 boo..
zero install 사용시 # /.gitignore .yarn/* !.yarn/cache !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions zero install 미사용시 # /.gitignore .pnp.* .yarn/* !.yarn/cache !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions
🐕 아마존 웹 서비스 (aws) 아마존 웹 서비스(AWS)란 아마존닷컴의 클라우드 컴퓨팅 사업부에서 제공하는 클라우드 컴퓨팅 서비스라고 할 수 있습니다. AWS에는 컴퓨팅, 스토리지, 데이터베이스, 분석, 네트워킹, 모바일, 개발자 도구, 관리 도구, IoT 보안, 엔터프라이즈 애플리케이션 등 다양한 서비스가 제공되고 있고 필요에 따라 운영체제, 웹 서버, DB, 서버 등까지도 통째로 빌려 사용할 수 있는 서비스입니다. 또한 모든 서비스를 API로 제어할 수 있다는 점이 특징이며 기본적으로 HTTP, REST, SOAP로 이루어지게 됩니다. Management Console이 제공되며 이것을 통하여 제품들을 클릭 몇번으로 간단하게 제어하는 것도 가능합니다. 이처럼 AWS에서 제공하는 다양한 기능들을 잘 ..
