query-string : URL 쿼리 파라미터로 카테고리와 정렬 처리

🎃쿼리스트링이란? 1. url 경로 (pathname) 다음에 나오는 ? 기호로 시작하는 문자열 2. key=value형태로 여러 개는 & 기호로 매개변수 명시 가능 ⭐쿼리 스트링 사용 목적 1) 조건에 맞게 정렬된 형태로 정보 주고 받기 가능 2) 해당 Url로 공유 가능 ⭐ URLSearchParams 객체 사용 이유 1. 쿼리 문자열 파싱 : 현재 페이지 URL의 쿼리 문자열 파싱에 사용 가능 2. 쿼리 문자열 생성 및 수정 : 카테고리 + 정렬 2가지를 사용하기 위해 새로운 문자열 생성 가능 3. 해당 객체는 'toString()'메소드를 통해 쉽게 문자열로 변환 가능 🚫구현하는데 시간이 오래 걸린 포인트 쿼리 스트링을 통해 라우팅이 된다는 점에 "Router.tsx'파일을 수정해야한다는 생각에 ..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 23.
• textsms

파이어베이스 오류 : The query requires an index

// 사용자 (카테고리별) export const getCategoryPosts = (category: Category) => async ({ pageParam }: QueryFunctionContext) => { let q: Query = query(collection(db, 'posts'), where('role', '==', 'user')); if (category !== 'total') { q = query(q, where('category', '==', category)); } if (pageParam) { q = query(q, orderBy('createdAt', 'desc'), startAfter(pageParam), limit(4)); } else { q = query(q, orderBy..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 22.
• textsms

타입스크립트 + useInfiniteQuery : 좋아요 기능 구현 (Optimistic Update)

⭐ 개발환경 * React (CRA) * TypeScript * TanStack Query v5 * Firebase / FireStore * Devtools ⭐ Optimistic Update + useInfiniteQuery 사용 이유 * 사용자 경험을 향상시키기 위함 * 비동기 작업과 관련된 복잡성을 쉽게 해결 가능 * 데이터 패칭/ 데이터 캐싱/ 오류시 상태관리 가능 => 요청된 데이터 캐시하고, 해당 데이터 변경시 자동으로 업데이트 해줌. => 프리패칭으로 미리 가져와서 처리하기 가능 (리팩토링시 적용 예정) 1) Optimistic Update : 사용자가 좋아요 버튼을 눌렀을때, 즉시 UI 업데이트를 하기 가능, 후에 데이터처리 2) useInfiniteQuery : 한번에 모든 데이터가 아닌..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 20.
• textsms

타입스크립트 + useInfiniteQuery : 더보기 기능 마지막 데이터 확인

https://tanstack.com/query/latest/docs/react/guides/infinite-queries Infinite Queries | TanStack Query Docs Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. TanStack Query supports a useful version of useQuery called useInfiniteQuery for querying these types of lists. When us tanstack.com ▼ 예전에 구현한 더보기 기능 (us..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 18.
• textsms

타입스크립트 + Context : 모달 팝업 구현

1. index.tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import ReactDOM from 'react-dom/client'; import { RecoilRoot } from 'recoil'; import App from './App'; import './index.css'; import GlobalStyle from './styles/GlobalStyles'; import AuthContextProvider from './context/AuthContext'; import { ModalProvider } from './hooks/useModal'; const queryClient = new QueryC..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 17.
• textsms

react-spinners : 로딩스피너 구현

[Loader.tsx] import { ClipLoader } from 'react-spinners'; import styled from 'styled-components'; export default function Loader() { return {}; } const Container = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); `; 1. yarn add react-spinners 2. ..

• format_list_bulleted TIL :: Today I Learned
• · 2024. 1. 16.
• textsms