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

TypeScript : 투두리스트 만들기 (4단계 - Thunk + Axios ) TypeScript : 투두리스트 만들기 (3단계 - Json-server) TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, zerotonine2da.tistory.com Lv5 Lv4의 과제에서 Redux를 react-query로 리팩토링 합니다. Keyword query 1. React-Query 설치 yarn add react-query 2. index.tsx import ReactDOM from 'react-dom/client';..

TypeScript : 투두리스트 만들기 (3단계 - Json-server) TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이 zerotonine2da.tistory.com Lv4 Lv4의 과제에서 데이터베이스의 비동기 처리 로직을 추가합니다. Lv3의 코드에서, createAsyncThunk를 추가하여 json-server 상태 관리 로직을 다루도록 합니다. Keyword Thunk 1. redux -thunk 설치 yarn add redux-thunk ..

TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drillin zerotonine2da.tistory.com Lv3 Lv3의 과제에서 json-server를 추가합니다. Todo를 Create, Delete, Update(완료/취소), Read(From Json-server)가 가능해야 합니다. Lv2의 코드를 고쳐서 만듭니다. Keyword DB 1. json-server 설치 y..

TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drilling, state 끌어올리기 1. 프로젝트 생성 : npx create-re zerotonine2da.tistory.com Lv2 React + redux-toolkit를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소)가 가능해야 합니다. Lv1의 코드를 고쳐서 만듭니다. Keyword 전역 상태 관리, redux 1. props drilling과 us..

[App.tsx] export type Todo = { id: string; title: string; content: string; isDone: boolean; }; function App() { const initialState: Todo = { id: uuid(), title: '제목1', content: '내용1', isDone: false, }; //데이터 : 배열 안 객체 const [todos, setTodos] = useState([initialState]); return ( My Todo List [InputForm.tsx] import { Todo } from '../App'; type Props = { todos: Todo[]; setTodos: React.Dispatch; }; f..