칠구의 블로그

리액트 쿼리란 요즘 프론트엔드 개발을 하다 보면 리액트 쿼리(TanStack Qurry)를 많이 사용한다.사용하는 다양한 이유가 있지만 내가 느끼는 가장 큰 장점은 캐싱이다. 리액트 쿼리의 캐싱리액트 쿼리 캐싱은 데이터를 효율적으로 관리하여 사용자경험을 부드럽게 만드는 기능이다.즉 한번 불러온 데이터를 다시 불러오지 않고 바로 불러와 사용자경험을 향상하는 것!!주요 개념staleTime : 캐시가 신선한 상태로 유지되는 시간cacheTime : 캐시가 메모리에 남아있는 시간refetchInterval : 주기적으로 데이터 갱신실제로 사용자 경험을 향상시키는 지 확인하기육안으로 보기엔 큰 차이가 없어 보여 개발자 모드 - 네트워크를 통해 실제로캐싱이 데이터를 효율적으로 관리하는 지 살펴보았다. 리액트 쿼..

🔍검색 기능 리덕스 스토어에 저장되어 있는 state를Redux Toolkit를 사용해서 검색 기능을 구현해 보겠다나는 캐릭터와 무비 검색 기능을 구현했다Slice와 컴포먼트를 수정하면 된다 📁Slice 파일 수정이곳에서 검색을 할 수 있도록상태정의, 리듀서 정의 , 비동기 처리를 하면 된다// 상태 정의initialState: { movieList: [], filtermovieList: [], searchMovie: '', },여기서는 전체 데이터(movieList) + 검색 결과(filtermovieList) + 검색어(searchMovie)를 정의했다. // 리듀서reducers: { setMovieSearch: (state, action) => { state.s..

▪ Redux toolkit이란 Redux를 쉽고 편리하게 사용할 수 있도록 해주는 라이브러리다 기존 Redux를 사용할 때 설치해야 할 다양한 패키지(thunk, immer)를 설치할 필요가 없게 해 주고Action , Reducers 등등 작성해야 할 코드의 양을 줄일 수 있어 편리하게 사용할 수 있다. 「createSlice」 createSlice는 Redux toolkit의 주요 기능으로액션, 리듀서, 액션 생성기를 별도로 정의하던 것에서이 모든 것을 하나의 슬라이스로 통합해서 사용할 수 있게 해주는 함수이다  ▪ RTK를 이용한 ToDo 앱 할 일을 추가, 삭제할 수 있는 간단한 ToDo 앱을 만들어보며RTK 사용해 보기!!  기획 /todo-app├── /src│ ├── /component..

▪ Redux? 상태관리 라이브러리로웹 규모가 커지면서 관리해야 할 상태들이 많아졌고 어떤 컴포넌트에서 언제 , 어떻게 , 왜 상태를 변경했는지파악하기 위해 만들어졌다 ▪ Redux 장점 전역 상태관리를 통한 로직 간소화 Time Travel을 통한 시간 여행(쉬운 디버깅) 원본 데이터 무결성 유지 예측 가능성 ( 모든 상태 변화가 액션을 통해 이루어지기 때문)   ▪ 수많은 상태관리 라이브러리 중 Redux를 고른 이유❗❗ React와 궁합이 잘맞고가장 오래된 라이브러리로써 Redux를 잘 이해하고 다루면다른 라이브러리도 쉽게 사용할 수 있을 것이라고 생각했기 때문!! ▪ 구성 요소 Store : Redux State(데이터)들을 저장하기 위한 저장소State : Store에 저장되어 있는 데이터Act..

지금까지 firebase , aws 배포를 해봤는데 그중 제일 간단하고 쉬운 깃허브 배포를 작성해 보겠다 1. npm i gh-pages 명령어  2. package.JSON 수정 3. npm run build 명령어  4. npm run deploy  5. 홈페이지 확인하기1. npm i gh-pages 명령어우선 vs 터미널에 npm i gh-pages 명령어를 입력한다 2. package.JSON package.JSON에 들어가서 "homepage" : "내 레포 주소"를 추가해 주면 된다다음 scripts안에 "deploy" : "gh-pages -d build" 추가 3. npm run build내 폴더 빌드하기!!build 폴더가 생성됐다면 성공적으로 끝난 것  4. npm run deplo..