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 : 더보기 기능 구현

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

리액트 기술면접 대비 (1)

1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? * 상태관리 이유 : 데이터 일관성 / 코드 관리성 / 디버깅 용이성 * 평소 state관리 : (1) state와 props: 컴포넌트 내부 상태(state)와 부모 컴포넌트로부터 전달 받은 props (2) LifeCycle 메소드 : 클래스 컴포넌트에서 상태 업데이트와 같은 사이드 이펙트 관리에 사용 (3) Redux : 전역 상태관리 라이브러리 (4) React Query : 서버상태 관리 라이브러리. 데이터 패칭. 캐싱, 동기화 등 효과적 관리 ▶ 간단한 로컬 상태는 useState로 관리 / 애플리케이션의 전반 상태는 redux / react query 2.Redux가 무엇인가요, 왜 Redux를 사용하시나요? * R..

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