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';..

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시의 데이터를 ..

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..

TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit) TypeScript : 투두리스트 만들기 (1단계 - React Props) Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drillin zerotonine2da.tistory.com Lv1 React를 이용한 TodoList를 만듭니다. Todo를 Create, Delete, Update(완료/취소) 가 가능해야 합니다. 이때, useState와 Props만을 사용합니다. Keyword props drilling, state 끌어올리기 1. 프로젝트 생성..