aotoyae

💡 디바운싱을 쉽게 구현해 줄 라이브러리를 사용해보자. npm i --save lodash or yarn add lodash import { useState, useCallback } from "react"; import "./App.css"; import _ from "lodash"; function App() { const [searchText, setSearchText] = useState(""); const [inputText, setInputText] = useState(""); const handleSearchText = useCallback( _.debounce((text) => { setSearchText(text); }, 2000), // 2초뒤 실행 [] ); const handleCh..

💡 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 ex) 좋아요를 엄청 많이 누를 때 ~ ✳️ Throttling : 주로 무한스크롤에 사용 게임 중 공격 버튼을 마구 누르는데 일정 시간 동안 한 발씩 발사될 때!! 쓰롤링이 실행 된 것이다. 이렇게 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 한다. ✳️ Debouncing : 주로 입력값 실시간 검색, 화면 resize 이벤트에 사용 전등 스위치 버튼 누르면 불이 깜빡이다가 켜지는 것! 디바운싱이 실행된 것이다. 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(..

💡 리액트 쿼리에 대해 알아보자. ✳️ 기존 미들웨어의 한계 다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk, Redux-saga 등 미들웨어를 채택해 사용할 수 있지만, 다음과 같은 문제가 있다. 보일러 플레이트 : 코드량이 너무 많다. 규격화 문제 : Redux 는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. ✳️ 리액트 쿼리의 강점 : 너무 쉽고, 책임에서 자유롭다. 보일러 플레이트 만들다가 오류날 일이 없다. 내가 만든 부분이 아니니 잘못이 일어나도 내 잘못이 아니다. 사용방법이 기존 thunk 대비 너무 쉽고, 직관적! ✳️ 주요 키워드 Query : 어떤 데이터에 대한 요청을 의미 - axios 의 get Mutation : 어떤 데이터(데이터 그룹 자체)..

😇 useMemo 를 쓰지 않는데 자꾸 관련 에러가 뜨는 상황 얼마 전엔 잘 됐었잖아 너..? 사실 devToolsEnhancer 로 시작된 에러였는데 devToolsEnhancer 를 지우니 useMemo 에러가 떴다. 해결 방법은 npm i redux react-redux 를 다시 해주는 것.. 그리고 지웠던 devToolsEnhancer 도 살려보니 에러 없이 잘 작동했다. 이러고 며칠 뒤 또 다른 에러가 뜰지도.. 🔗 https://stackoverflow.com/questions/72095900/typeerror-cannot-read-properties-of-null-reading-usememo

📝 문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 3 3개 번호가 일치 5 2개 번호가 일치 6(낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. ..

💡 Custom Hooks 을 사용해 보자. 기존 input 값을 받아오던 방식 import { useState } from "react"; function App() { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const onChangeName = (e) => { // 패스워드 관리 함수와 똑같이 생겼다 setName(e.targe.value); }; const onChangePassword = (e) => { // 네임 관리 함수와 똑같이 생겼다 setPassword(e.targe.value); }; return ( Custom Hooks ); } export default App; 반복되는 ..

2024.02.19 - [React] - [React] Redux Thunk : 미들웨어 [React] Redux Thunk : 미들웨어 💡 미들웨어에 대해 알아보자. 미들웨어가 없을 때 ➡️ 액션 - 리듀서 - 스토어 리덕스에서 dispatch 를 하면 action 이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 여기서 미들웨어를 aotoyae.tistory.com 💡 thunk 함수를 한번 더 구현해보자! thunk 함수 구현 리듀서 로직 구현 : reducers ➡️ extraReducers 서버 통신 : 100% 성공 ❌ (불확실) 지금까지의 redux state - todos, counter 앞으로의 state - isLoading, is Error, Data 기능 확인 : ne..