전체 글67 [리액트]중복 검색 요청 방지를 위한 debouncing 적용 페이지에서 검색 버튼을 연속으로 클릭할 경우, 여러 번의 검색 요청이 발생하여 잘못된 검색 결과를 반환하는 문제가 발생했다. 이 문제를 해결하기 위해 debouncing을 적용하였다. 🎈 Debouncing 이란?? 짭은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막(또는 가장 처음) 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것 => 특정 이벤트가 발생할 때 작동하는 비즈니스 로직이 과도하게 작동하는 것을 방지 import { debounce } from "lodash"; const searchButtonClickHandler = useCallback( debounce(() => { if (keyword.trim() === "") { s.. 2023. 6. 27. 새로고침하면 휘발하는 redux, redux-persist 로 유지하기 로그인 정보를 redux-toolkit을 사용해 전역으로 관리하였다. 로그인 직후에는 정상 작동되었지만 새로고침시 리덕스의 데이터가 휘발되는 문제가 발생하였다. 이를 해결하기위해 토큰 정보처럼 localStorage나 sessionStorage에 저장해 필요할 때마다 꺼내 사용하는 redux-persist를 사용하였다! 1. 설치 yarn add redux-persist 2. reducer에 persist store 정의 나는 sessionStorage에 저장하기 위해 import storageSession from 'redux-persist/lib/storage/session 를 사용했다. import { combineReducers, configureStore, getDefaultMiddleware,.. 2023. 6. 9. [React] 리액트에서 이미지 파일과 json data를 함께 formData에 넣어 전송(post) 회원가입페이지를 만들면서 회원정보와 프로필사진(이미지 파일)을 함께 formData에 보내주어야 하는 경우가 생겼다. FormData은 HTML 폼 데이터로, 폼의 각 필드와 값을 나타내는 키/값 쌍들의 집합을 쉽게 구성할 수 있는 방법을 제공한다. 바디에 FormData 객체를 넣으면, HTTP 메시지는 인코딩되고, Content-Type 속성은 multipart/form-data로 지정한 후에 데이터가 전송된다. FormData에 ”profile”과 ”signup”에 각각 파일과 이메일 닉네임, 등의 데이터를 담아 보냈더니 에러가 발생했다. 알고보니 파일은 multipart/form-data로, 그 외 json 데이터들은 application/json 형식으로 따로 보내야했다. Blob(Binary .. 2023. 5. 31. 리덕스툴킷(redux-toolkit)으로 리액트 로그인 프로젝트를 진행하면서 전역변수로 저장할 만한 것이 생겼다. 우리는 로그인 여부에 따라 보이는 헤더가 달라보이게끔 로그인 전에는 로그인, 회원가입메뉴가 헤더에 존재하고, 로그인 후에는 이 둘이 사라지고 마이페이지와, 로그아웃메뉴가 헤더에 존재하도록 구현하려고했다. 처음에는 굳이 리덕스를 사용하지않고 세션스토리지에 저장해놓은 토큰의 존재유무에 따라 로그인 여부를 결정하려고했다. const [isLogin, setIsLogin] = useState(false); useEffect(() => { const accessKey = localStorage.getItem("Access_key"); if (accessKey) { setIsLogin(true); } else { setIsLogin(false); } }, .. 2023. 5. 30. 이전 1 ··· 4 5 6 7 8 9 10 ··· 17 다음
