TypeScript : 투두리스트 만들기 (2단계 - Redux Toolkit)

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

• format_list_bulleted TIL :: Today I Learned
• · 2023. 12. 15.
• textsms

#04 리액트 숙련 : 투두리스트의 상세페이지 연결하기(실패)

[원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! ▼구현 성공 #05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공) 0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되 zerotonine2da.tistory.com 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Detail from '../page..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 9.
• textsms

#09 리액트 입문 : 1차로 만들었던 todolist 리팩토링

1. 처음으로 만들었던 투두리스트 [2023.11.06] 리팩토링 ! https://zerotonine2da.tistory.com/64 #08 리액트 입문 :: todolist 만들기 (리액트 컴포넌트 분리) TIL 리액트로 투두리스트를 구현하면서, JSX문법 사용과 랜더링에 대해 배울 수 있었다. 리랜더링이 끝나는 시점에 대해 알 수 있었고, useState를 사용하여 리액트에게 변경값을 알려주는 개념을 zerotonine2da.tistory.com 2. 개선 내용 1. 태그의 onSubmit 사용 2. id값 = uuid 사용 3. Working과 Done부분을 하나의 컴포넌트 로 만들기 --중복 줄이기 - 기존에는 Contents라는 컴포넌트 안에 (Working + Done부분을 2개의 DIV태그..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 8.
• textsms

#08 리액트 입문 : todolist 만들기 (리액트 컴포넌트 분리)

TIL 리액트로 투두리스트를 구현하면서, JSX문법 사용과 랜더링에 대해 배울 수 있었다. 리랜더링이 끝나는 시점에 대해 알 수 있었고, useState를 사용하여 리액트에게 변경값을 알려주는 개념을 직접 구현해보니 조금은 더 알 수 있는 계기가 되었다. 1.todolist 필수 구현 1. 제목과 내용을 입력하고, [추가하기] 버튼을 클릭하면 Working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 구성 2. Todo의 isDone 상태가 true이면, 상태 버튼의 라벨을 취소, isDone이 false 이면 라벨을 완료 로 조건부 렌더링 3. Todo의 상태가 Working 이면 위쪽에 위치하고, Done이면 아래쪽에 위치하도록 구현 4. Layout의 최..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 6.
• textsms

#06 리액트 입문 :: todolist 오류 정리 | list should have a unique "key" prop. 외

1. 오류 : 배열 메소드 오류 const initialState = [{ id: 0, title: '', body: '', isDone: false }]; ▶ 실수한 부분: 배열 메소드인데 객체로 선언했었음..😢 2. 개선 : 태그 이벤트 코드 수정 제목 titleHandler(event)}> ▶개선 사항 : event만 넘겨줄 경우, {titleHandler} 이렇게 변경해도 자동으로 event는 인자값으로 넘어감 3. 오류 : list should have a unique "key" prop. return ( 제목 내용 추가하기 {toDo.map(function (item) { return ( Working.. {item.title} {item.content} ); })} map에서는 key값을 설..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 3.
• textsms