프리온보딩 인턴쉽 지원시 제출했던 사전과제를 리팩토링하여 구현한 투두리스트 어플리케이션
현재는 새롭게 공부한 기술들을 적용해보는 용도로 사용하고 있는 프로젝트입니다.
- 프로젝트명 : 투두리스트
- 개발 기간 : 2023년 9월 21일 ~ 2023년 10월 3일 (2주)
- 분류 : 개인 프로젝트
| 프로젝트 | 기간 | 설명 |
|---|---|---|
| 기본 기능 개발 | 2023.09 ~ 2023.10 | 로그인, 회원가입 및 할 일 CRUD 기능을 개발했습니다. |
| 테스트 적용 | 2024.05 ~ (진행중) | 프론트엔드 테스트를 공부하고 적용해보고 있습니다. |
http://34.232.214.124/ (현재 접근 불가)
⭐️ 테스트 계정
- id : test@test.com
- password : !Q2w3e4r
- 프리온보딩 인턴쉽을 진행하며 배운 내용을 토대로 프리온보딩 인턴쉽 지원시 제출했던 투두리스트 사전과제를 리팩토링하여 구현했습니다.
- 이 프로젝트를 통해 프론트엔드 뿐만아니라 데이터베이스 설계 및 서버 개발, 배포까지 경헙해보고자 했습니다.
프리온보딩 인턴쉽을 통해 배운 것을 기반으로 이 프로젝트의 주된 목표는 아래와 같습니다.
확장성과 유지보수성이 높은 변화에 유연한 소프트웨어 설계
이를 달성하기 위해 아래와 같은 방법들을 사용했습니다.
- UI 로직과 비즈니스 로직의 분리
- 한 컴포넌트에는 한 가지 역할만 위임
- 병렬적으로 사용되는 컴포넌트의 추상화 레벨을 맞춰 가독성 높이기
- 관련있는 코드 한 곳에서 사용하여 유지 보수성 높이기
추가적으로 UX 측면에서 더 나은 사용자 경험을 제공하기 위해
- 에러 핸들링 및 에러에 따른 적절한 사용자 가이드 제공
- React Query를 사용하여 서버 데이터 캐시 및 변경 발생시 refetch
과 같은 방법을 사용했습니다.
- Node.js 18.16.1
- Npm 9.5.1
VITE_BASE_URL='http://127.0.0.1:8080'
$ git clone https://github.com/angielxx/todo-client.git
$ cd todo-client
$ yarn install
$ yarn run dev
📦todo-client
┣ 📂src
┃ ┣ 📂apis
┃ ┃ ┣ 📜AuthService.ts
┃ ┃ ┣ 📜HttpClient.ts
┃ ┃ ┣ 📜TodoService.ts
┃ ┃ ┣ 📜TokenStorage.ts
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂components
┃ ┃ ┣ 📂Calendar
┃ ┃ ┃ ┣ 📜DateTitle.tsx
┃ ┃ ┃ ┣ 📜WeeklyCalendar.tsx
┃ ┃ ┃ ┣ 📜WeeklyCalendarItem.tsx
┃ ┃ ┃ ┣ 📜WeeklyOffsetBtn.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂Common
┃ ┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┃ ┣ 📜CloseBtn.tsx
┃ ┃ ┃ ┣ 📜Icon.tsx
┃ ┃ ┃ ┣ 📜Input.tsx
┃ ┃ ┃ ┣ 📜InputOfForm.tsx
┃ ┃ ┃ ┣ 📜PageTitle.tsx
┃ ┃ ┃ ┣ 📜PageWrapper.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂Fallback
┃ ┃ ┃ ┣ 📜ErrorFallback.tsx
┃ ┃ ┃ ┣ 📜LoadingFallback.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂Modal
┃ ┃ ┃ ┣ 📜DeleteModal.tsx
┃ ┃ ┃ ┣ 📜ModalWrapper.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂TodoForm
┃ ┃ ┃ ┣ 📜DateBtn.tsx
┃ ┃ ┃ ┣ 📜DateCalendarBtn.tsx
┃ ┃ ┃ ┣ 📜TodoForm.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂TodoList
┃ ┃ ┃ ┣ 📜AddTodoBtn.tsx
┃ ┃ ┃ ┣ 📜CategoryChip.tsx
┃ ┃ ┃ ┣ 📜TodoCheckBtn.tsx
┃ ┃ ┃ ┣ 📜TodoList.tsx
┃ ┃ ┃ ┣ 📜TodoListItem.tsx
┃ ┃ ┃ ┣ 📜TodoListItemContent.tsx
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📜ResetBoundaryWrapper.tsx
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂context
┃ ┃ ┣ 📜authProvider.tsx
┃ ┃ ┗ 📜todoProvider.tsx
┃ ┣ 📂guards
┃ ┃ ┣ 📜AuthGuard.tsx
┃ ┃ ┗ 📜UnAuthGuard.tsx
┃ ┣ 📂hooks
┃ ┃ ┣ 📜index.ts
┃ ┃ ┣ 📜useAuthContext.tsx
┃ ┃ ┣ 📜useAuthForm.tsx
┃ ┃ ┣ 📜useTodoContext.tsx
┃ ┃ ┣ 📜useTodoForm.tsx
┃ ┃ ┗ 📜useTodoQuery.tsx
┃ ┣ 📂pages
┃ ┃ ┣ 📜SignIn.tsx
┃ ┃ ┣ 📜SignUp.tsx
┃ ┃ ┣ 📜Todo.tsx
┃ ┃ ┗ 📜index.ts
┃ ┣ 📂routes
┃ ┃ ┣ 📜authRouter.tsx
┃ ┃ ┣ 📜router.tsx
┃ ┃ ┗ 📜todoRouter.tsx
┃ ┣ 📂stores
┃ ┃ ┣ 📜useCalendarStore.ts
┃ ┃ ┗ 📜useTodoFormStore.ts
┃ ┣ 📂styles
┃ ┃ ┣ 📜GlobalStyle.tsx
┃ ┃ ┗ 📜theme.ts
┃ ┣ 📂types
┃ ┃ ┣ 📜error.ts
┃ ┃ ┣ 📜signUp.ts
┃ ┃ ┣ 📜styled.d.ts
┃ ┃ ┣ 📜todoData.ts
┃ ┃ ┗ 📜todoPage.ts
┃ ┣ 📂utils
┃ ┃ ┣ 📜convertDateToString.ts
┃ ┃ ┣ 📜getDateBtnType.ts
┃ ┃ ┣ 📜getDayInKor.ts
┃ ┃ ┣ 📜getToday.ts
┃ ┃ ┣ 📜getWeekInfo.ts
┃ ┃ ┗ 📜validateSignUp.ts
┃ ┣ 📜main.tsx
┃ ┗ 📜vite-env.d.ts
┣ 📜index.html
┣ 📜package.json
┣ 📜tsconfig.json
┣ 📜tsconfig.node.json
┣ 📜vite.config.ts
┗ 📜yarn.lock
- access token 만료시 refresh token을 사용하여 access token 재발급
- 유효성 검사에 따라 적절한 에러 메시지 표시
- 회원가입 시도 후 에러 발생 시 alert 창으로 에러 메시지 표시 (중복되는 이메일 계정 등)
- 유효성 검사에 따라 적절한 에러 메시지 표시
- 로그인 시도 후 에러 발생 시 alert 창으로 에러 메시지 표시 (존재하지 않는 이메일, 비밀번호 불일치 등)
- 날짜를 선택하여 날짜별로 할 일 추가
- 캘린더를 통해 날짜 선택 시 날짜별로 할 일 조회
- 할 일 내용 및 날짜 수정
- 할 일 완료 처리
- 할 일 삭제
- '오늘' 날짜에 할 일 추가
- '내일' 날짜에 할 일 추가
- 날짜 별로 할 일 조회
- 할 일 완료 처리
- 할 일 내용 수정
- 할 일 날짜 수정
