[최종 사용: 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 [로직]:..

React Query 1. 기존 미들웨어의 한계 (Redux-Thunk) 보완 : 보일러 플레이트 => 코드량이 너무 많음 : Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님 2. 강점 : 사용 방법이 쉽고 직관적임 : 보일러 플레이트 만들다가 오류 날 일이 없음 3. 주요 키워드 3가지 (1) Query : 데이터 물어보기 : axios의 get요청과 유사 (2) Mutation : 어떤 데이터 변경 : CRUD 중 CUD에 해당 : axios의 post,patch,delete와 유사 (3) Query Invalidation (★) : 위에서 본 쿼리를 인벨리데이션한다 = 무효화 시킨다. : 저녁 8시의 데이터와 저녁 9시의 데이터는 일치하지 않음 => 무효화시키고 => 9시의 데이터를 ..

▼(회원가입 기능 구현) ▼ #03 React 프로젝트에서 Firebase 사용하기 : Authentication (회원가입 기능 구현) ▼ 2023.11.21 - [Database] - #02 React 프로젝트에서 Firebase 환경 설정하기 ▼ #02 React 프로젝트에서 Firebase 환경 설정하기 2023.11.21 - [Database] - FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) FireBas zerotonine2da.tistory.com (1) 기존 사용자 로그인 [App.js] import { useEffect, useState } from 'react'; import { auth } from './firebase'; ..

▼ Firebase 환경 설정하기 ▼ #02 React 프로젝트에서 Firebase 환경 설정하기 2023.11.21 - [Database] - FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) FireBase 주요 서비스 기능 (Authentication , Firestore , Storage ) 1. FireBase 개념 (1) 구글이 제공하는 서버리스(serverless) 플랫폼 ▶ zerotonine2da.tistory.com ▼파이어베이스 API 라이브러리 참고 자료 (사용법): 외우지 말고 찾아서 사용하기! ▼ JavaScript 프로젝트에 Firebase 추가 의견 보내기 JavaScript 프로젝트에 Firebase 추가 컬렉션을 사용..

#04 리액트를 사용한 팬레터 웹사이트 개발 ▼: 팬레터 등록 기능 구현 및 유효성 검사 , 글자수 제한 방법▼ React#04 리액트를 사용한 팬레터 웹사이트 개발 : 팬레터 등록 기능 구현 및 유효성 검사 , 글자수 #03 리액트를 사용한 팬레터 웹사이트 개발 ▼: DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기 ▼ #03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈화면 팬레터 클릭시 상세페이지로 이동 (useNavigate 사용) 상세화면 UI 구현 공통 컴포넌트 적용 + 조건부 스타일 공통 함수 적용 홈버튼 (Link ..

#03 리액트를 사용한 팬레터 웹사이트 개발 ▼: DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기 ▼ #03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 ▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component) ▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-compone zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 팬레터 입력창(AddForm) : 팬레터 등록 기능 구현 유효성 검사 : 닉네임과 내용 미입력시 등록되지 않도록 적용 최대 글자..