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

Styled-components: GlobalSytles.tsx에 공용 폰트 적용

[GlobalStyles.tsx] import { createGlobalStyle } from 'styled-components'; import theme from './theme'; const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, l..

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

타입스크립트 + useInfiniteQuery : 정렬 기능 구현

1. 타입 지정 [PostList.tsx] export type SortList = 'popularity' | 'latest'; function ViewAllBody() { const [sortBy, setSortBy] = useState('latest'); return ( ) ▶ 정렬 타입 정하고 useState로 관리 (인기순 / 최신순) ▶ 컴포넌트로 props로 전달 2. 코드 [PostListAdmin.tsx] import { QueryFunctionContext, QueryKey, useInfiniteQuery, useQueries } from '@tanstack/react-query'; import { DocumentData, QueryDocumentSnapshot } from 'fireba..

  • format_list_bulleted TIL :: Today I Learned
  • · 2024. 1. 11.
  • textsms
타입스크립트 + useInfiniteQuery : 더보기 기능 구현

타입스크립트 + useInfiniteQuery : 더보기 기능 구현

https://tanstack.com/query/latest/docs/react/guides/query-functions#queryfunctioncontext Query Functions | TanStack Query Docs A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error. All of the following are valid query function configurations: tsx useQuery({ queryKey: ['todos'], queryFn: tanstack.com 1..

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

리액트 : 게시글 '+더보기 버튼' 구현 : 시도(1)

[최종 사용: useInfiniteQuery] 타입스크립트 + useInfiniteQuery : 더보기 기능 구현 https://tanstack.com/query/latest/docs/react/guides/query-functions#queryfunctioncontext Query Functions | TanStack Query Docs A query function can be literally any function that returns a promise. The promise that is returned should either resolve the dat zerotonine2da.tistory.com [사용] * DB : 파이어베이스 * React Query * TypeScript [로직]:..

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

react-query 카테고리별 데이터 가져오기 (+ 반복되는 코드 줄이기)

개발환경 * react * typeScript * Firebase * react-query react-query로 데이터 가져오기 + firebase [api.ts] import { db } from '../shared/firebase'; import { collection, getDocs, orderBy, query, where } from 'firebase/firestore'; import { PostType } from '../types/Posts'; //관리자 (콘텐츠 by Mango) export const getAdminPostList = async (): Promise => { const q = query(collection(db, 'test'), where('role', '==', 'adm..

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