chaedie / simple-todo-list

React로 to-do-app을 만든 개인 프로젝트입니다.

To do App

👉 배포 링크 👈

기술 스택

• TypeScript

• Axios, ContextAPI

• MUI, Emotion

  
  

폴더 구조

📦src
 ┣ 📂apis
 ┃ ┣ 📜AuthService.ts
 ┃ ┣ 📜TodoService.ts
 ┃ ┗ 📜index.ts
 ┣ 📂components
 ┃ ┣ 📂Auth
 ┃ ┃ ┗ 📜AuthForm.tsx
 ┃ ┣ 📂Layout
 ┃ ┃ ┗ 📜Layout.tsx
 ┃ ┣ 📂Todo
 ┃ ┃ ┣ 📜DeleteTodo.tsx
 ┃ ┃ ┣ 📜TodoInput.tsx
 ┃ ┃ ┣ 📜TodoItem.tsx
 ┃ ┃ ┣ 📜TodoList.tsx
 ┃ ┃ ┗ 📜UpdateTodo.tsx
 ┃ ┗ 📂common
 ┃ ┃ ┗ 📜Header.tsx
 ┣ 📂contexts
 ┃ ┗ 📜TodoListContext.ts
 ┣ 📂hooks
 ┃ ┣ 📜useAutoLogin.ts
 ┃ ┣ 📜useFetch.ts
 ┃ ┣ 📜useForm.ts
 ┃ ┗ 📜useHandleToken.ts
 ┣ 📂model
 ┃ ┗ 📜Todo.ts
 ┣ 📂pages
 ┃ ┣ 📜AuthPage.tsx
 ┃ ┗ 📜TodoPage.tsx
 ┣ 📜App.tsx
 ┣ 📜Router.tsx
 ┣ 📜index.tsx
 ┗ 📜react-app-env.d.ts

개발 일지

1. React.js로 구현
2. TypeScript로 마이그레이션
3. Fetch => Axios 적용
4. ContextAPI 적용
5. MUI 적용을 위해 프로젝트 재구현 (TypeScript, Axios, ContextAPI)

문제 해결 과정

• Delete 통신 시 발생하는 "Unexpected end of JSON input" 에러
• gh-pages 배포 과정

타입 스크립트 적용 과정

• Todo App 타입스크립트 마이그레이션 (1)
• Todo App 타입스크립트 마이그레이션 (2)
• Todo App 타입스크립트 마이그레이션 (3)
• Todo App 타입스크립트 마이그레이션 (4)

Axios 적용 과정

• Fetch => Axios 적용